4

Unfortunatly I do not have a retina device to test. This is my code:

<img src="http://localhost/example/wp-content/themes/example/libs/lib_cis/libs/renderer.php?src=http://localhost/example/wp-content/uploads/2017/12/dummy-960x480-Dragonfly.jpg&amp;w=960&amp;h=480&amp;q=80&amp;zc=1" 
srcset="
http://localhost/example/wp-content/themes/example/libs/lib_cis/libs/renderer.php?src=http://localhost/example/wp-content/uploads/2017/12/dummy-960x480-Dragonfly.jpg&amp;w=240&amp;h=120&amp;q=80&amp;zc=1 240w,
http://localhost/example/wp-content/themes/example/libs/lib_cis/libs/renderer.php?src=http://localhost/example/wp-content/uploads/2017/12/dummy-960x480-Dragonfly.jpg&amp;w=480&amp;h=240&amp;q=80&amp;zc=1 480w,
http://localhost/example/wp-content/themes/example/libs/lib_cis/libs/renderer.php?src=http://localhost/example/wp-content/uploads/2017/12/dummy-960x480-Dragonfly.jpg&amp;w=960&amp;h=480&amp;q=80&amp;zc=1 960w,
http://localhost/example/wp-content/themes/example/libs/lib_cis/libs/renderer.php?src=http://localhost/example/wp-content/uploads/2017/12/dummy-960x480-Dragonfly.jpg&amp;w=1440&amp;h=720&amp;q=80&amp;zc=1 1440w,
http://localhost/example/wp-content/themes/example/libs/lib_cis/libs/renderer.php?src=http://localhost/example/wp-content/uploads/2017/12/dummy-960x480-Dragonfly.jpg&amp;w=1920&amp;h=960&amp;q=80&amp;zc=1 1920w" 
sizes="(min-width:960px) 960px,100vw" 
alt="Animal X">

Normal screens always choose the correct image as expected (tested). However I wonder if a retina device (with a resolution of 1.5x or 2x) will choose the correct image for theme?

e.g. A retina screen with 1200px in the Browser window should choose the 1920w image, not the 960w image.

Blackbam
  • 17,496
  • 26
  • 97
  • 150
  • You can test retina screens using Chrome dev tools by opening responsive view, clicking the menu dots, 'add device pixel ratio', and you will then be able to choose from 1x, 2x, 3x – 00-BBB Jun 24 '22 at 14:16

2 Answers2

9

Yes it will. It does calculation based on your image width and screen size and then checks with the dpi.

In your example:

1440/1200 = 1.2

1920/1200 = 1.6

So if the screensize is 1200px and non-retina it will choose the first as it's closest to 1 (non-retina). If it's retina 1.5x or 2x it will choose the second as 1.6 is close to 2.

Community
  • 1
  • 1
Ramon Dreise
  • 246
  • 1
  • 4
  • 2
    So no real savings to be had in terms of bandwidth on Apple devices with high retina values. You create an image of say 414px wide for iphone 8, and it downloads the 1500px wide image you created for desktop. – Y.K. May 18 '20 at 22:35
1

When you use a srcset attribute in your image tag, you can add the corresponding device pixel ratio after each file (seperated from the filename by a space and followed by a comma), which will define which image is suitable for which screen. So that would for example be

<img srcset="small_image.jpg 1x, medium_image.jpg 2x, large_image.jpg 3x" src="default_image.jpg" alt="whatever">

(the regular src attribute following srcset is used by browsers which can't handle srcset)

Johannes
  • 64,305
  • 18
  • 73
  • 130
  • 1
    Sure but this is not really an answer to the question. Because if I add the device Pixel Ratio like this, there is no possibility to add the width any more. A screen with 480px width should use image 2, a retina screen with 480px width should use image 3. A screen with 960px width should use image 3, a screen with 960px retina resolution should use image 4 (assuming retina is 2x). – Blackbam Jan 15 '18 at 13:17
  • The question is if Browsers understand this or how to solve it. – Blackbam Jan 15 '18 at 15:55
  • Is there any reason to use `srcset`+dpr at the same time as using `sizes`? – Kalnode Jun 23 '22 at 14:35