0

I want to use srcset to provide 2x images for iPhone and iPad, but the 2x descriptor applies to both and the images should be different.

On both devices the image is full width. But on iPhone 2x of 320w is 640w and on iPad Pro 2x of 1024 is 2048w.

How could I differentiate between the two?

gabdara
  • 486
  • 3
  • 10

1 Answers1

1

The x descriptor is more suited to images which width is fixed across viewports.

For variable width images, you should use the w descriptor.

For example:

<img
  src="image320.jpg"
  srcset="image320.jpg 320w, image640.jpg 640w, image960.jpg 960vw, image1280.jpg 1280vw, image1600.jpg 1600vw, image1920.jpg 1920vw, image2240.jpg 2240vw, image2560.jpg 2560vw"
  sizes="100vw">

The w descriptor applies the screen density factor to the CSS width of the image to get the actual image width to download.

The image1920.jpg image will be downloaded by the browser for several configurations:

  • screen density 1 with viewport width equal to or below 1920px
  • screen density 2 with viewport width equal to or below 960px
  • screen density 3 with viewport width equal to or below 640px
  • etc.
Nicolas Hoizey
  • 1,954
  • 1
  • 17
  • 24