htmlcssgoogle-chromeresponsive-designpixel-ratio

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


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?


Solution

  • 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
    

    References