What resolutions should I include in a srcset attribute?

StackOverflow https://stackoverflow.com/questions/21183068

Question

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

Was it helpful?

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

2x

    iPhone 4
    iPhone 4S
    iPhone 5
    iPhone 6
    iPad (3rd generation)
    iPad 4
    All Retina displays Mac
    Google Galaxy Nexus
    Google Nexus 4
    Google Nexus 10
    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

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

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top