Why Different Displays Need Different Images

Display density has changed dramatically since the days of 96 ppi CRT monitors, which is why the CSS spec still defines a pixel as 1/96th of an inch. When Apple introduced Retina displays in 2010, those screens came in at a minimum of 192 ppi—double the density of older displays. LED monitors have since made high-density screens the norm, and now most devices have a devicePixelRatio between 1.0 and 4.0.

This ratio matters because a "pixel" can mean different things. A device pixel is the smallest physical dot of color on a screen, while a CSS pixel is a unit of physical measurement defined by the spec. The relationship between the two is expressed by window.devicePixelRatio, which you can check in your browser console. For example, a 192 ppi display has a ratio of 2 because two of its physical pixels fit into one CSS pixel.

The practical consequence is that a single image version will look blurry on some screens and wasteful on others. Serving images sized for a ratio of 1 on a 3x display forces the browser to upscale, which defeats the purpose of high-resolution screens.

Image Dimensions Are Logical, Not Physical

It's worth remembering that the pixel dimensions shown in image editors and file properties are logical pixels, not device pixels. For high-resolution displays you need images with proportionally larger dimensions—not just a scaled-up version of a smaller file. Merely enlarging an image in HTML doesn't add detail; the browser can already do that on its own, and it produces the same soft result you get when no high-resolution source is provided.

Using Density Descriptors in srcset

Density descriptors let you offer those different image versions without forcing the browser to download extra files to figure out which one it needs. The descriptor itself tells the browser the intended pixel density, so it can pick the right source based on the device's devicePixelRatio.

Here's how it looks in practice:

<img src="flower.jpg"
 >

In this example:

  • 1x, 2x, and 3x are density descriptors that tell the browser which image to use for devices at 1.0, 2.0, and 3.0 pixel density.
  • The browser chooses between flower-1x.jpg, flower-2x.jpg, and flower-3x.jpg accordingly.
  • flower.jpg acts as the fallback for browsers that don't support srcset.

A few practical notes when working with density descriptors:

  • Write the descriptor using the device's devicePixelRatio plus the x unit. A ratio of 2 becomes 2x.
  • If no descriptor is supplied, the image is assumed to be 1x.
  • Including the density in the filename is a common convention for keeping files organized, but it is not required—any filename works.
  • You don't need a sizes attribute here. That attribute is only used with width descriptors, not density descriptors.

The browser's device emulator is a good way to test this behavior. Different emulated devices will report different devicePixelRatio values, and you'll see the browser request the corresponding image source based on what you select.