你的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>

这与视网膜显示器有关（我认为还有它们的DPI）。
据我所知，视网膜显示器将选择第一幅图像，这是其显示器宽度的两倍或三倍，这取决于其各自的视网膜显示器（2x，3x等）。
另一个简单的解决方案是清除浏览器缓存。如果你的最大和最坏的图像已经被缓存，Chrome（例如）将始终加载该图像。

对于未来的读者-我很难理解为什么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']; ?>">

一切都很顺利--至少我能弄清楚发生了什么事。嗨。大家圣诞快乐！

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

我注意到，当chrome devTools打开并启用响应模式时，我的设备像素比例从1变为2。因此，即使在“网络”选项卡中禁用了缓存，在我看来浏览器加载的文件比必要的要大，但这是因为像素比发生了变化时：

1. devTools已打开
   1.已启用响应模式
   你可以用一个简单的JavaScript重复检查在任何给定时间的像素比率：
   <script>alert(window.devicePixelRatio)</script>
   如果您尝试以多个宽度加载页面进行测试，您可能启用了响应模式，但这也可能改变像素密度。因此，它可能只是工作的预期，就像它是为我。

简单回答：

sizes="(max-width: 999px) 50vw, 100vw"