srcset 和 sizes 属性：Retina 设备会选择正确的双倍尺寸图像吗？答案

【问题标题】：srcset and sizes attribute: Will a retina device choose the correct double size image?srcset 和 sizes 属性：Retina 设备会选择正确的双倍尺寸图像吗？
【发布时间】：2017-12-14 23:44:18
【问题描述】：

很遗憾，我没有要测试的视网膜设备。这是我的代码：

<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">

普通屏幕总是按预期选择正确的图像（经过测试）。但是我想知道视网膜设备（分辨率为 1.5x 或 2x）是否会为主题选择正确的图像？

例如浏览器窗口中 1200 像素的视网膜屏幕应选择 1920w 图像，而不是 960w 图像。

【问题讨论】：

标签： html css retina-display srcset

【解决方案1】：

是的，它会的。它会根据您的图像宽度和屏幕尺寸进行计算，然后检查 dpi。

在你的例子中：

1440/1200 = 1.2

1920/1200 = 1.6

因此，如果屏幕尺寸为 1200 像素且非视网膜，它将选择第一个，因为它最接近 1（非视网膜）。如果是视网膜 1.5x 或 2x，它将选择第二个，因为 1.6 接近 2。

【讨论】：

因此，在具有高视网膜值的 Apple 设备上的带宽方面并没有真正的节省。您为 iphone 8 创建了一个 414 像素宽的图像，它会下载您为桌面创建的 1500 像素宽的图像。

【解决方案2】：

当您在图像标签中使用srcset 属性时，您可以在每个文件后添加相应的设备像素比（与文件名之间用空格分隔，后跟逗号），这将定义哪个图像适合哪个屏幕。所以这将是例如

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

（srcset 后面的常规src 属性被无法处理srcset 的浏览器使用）

【讨论】：

当然，但这并不是问题的真正答案。因为如果我像这样添加设备像素比，就不可能再添加宽度了。宽度为 480px 的屏幕应使用图像 2，宽度为 480px 的屏幕应使用图像 3。宽度为 960px 的屏幕应使用图像 3，分辨率为 960px 的屏幕应使用图像 4（假设视网膜为 2x）。跨度>
问题是浏览器是否理解这一点或如何解决它。