Make it possible to generate two sets of images widths, for low and high screen densities

[nhoizey]

Screen with >2dppx density require lower quality, more compressed, images: https://observablehq.com/@eeeps/visual-acuity-and-device-pixel-ratio

It might be better having different images widths for high density screens (most being mobiles) and low density screens.

Serving lower quality images to high density screens requires using <picture> with a density media query:

<picture>
  <source
    media="(min-resolution: 2dppx), (-webkit-min-device-pixel-ratio: 2)"
    sizes="…"
    srcset="
      image-q10-720.jpg 720w,
      image-q10-1280.jpg 1280w,
      image-q10-1400.jpg 1400w">
  <img
    src="image-q80-320.jpg"
    sizes="…"
    srcset="
      image-q80-360.jpg 360w,
      image-q80-800.jpg 800w,
      image-q80-1024.jpg 1024w">
</picture>

The 2dppx threshold should be a parameter.

[ryuran]

Ok, each source will be process separatly. In your <picture> example, stats should't return visit with device pixel ratio 2 displaying <img>

But we should browse page with each device pixel ratio to have effective sizes…

[nhoizey]

The browser follows the media queries from the <source>s, they are orders to follow.

srcset and sizes are more hints than orders. That's why we should never use <picture> if there is no Art Direction or type selection required.