Device pixel ratio

As screen densities rose, a layout measured in physical pixels would have shrunk to illegibility on a high-density display.

The CSS pixel was therefore decoupled: it became a unit of apparent size rather than a count of hardware pixels.

A ratio of two means each CSS pixel is drawn using a two-by-two block of screen pixels, which is four times the detail in the same apparent area.

So the same layout occupies the same physical space on a low-density and a high-density screen, and only the sharpness differs.

Ratios are not always whole numbers, and a fractional value is normal on several device classes.

A file matching the CSS width looks soft on a high-density screen, because there is more detail available than the file supplies.

A file at the CSS width multiplied by the ratio looks sharp and weighs considerably more.

This is the whole reason width descriptors and the sizes attribute exist: the browser knows the ratio and the rendered width, and picks accordingly.

Density descriptors are the alternative for images rendered at a fixed size, where there is no rendered width to compute.

A background image set in CSS has neither mechanism and needs media queries on resolution to achieve the same thing.

Above roughly twice the CSS size, the difference becomes very hard to see while the file weight keeps climbing.

Weight grows with the square of the dimension, so a three-times file is more than twice the bytes of a two-times file.

Which is why capping the largest candidate at around twice the rendered width is a common and defensible choice.

Photographic content tolerates this better than text rendered into an image, where the softness is much more visible — and text in an image is worth avoiding for other reasons anyway.

Browsers also factor connection conditions into their choice, so an offered candidate is not always the one fetched.

Canvas rendering, which must be scaled by the ratio explicitly or it renders soft on high-density screens.

Icons, where a vector avoids the question entirely and is the reason vectors are preferred for interface graphics.

Hairline borders, where a one-pixel CSS border is drawn across several screen pixels and can look heavier than intended.

Screenshots, which capture physical pixels and therefore appear at multiple size when inserted without scaling.

Rendering is performed at a phone viewport, and responsive image behaviour is read at that width.

The file really served is compared with the space the image occupies, with density taken into account so a two-times file is not reported as oversized.

Width and height attributes are checked separately, since layout shift is independent of density.

One device profile is measured, so a ratio different from the profile produces a different selection in reality.