Enables developers to add large `w` descriptors to their srcset syntax (e.g. to serve large screens with 2x DPR) without worrying about triggering excessive downloads on small screens with 3x and 4x DPRs. This will put a cap on the density taken into account when srcset selects images, to avoid excessively-large downloaded images.

Motivation

Please treat this as an inline explainer: Currently, when adding `w` descriptors to srcset, developers run a risk that large `w` descriptor images will be used on small screens with very-high density values. For example, when defining `<img srcset="300.jpg 300w, 600.jpg 600w, 1200.jpg 1200w, 2400.jpg 2400w">`, developers that define the 2400px wide image typically intend for it to be used for very large screens (e.g. a 32" 2x screen), but it often ends up also being used on small screens (e.g. a phone with 4x DPR and viewport width of 600+px) . Research [1] shows that density above 2.2x is not visible by most people, and therefore we could avoid wasting those bytes and avoid the related slowdown. See https://github.com/whatwg/html/issues/4421 for full discussion [1] https://observablehq.com/@eeeps/visual-acuity-and-device-pixel-ratio

Status in Chromium

Blink>Image


In development (tracking bug)

Consensus & Standardization

After a feature ships in Chrome, the values listed here are not guaranteed to be up to date.

  • No signal
  • No signal
  • No signals

Owner

Comments

No spec changes required, as UAs are free to apply srcset selection logic as they see fit.

Last updated on 2021-08-13