Search code examples
imageresponsive-designretina-displaysrcsetpixel-ratio

What resolutions should I include in a srcset attribute?

What resolutions does it make sense to include in the srcset attribute? MediaWiki uses 1.5x and 2x. Are there e.g. any devices that would make use of 3x?

edit: The answer to the last question seems to be “yes”.

edit October 2015: To cater for most devices with as few image versions as possible, 1.5x, 2x and 3x seem to be the way to go

edit June 2023: 1.5x, 2x and 3x still seems reasonable. The device list in the accepted answer has been updated

Solution

  • Here is an incomplete list of some devices and ratios:

    
1.3x

    Google Nexus 7

1.5x

    Google Nexus S
    Samsung Galaxy S II
    HTC Desire
    HTC Incredible S
    HTC Velocity
    HTC Sensation
    Nokia Lumia 900

2x

    iPhone 4
    iPhone 4S
    iPhone 5
    iPhone 6
    iPhone 7
    iPad (3rd generation)
    iPad 4
    All Retina displays Mac
    Google Galaxy Nexus
    Google Nexus 4
    Google Nexus 10
    Nokia Lumia 920
    Nokia Lumia 925
    Samsung Galaxy S III
    Samsung Galaxy Note II
    Sony Xperia S
    HTC One X

2.6x
    Nokia Lumia 930

3x
    Xperia Z
    Xiaomi 2
    Galaxy Note
    HTC One (M7)
    HTC Butterfly
    Samsung Galaxy S IV

    Here is an answer from the spec:

    The srcset attribute is used with the src attribute, which gives the URL of the image to use for legacy user agents that do not support the srcset attribute. This leads to a question of which image to provide in the src attribute.

    The answer that results in the least duplication is to provide the image suitable for an infinite width and infinite height viewport with a pixel density of 1 CSS pixel per device pixel.

    References