Geek Answers Handbook

How to use srcset and sizes for responsive images

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

and this markup:

 <img sizes="(max-width: 2400px) 100vw, 2400px" srcset=" boat-480.jpg 480w, boat-900.jpg 900w, boat-1800.jpg 1800w, boat-2400.jpg 2400w" src="boat-2400.jpg" alt="This is a boat">

How can I make responsive images work?

+8
source share
1 answer

1. The basics

Pixel to device ratio

The device pixel ratio is the number of device pixels per CSS pixel that is associated with:

  • Device pixel density (physical pixels per inch)
  • Browser Zoom Level So, the higher the pixel density and / or the higher the zoom level, the higher the pixel to device ratio .

srcset & x descriptor attribute

In <img> the x descriptor in srcset used to determine the ratio of the device to the pixels . So in:

 <img src="image.jpg" srcset="image-1x.jpg 1x, image-2x.jpg 2x, image-3x.jpg 3x">
  • image-1x.jpg will be used to relate the device to pixel 1.
  • image-2x.jpg will be used to relate the device to pixel 2.
  • image-3x.jpg will be used to relate the device to pixel 3.
  • the src attribute (image.jpg) will be used as a fallback.

srcset attribute and descriptor w

If you need a different image in the viewport larger or smaller, in srcset descriptor w in srcset and a new attribute ( sizes ):

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

This indicates that the width of the first image is 200px , the second image is 400px , and the third image is 600px . Also, if the user’s screen has a width of 150 CSS pixels , this corresponds 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 (different height, width) on different screen sizes is achieved by using the sizes attributes along with the w descriptor of the 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 with a width of 250px (due to 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">

Thus, for a 1.5x display, image-2x.jpg will be downloaded using a browser, as it gives a 1.6x pixel device 1.6x (which is most suitable for a 1.5x display).

2. Answering your question

You mentioned that you emulated a CSS 480px wide screen .

Since you set sizes to 100vw , this 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 a chance that you will have a 3x boat-1800.jpg display, so the browser downloads the boat-1800.jpg .

Questions

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

This may be due to a higher pixel to device ratio of your iOS device, which is likely to be around 5.

Am I missing something here?

I do not think so.

I think I don’t need the size attribute because I have a 100vw image set in all kinds

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

+5
source

More articles:


All Articles