Chrome中<picture>标签图片加载异常问题及适配需求求助

一、为什么没加sizes时，视口1200px却加载了img_350.jpg？ #

这事儿得从浏览器的默认逻辑说起——当你不给<img>加sizes属性时，浏览器会默认把图片的显示宽度当成整个视口的宽度（也就是100vw）。

你虽然实际把图片放在180px宽的容器里，但浏览器不知道这个布局规则啊！它只会按1200px的视口宽度来计算需要的图片分辨率，然后在srcset里找最匹配甚至更大的资源。img_350.jpg的350w比180w更接近1200w的需求，所以就直接加载了350w的图。

二、加了sizes后，为什么Chrome同时加载了两张图？ #

这其实是Chrome的预加载预判机制在作祟。它会猜测你可能很快就要调整窗口大小（比如把桌面窗口拉窄到移动端尺寸），所以提前把备选的图片资源也加载了，方便后续快速切换。但这并不是你的代码写错了，只是浏览器的“贴心”操作不符合你的预期。

三、实现需求的最优方案：视口>576px加载180w，≤576px加载350w #

想要让浏览器严格按规则加载单张图，避开预加载的干扰，用<picture>结合带媒体查询的<source>标签是更稳妥的方式，逻辑也更直观。

基础实现（jpg格式） #

<picture>
  <!-- 视口宽度≥576px时，选用180w的图片 -->
  <source media="(min-width: 576px)" srcset="img_180.jpg 180w">
  <!-- 其他情况（视口<576px），选用350w的图片 -->
  <source srcset="img_350.jpg 350w">
  <!-- 不支持picture标签的老旧浏览器降级方案 -->
  <img src="img_180.jpg" alt="">
</picture>

支持webp格式的版本 #

如果你需要兼容webp格式，只需要在对应场景下添加webp的<source>即可：

<picture>
  <!-- 视口>576px的webp资源 -->
  <source media="(min-width: 576px)" srcset="img_180.webp 180w" type="image/webp">
  <!-- 视口≤576px的webp资源 -->
  <source srcset="img_350.webp 350w" type="image/webp">
  <!-- 视口>576px的jpg降级资源 -->
  <source media="(min-width: 576px)" srcset="img_180.jpg 180w">
  <!-- 视口≤576px的jpg降级资源 -->
  <source srcset="img_350.jpg 350w">
  <!-- 最终降级方案 -->
  <img src="img_180.jpg" alt="">
</picture>

这种写法的好处是，浏览器会先匹配媒体查询条件，再选择对应的图片资源，只会加载符合当前场景的那一张图，完全满足你的需求。

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