如何同时实现WebP格式兼容与响应式图片适配？

嘿，这个问题我之前踩过坑！你的思路完全没问题，但<picture>标签的资源匹配逻辑是从上到下遍历，找到第一个符合条件的就停止，所以你原来的写法里，不管浏览器支不支持WebP，只要屏幕尺寸匹配第一个source（比如小屏匹配第一个small.webp），就直接用它了，后面的JPG源根本不会被考虑到。

调整一下写法就能解决问题，核心是先按图片格式分组，再在每组内按屏幕尺寸区分：

<picture>
  <!-- 第一组：支持WebP的浏览器优先匹配这里的资源 -->
  <source media="(max-width: 799px)" srcset="small.webp" type="image/webp">
  <source media="(min-width: 800px)" srcset="big.webp" type="image/webp">
  
  <!-- 第二组：不支持WebP的浏览器会跳过上面的源，匹配这里的JPG -->
  <source media="(max-width: 799px)" srcset="small.jpg" type="image/jpeg">
  <source media="(min-width: 800px)" srcset="big.jpg" type="image/jpeg">
  
  <!-- 兜底：完全不支持picture标签的老浏览器会直接加载这个img -->
  <img src="big.jpg" alt="something">
</picture>

为什么这样写能生效： #

• 浏览器首先会检查每个<source>的type属性，如果它不支持image/webp，就会直接跳过所有带这个type的源；
• 当进入JPG组时，同样会根据当前屏幕尺寸匹配对应的源；
• 最后的<img>是必须的，作为所有情况的兜底，确保任何浏览器都能显示图片。

另外补充个小技巧：如果你的响应式图片是按像素密度（比如1x、2x）来区分的，还可以在srcset里用逗号分隔多个资源，比如srcset="small.webp 1x, small@2x.webp 2x"，这样能同时兼顾屏幕尺寸和像素密度，不过按你当前的需求，上面的写法就完全够用啦。

内容的提问来源于stack exchange，提问作者Ashkan Mobayen Khiabani