<picture>标签中<source>标签失效，仅加载最后<img>标签问题求助

解决标签优先加载而非WebP资源的问题 #

嘿，我来帮你搞定这个WebP图片加载的问题！你的代码框架没问题，但有几个细节可能导致浏览器跳过<source>标签直接加载PNG，咱们一步步排查：

1. 修正标签的属性写法 #

你当前的<img>用了srcset，但对于<picture>的降级 fallback 场景，咱们应该用src属性而非srcset。srcset主要用于响应式多尺寸图片，当你只指定单个资源时，浏览器可能会优先处理这个srcset规则，反而忽略了<source>的优先级。把代码改成这样：

<picture>
  <source srcset="img/index-bg.webp" type="image/webp">
  <img src="img/index-bg.png" alt="test">
</picture>

2. 检查WebP图片的服务器响应头 #

即使你能在开发者工具里看到WebP资源，如果服务器返回的Content-Type头不是image/webp，浏览器会判定这不是有效的WebP文件，自动降级加载PNG。

• 打开Chrome开发者工具的Network面板
• 刷新页面，找到index-bg.webp资源
• 查看它的Response Headers，确认Content-Type的值是image/webp
  如果不对，需要配置服务器为WebP文件设置正确的MIME类型。比如Nginx可以添加这条配置：

types {
  image/webp webp;
}

3. 清除浏览器缓存 #

有时候浏览器会缓存之前加载的PNG资源，哪怕你修改了代码，它还是会优先调用缓存文件。试试强制刷新页面：

• Windows/Linux：按Ctrl + Shift + R
• Mac：按Cmd + Shift + R

4. 验证浏览器的WebP支持性 #

虽然主流浏览器都支持WebP，但如果你的测试环境是旧版Safari（14.0之前）或者小众浏览器，它们本身不支持WebP格式，此时加载PNG是正常的降级行为。如果是Chrome/Firefox这类现代浏览器，这条可以忽略。

5. 排查代码干扰 #

快速检查页面里有没有JavaScript动态修改了<img>的src属性，或者CSS设置了隐藏<source>相关的规则——不过从你的描述来看，这个可能性比较小，但也可以快速确认下。

按照上面的步骤调整后，支持WebP的浏览器应该就能优先加载WebP资源了！

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