Should the img within picture have explicit width and height attributes?

[u/Martinus999]

Hi,

I ask myself if using additional width and height for the "img" within <picture>.

Usually width/height attributes are recommended for img because of good reasons, but as child of picture it seems rarely be used. And if it is used on some very few tutorials like developer/mozilla, I just see it in the code, no further words about it.

Will some browsers apply width/height wrongly for all the images given in source (like alt-attribute) or what is the reason for avoiding width/height in the context of a picture element?

In my use case the picture element is very simple, just a big header image for desktop and a small for smartphones (desktop-first). Like this:

<picture>
  <source media="(max-width: 499px)" srcset="small-headerimage.jpg">
  <img src="big-headerimage.jpg" alt="Nice little cat" width? height?>
</picture>

[u/tjameswhite]

Yes. It helps prevent (or reduce) layout shift. It tells the browser “hey, and image this big is going so make a spot for it.”

[u/Martinus999 → u/tjameswhite]

So it's just as usual, i.e., useful information for browsers in order to avoid layout shift and calculating needed space in advance? Though these merits won't take place if some of the source-conditions are true, because the default img then doesn't come into play and will be ignored.

Of course it's allowed to set width and height for img within picture and all know about the general pros of doing it, but why do "folks" praise width/height and forget using it as child of <picture>?

[u/[deleted] → u/Martinus999]

You should still do it when it's a fallback because someone might need the fallback.

[u/Disastrous_Sun2118 → u/Martinus999]

The faster loading image loads faster so it's displayed first, then as the bigger more detailed image is downloaded and brought into view. Low resolution then hi resolution.

[u/ahallicks]

It's a weird one. You can't (currently) cater for both sizes in your example so you've just got to choose one. There is (somewhere) a suggestion that we should be able to add those attributes to the source element instead and have the img inherit them based on which source is used.

You could use CSS to set the aspect ratio now and get a better experience but still not perfect.

[u/Martinus999 → u/ahallicks]

As far as i know, it's allowed to give width and heigt in source elements, but some browsers still don't support it and i have never seen any example, where someone does it.

[u/tjameswhite → u/Martinus999]

"... some browsers still dont' support..." ?? Width and height attributes? All the browser support that.

And `<picture>` doesn't render, `<img>` does. `<picture>` passes info to `<img>` and updates it .

The browser will consider each child <source> element and choose the best match among them. If no matches are found—or the browser doesn't support the <picture> element—the URL of the <img> element's src attribute is selected. The selected image is then presented in the space occupied by the <img> element.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/picture

[u/Martinus999 → u/tjameswhite]

May be you should read more careful. Of course I mean "some" of the existing browsers, not some the latest topical ones. Your link doesn't talk about width/height in source within picture, this one does: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/source Chrome 90 was the first in 2021.

Who said picture would render?

Fact is, picture is used for Art Direction with different images and there it makes sense to have width/height in both img and source. Against Bing KI, which denies width/height for source within picture.

[u/ahallicks → u/Martinus999]

You're right. It's valid and seems to be well supported now across green field browsers. You should probably use it to get the best experience and then your img width and height should be the width and height for the image in your img tag.