使用Bootstrap时HTML picture元素始终加载srcset首条资源如何解决

核心错误：sizes属性规则顺序错误 #

sizes属性的匹配逻辑是从左到右依次校验媒体查询，第一个匹配成功的规则会直接生效，后续规则全部忽略。
你的代码中将无媒体查询绑定的默认值600px放在了sizes的最开头，没有任何前置判断条件，所以无论视口宽度是多少，浏览器都会判定该图片的渲染宽度为600px，因此会优先选择srcset中刚好能覆盖600px宽度的最小资源，也就是你看到的600px的webp文件。

修正方法 #

调整sizes属性的规则顺序，将带min-width的规则按「从大到小」的顺序排列，最后放置默认值：

<picture>
  <source type="image/webp" 
  srcset="images/emily-600px.webp 600w, images/emily-550px.webp 550w, images/emily-460px.webp 460w, images/emily-340px.webp 340w,images/emily-250px.webp 250w" 
  sizes="(min-width: 75rem) 550px, (min-width: 62rem) 460px, (min-width: 48rem) 340px, (min-width: 36rem) 250px, 600px">
  <source type="image/jpeg" 
  srcset="images/emily-600px.jpeg 600w, images/emily-550px.jpeg 550w, images/emily-460px.jpeg 460w, images/emily-340px.jpeg 340w,images/emily-250px.jpeg 250w" 
  sizes="(min-width: 75rem) 550px, (min-width: 62rem) 460px, (min-width: 48rem) 340px, (min-width: 36rem) 250px, 600px">
  <img src="images/emily.jpg" class="img-fluid" alt="EMILY .....">
</picture>

额外注意事项 #

• 测试时请开启Chrome开发者工具的「禁用缓存」选项，或使用无痕模式测试：浏览器默认会优先使用已经加载过的更大体积的图片，不会因为窗口缩小就自动重新加载更小的资源，避免缓存干扰测试结果。
• 如果你使用Bootstrap的.img-fluid让图片自适应容器宽度，也可以根据实际布局将sizes的默认值调整为对应视口比例，比如图片占满容器宽度时可设置为100vw，适配更灵活的响应式场景。

内容的提问来源于stack exchange，提问作者agodoo