What device sizes/resolutions does Chrome's `srcset` attribute correspond to?

Question

Is there a map defining what device sizes/resolutions the Google Chrome IMG srcset attribute sizes correspond to?

For example, in the case of

<img src="pic1x.png" srcset="pic1x.png 1x, pic2x.png 2x, pic4x.png 4x">

What size/resolution screens would receive each of those image sizes? And/or are there other sizes?

Answer 1

The srcset multiplier represents dots per pixel unit. It maps to a ratio of pixels to physical dimensions, rather than a particular resolution. Here is a simple mapping:

Multiplier(dppx)  Dots Per Inch(dpi)
1                 96dpi
1.3               124.8dpi
1.5               144dpi
2                 192dpi

1 dppx = 96 dpi
1 dpi = 2.54 dpcm
1 dpcm ≈ 0.39dpi

• dpi: dots per inch; 1dpi ≈ 2.54dpcm
• dpcm: dots per centimeter; 1dpcm ≈ 0.39dpi
• dppx: dots per px unit; 1dppx ≈ 96dpi

References

• retina.js
• Resolution Units
• What Media Queries Can My Device See
• CSS Media Queries Implementation Report
• The real conflict behind <picture> and @srcset