How to use srcset and sizes for responsive images

Question

I have following snap-points: 480px, 900px, 1800px, 2400px.

and this markup:

Answer 1

1. Basics

Device-pixel ratio

Device-pixel ratio is the number of device pixels per CSS pixel which is related to:

• Pixel density of the device (number of physical pixels per inch)
• Zoom level of the browser So, greater Pixel density and/or higher Zoom level results in higher Device-pixel ratio.

---

srcset attribute & x descriptor

On <img> tag, the x descriptor in the srcset attribute is used to define the device-pixel ratio. So in:

<img src="image.jpg" srcset="image-1x.jpg 1x, image-2x.jpg 2x, image-3x.jpg 3x">

• for a device-pixel ratio of 1, the image image-1x.jpg will be used.
• for a device-pixel ratio of 2, the image image-2x.jpg will be used.
• for a device-pixel ratio of 3, the image image-3x.jpg will be used.
• for the fallback the src attribute (image.jpg) will be used.

srcset attribute & w descriptor

If you want a different image on a larger or smaller viewport, the w descriptor in srcset and a new attribute (sizes) comes into play:

<img src="image.jpg" srcset="image-1x.jpg 200w, image-2x.jpg 400w, image-3x.jpg 600w">

This mentions that the width of the first image is 200px, second image is 400px, and third image is 600px. Also, if the user’s screen is 150 CSS pixels wide, this equates to the following in terms of x descriptors:

<img src="image.jpg" srcset="image-1x.jpg 1.33x, image-2x.jpg 2.67x, image-3x.jpg 4x">

sizes attribute

The actual implementation where you’d want a different size image (different height, width) on different screen sizes is accomplished by using sizes attribute along with the w descriptor of srcset attribute.

<img src="image.jpg" sizes="50vw" srcset="image-1x.jpg 200w, image-2x.jpg 400w, image-3x.jpg 600w">

If the browser width is 500 CSS pixels, the image will be displayed 250px wide (because of 50vw). Now, this is equivalent to specifying:

<img src="image.jpg" srcset="image-1x.jpg 0.8x, image-2x.jpg 1.6x, image-3x.jpg 2.4x">

So, for a 1.5x display, image-2x.jpg will be downloaded by a browser, since it gives a device-pixel ratio of 1.6x (which is most suitable for a 1.5x display).

2. Answering your question

You have mentioned that you have emulated a 480px CSS width screen.

Because you have set sizes to 100vw, that is equivalent to specifying:

<img src="boat-2400.jpg" srcset="
     boat-480.jpg 1x,
     boat-900.jpg 1.88x,
     boat-1800.jpg 3.75x,
     boat-2400.jpg 5x">

There is chance you have 3x display, and thus the browser downloads boat-1800.jpg file.

Questions

Oddly, when I tested this on Chrome on iOS the browser actually downloaded boat-2400.jpg which is even more worrying.

That would be due to the higher Device-pixel ratio of your iOS device, which is likely to be something near 5.

Have I missed something here?

I dont think so.

I imagine I don't need the sizes attribute because I have the image set to 100vw in all views

The value of sizes is 100vw by default. But if you want to use w descriptor and want to have something other than 100vw for your sizes, you need sizes attribute.