srcset - 响应式图像加载错误的文件

Question

我的目标是提供同一图像的不同版本（分辨率/大小），这应该占据视口宽度的100％，因此我可以为移动设备提供800px版本（或者通常是显示较小或更慢的设备）连接），1366px及以上更大的桌面显示器。

问题是我正在使用Chromium设备模拟器测试它，一些小屏幕设备加载1366px版本而不是800px：iPhone 6/7/8（375px宽度）加载800px图像，但iPad（768px） ，Nexus 5（360px）和iPhoneX（375px）全部加载1366px而不是加载800px。

我对正确理解尺寸指令不是很有信心，这是我的代码，默认的src引用2880px版本只是为了帮助测试：

<img class="img-fluid" 
    srcset="img/dreamstime_800w_109635242.jpg 800w,
         img/dreamstime_1366w_109635242.jpg 1366w,
         img/dreamstime_2880w_109635242.jpg 2880w"
    sizes="(max-width: 800px) 100vw,
        (max-width: 1366px) 100vw,                      
        2880px 100vw"
    src="img/dreamstime_2880w_109635242.jpg"/>

Answer 1

这与视网膜显示器（以及它们的DPI，我认为）有关。

据我所知，视网膜显示器将选择第一张图像，该图像是显示器宽度的两倍或三倍，具体取决于各自的视网膜显示（2x，3x等）。

另一个简单的解决方案是清除浏览器缓存。如果已经缓存了最大和最差的图像，Chrome（例如）将始终加载该图像。

Answer 2

你的sizes属性告诉浏览器图像总是显示全视口宽度，所以你可以简单地用sizes="100vw"替换它。

因此浏览器获取当前视口宽度，将其与屏幕密度相乘，并为其提供所需图像的宽度。然后它从srcset中的列表中获取最接近的图像。

你不能用它来“为移动设备提供800px版本”，因为现在大多数移动设备的密度都比桌面设备更大，你无法使用<img srcset… sizes…>阻止它。

如果你真的想忽略屏幕密度（出于什么原因？）和：

• 为小型设备提供最小的图像，
• 服务中型图像到中型设备
• 为大型设备提供大图像
• 保持最大的图像作为后备

然后你必须使用<picture>这样的媒体查询：

html
<picture>
  <source media="(max-width: 800px)" srcset="img/dreamstime_800w_109635242.jpg 800w">
  <source media="(max-width: 1366px)" srcset="img/dreamstime_1366w_109635242.jpg 1366w">
  <img src="img/dreamstime_2880w_109635242.jpg">
</picture>

Answer 3

对于未来的读者 - 我很难理解为什么srcset完全无视我的尝试。经过几个小时的挫折和愤怒，我通过世界上最明显的答案 - 我正在研究Retina Macbook Pro，我没有触发像素密度。

我改成了

<img class="<?= $image_class;?>" data-caption="<?php echo $image['alt']; ?>"
data-src="<?php echo $image['sizes']['medium']; ?>"
data-srcset="<?php echo $image['sizes']['medium']; ?> 600w 2x, 
<?php echo $image['sizes']['large']; ?> 1280w 2x"
sizes="(min-width: 150px) 600px, 100vw"
width="150" height="150"
alt="<?php echo $image['alt']; ?>">

并且一切正常 - 至少我可以找出正在发生的事情。唷。每个人都快乐圣诞节！

Answer 4

使用Chrome模拟器测试我的网页，我有时发现（就像你做的那样）显然正在加载大于必要的图像，特别是在小型移动设备上。我终于意识到这不是我的错误，但是如果碰巧有一个那么，Chrome会从缓存中提取更大的图像。单击模拟器中的复选框以在测试时禁用缓存，问题消失了，我希望看到加载的大小实际上已加载。