How to Use Srcset and Sizes for Responsive Images

How to use srcset and sizes for responsive images

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.

responsive images with srcset, sizes, media-queries - Prevent loading huge images for higher pixel density

I found 2 possible solutions:

Both use the min-resolution media-query to define separate sizes per pixel density.
I use a more simple example than in the question to explain it:

Idea 1

<img src="500.jpg" title="..." alt="..." 
    srcset="
       500.jpg 500w,
       1000.jpg 1000w"
    sizes="
       (min-resolution: 3dppx) 33vw,
       (min-resolution: 2dppx) 50vw,
       (min-resolution: 1dppx) 100vw"
/>

I used the 100vh examples, and "reverted" that the browser takes images that are current_with * pixel-density.

This solution works for full-screen images, but you can use custom viewports.

Idea 2

<img src="500.jpg" title="..." alt="..." 
    srcset="
       500.jpg 500w,
       1000.jpg 1000w"
    sizes="
       (min-resolution: 3dppx) and (max-width: 600px) 1500px,
       (min-resolution: 3dppx) and (max-width: 1200px) 2000px,

       (min-resolution: 2dppx) and (max-width: 600px) 1000px,
       (min-resolution: 2dppx) and (max-width: 1200px) 2000px,

       (min-resolution: 1dppx) and (max-width: 600px) 500px,
       (min-resolution: 1dppx) and (max-width: 1200px) 1000px"
/>

I created similar media-queries based on screen-width, but added sizes that "reverted" that the browser takes images that are current_with * pixel-density.

This solution for all images, even if they are not full size.
Here you can use custom viewports, but it is relativ much code.

The basic idea behind both:

• e.g. for pixel denstity 2x and 500px screen-width the browser chooses the srcset for the double size, that was defined in the sizes media-query and takes the 1000px - image
• so I tried to define new media-queries for the double of my desired size (e.g. 1000px), that takes the that browser gets my desired 500px, when it is deviced by the pixel-ratio

In summery that means:

if you like to revert the effect that browser takes bigger images for mobil-device with big pixel-denstity you must calculate new values for your sizes for each pixel-density.

For both solutions you should define the display sizes via css too.

E.g. this example simple php-code shows that:

<?php
  $viewport = [
    // Viewport => Image-Size
    600  => 500,
    1200 => 1000
  ];

  // walk over all pixel-densities
  for($i=3; $i>0; $i--) {
    foreach($viewport as $vp => $w) 
      echo "(min-resolution: {$i}dppx) and (max-width: {$vp}px) "
            .floor($w/$i) . "px,\n";
  }
?>

Responsive picture element downloading correct size image from srcset

From the documentation:

The browser will:

1. Look at its device width.
2. Work out which media condition in the sizes list is the first one to be true.
3. Look at the slot size given to that media query.
4. Load the image referenced in the srcset list that has the same size as the slot or, if there isn't one, the first image that is bigger than the chosen slot size.

Responsive Images using srcset and sizes

Here's a nice explanation and demonstration of the math behind this decision making:

https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/

Plus, here you can find a nice automatic responsive breakpoints generator that uses advanced analytics to extract the best optimized set of breakpoints for a specific image:

http://www.responsivebreakpoints.com/

---

Related Topics