我正在玩HTML5 <picture>标签，我试图了解它是如何工作的。
- 到目前为止我得到了什么：**
我创建了下面的小片段：
<picture>
<source srcset="https://placehold.co/360/webp 360w, https://placehold.co/768/webp 768w, https://placehold.co/1280/webp 1280w, https://placehold.co/2560/webp 2560w" type="image/webp" sizes="(max-width: 360px) 360px, (max-width: 768px) 768px, (max-width: 1280px) 1280px, (max-width: 2560px) 2560px">
<img src="https://placehold.co/150/webp" alt="this is a fallback">
</picture>据我所知，它应该从placehold.co中加载给定大小的最佳拟合（源比图像更重要，因为它是后备）图像源。
- 什么不起作用**
- 源随视口而更改，但其行为不符合预期。这些变化似乎是随意发生的。
- 例如，我想象picture-element在
<360px的viewport宽度上加载分辨率为360px的图像，但它加载的是768px变体。当我把它变大时，它会直接加载2560px，而不会先加载更小的变体，当我调整视口大小时，它永远不会回到加载更小的图像大小。我在这里阅读了this mdn article，但是我没有得到我的用例所期望的结果。 - 问题：**
<picture>元素的不同视口的加载逻辑是如何工作的？
- 目前，我无法理解不同大小背后的加载逻辑。
- 我可以强制执行大小或至少获得更多的控制？我的意思是对于
360px的屏幕，我可能想加载一个适合<360px的小图像，而不是被迫加载768px甚至更大的图像。 - 然而，我确实理解为什么拥有源集和不同的图像变体是有益的。这不是问题所在**
1条答案
按热度按时间xeufq47z1#
在 Chrome Version 114.0.5735.106（Official Build）（x86_64） 和 Firefox 113.0.2（64-bit） 中测试了您的代码片段。
看起来像预期的那样-高达360 px的视口获得360 px的图像，361 px以上的视口获得720 px的图像，等等。当高分辨率图像飞出视口时，很难看到分辨率标签。
创意
一些事情可能会对你看到的问题有所启发：
缩小视口时图像不变：您的浏览器可能会缓存768 px图像。当你缩小视口时，它不会切换到较小的那个，因为这里已经有一个较大的了。（Chris Coyer在这里提到了这一点，Kevin Powell特别提到了Chrome中的缓存here）
断点的行为与指定的断点不同：您可能需要检查您使用的屏幕的 DPR（设备像素比率）。你也可以在你的开发工具中设置它。DPR 也是浏览器选择下载什么图像的一个因素，在这里的规范中提到：
picture元素是一个容器，它为它所包含的img元素提供多个源，以允许作者基于屏幕像素密度、视口大小、图像格式和其他因素，以声明方式控制或给予用户代理使用哪个图像资源。
（强调我的）
半相关侧
顺便说一句，你似乎也可以在你的特定情况下删除整个
sizes属性，因为你基本上是为每个视口设置一个100vw的大小。100vw是浏览器在没有给出sizes属性时的默认值。（无法在规格中找到明确说明，但这里是Kevin Powell talking about it in a video）这很奇怪，因为MDN states：
注意：如果srcset属性使用了width描述符，则sizes属性也必须存在，否则srcset本身将被忽略。
至少在上面提到的两种浏览器上似乎都不是这样。通过阅读这个主题，我认为规范在用户代理如何实现通过网络实际获取哪个图像的决定方面提供了相当大的自由度。
下面是没有
sizes属性的代码：（我添加了max-width: 100%; height: auto，以便分辨率标签保持清晰）