HTML Picture or Srcset for Responsive Images

HTML picture or srcset for responsive images

As of 2022, both picture and srcset are compatible with all modern browsers. However, if an older browser doesn't understand the <picture> element, it will gracefully fall back to the <img> element inside of it. If an older browser doesn't understand <img srcset...> it will fall back to using the src attribute of the image.

The <picture> element (and <source> sub-elements) are the heavy guns you bring in when you want to do art direction on different sizes / aspect ratios of the image. The img srcset attribute is much more lightweight and is all you need if you want to design for different resolution displays.

Because both are widely supported, I would not worry too much about which one you use. If you're only designing for pixel density, I would recommend srcset because it's more lightweight.

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 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";
  }
?>

---

Related Topics