Deal With The HiDPI/Max Resolution Problem

[JamieB-gu]

The Problem

This is well summarised in this issue: https://github.com/whatwg/html/issues/4421

Possible Solutions

To avoid this problem we may have to use the same solution as frontend. In brief, we provide a different source element for each breakpoint. These source elements will contain a single URL in the srcset attribute. We can also add a second source for each breakpoint with a min-resolution media query, to provide the DPR 2 URLs:

<picture>
  <source
    media="(min-width: 1300px) and (min-resolution: 120dpi)"
    srcset="https://i.guim.co.uk/...?width=1500&quality=45 1500w"
    sizes="750px"
  >
  <source
    media="(min-width: 1300px)"
    srcset="https://i.guim.co.uk/...?width=750&quality=85 750w"
    sizes="750px"
  >
  <source
    media="(min-width: 1140px) and (min-resolution: 120dpi)"
    srcset="https://i.guim.co.uk/...?width=1200&quality=45 1200w"
    sizes="600px"
  >
  <source
    media="(min-width: 1140px)"
    srcset="https://i.guim.co.uk/...?width=600&quality=85 600w"
    sizes="600px"
  >
  ...
</picture>

Alternatively it might be possible to include the DPR 2 URLs in the existing breakpoint source elements:

<picture>
  <source
    media="(min-width: 1300px)"
    srcset="
      https://i.guim.co.uk/...?width=750&quality=85 750w
      https://i.guim.co.uk/...?width=1500&quality=45 1500w
    "
    sizes="750px"
  >
  <source
    media="(min-width: 1140px)"
    srcset="
      https://i.guim.co.uk/...?width=600&quality=85 600w
      https://i.guim.co.uk/...?width=1200&quality=45 1200w
    "
    sizes="600px"
  >
  ...
</picture>

Note: In this second example we could use the pixel density descriptor instead of the width descriptor, i.e. use 1x, 2x instead of 750w, 1500w.

[mxdvl]

I think the second option is the most sound, because of how it groups things together and reduced the need for -webkit-device-pixel-ratio, as min-resolution is unsupported on Safari (macOS and iOS).

However, if we wanted to make more granular decisions in the future, maybe based on prefer-reduced-data, we might have to to have one source per “source”.

Worth nothing we can forgo the duplication of sizes in the first option, because there’s only one srcset:

<picture>
  <source
    media="(min-width: 1300px) and (min-resolution: 120dpi)"
    srcset="https://i.guim.co.uk/...?width=1500&quality=45"
  >
  <source
    media="(min-width: 1300px)"
    srcset="https://i.guim.co.uk/...?width=750&quality=85"
  >
  <source
    media="(min-width: 1140px) and (min-resolution: 120dpi)"
    srcset="https://i.guim.co.uk/...?width=1200&quality=45"
  >
  <source
    media="(min-width: 1140px)"
    srcset="https://i.guim.co.uk/...?width=600&quality=85"
  >
  ...
</picture>