Image with srcset and pixel density descriptors

The pixel density descriptor of srcset lets you tell the browser what image should be used depending on the device pixel ratio. If there are 1x, 2x or 3x device pixels to CSS pixels then the corresponding image will be chosen.

You can see the device pixel ratio in the information in the top right of the screen under devicePixelRatio.

Note that the actual width of the device or window does not affect the calculation, only the device pixel ratio.

Image element width

The width of the image element take the pixel density account when determining its size. The equation is: image element width = width of the source image / pixel density For the examples above:

• The 600x600.png has a pixel density of 1x, 600/1 = 600 CSS pixels.
• The 1200x1200.png has a pixel density of 2x, 1200/2 = 600 CSS pixels.
• The 1500x1500.png has a pixel density of 3x, 1500/3 = 500 CSS pixels. Note how 1500 isn't actually 3x the pixel density, so this actually a mistake. But it's a good demonstration of how the image width takes pixel density into account.