CODEWITHSUNDEEP
htmlcssresponsive-images
Flimm
Flimm

Reputation: 150643

What do the width and height attributes do when using srcset and sizes?

If we're using the srcset and sizes attributes, it is still useful to specify a src attribute as a fallback. Similarly, I imagine that older browsers would also take advantage of width and height attributes if they were specified. But do modern browsers?

For example:

<img
   src="foo100x100.jpg"
   srcset="foo100x100.jpg 100w, foo500x500.jpg 500w, foo900x900 900w"
   sizes="100vw"
   width="100"
   height="100"
   alt="example"
>

Are the width and height attributes of any use to a modern browser in this example?

Upvotes: 7

Views: 2203

Answers (1)

Flimm
Flimm

Reputation: 150643

Based on experimentation, it behaves as if you had specified width and height CSS properties in pixels. However, it can be overridden by your own CSS.

img {
  width: 200px;
  /* height will be 100px because of the HTML attribute */
}
<img
     src="http://placehold.it/100x100"
     srcset="http://placehold.it/100x100 100w, http://placehold.it/500x500 500w"
     sizes="100vw"
     alt=""
     width="100"
     height="100"
>

This is a bit disappointing, as I was hoping that modern browsers would use width and height HTML attributes to determine what the aspect ratio of the image was before downloading the image, so as to avoid the layout of following content jumping around as the page loads.

Upvotes: 5

Related Questions