WebP图片在响应式布局里兼容旧浏览器时为什么会重复加载？

IT人淑涵提问于 2026-02-14 08:31:27 阅读 46

优化

我在给网站做图片优化时，想用WebP格式结合响应式图片技术。按照教程写了picture标签，里面放了不同尺寸的webp和jpg版本，但发现旧浏览器同时加载了webp和jpg的图片，这样岂不是浪费流量？

尝试过这样写：<picture>里套两组<source media="(max-width:768px)" srcset="small.webp" type="image/webp">和<source srcset="small.jpg" type="image/jpeg">，但Chrome开发者工具的网络面板显示两种格式都被请求了。

后来改用JavaScript检测WebP支持再动态添加图片，但这样又失去了服务端协商的优势。有没有办法让浏览器只加载对应格式的响应式图片？

我来解答赞 3 收藏

反馈

1 条解答

夏侯正毅 Lv1

这个问题其实是浏览器对picture标签的解析机制导致的，改一下写法就行。关键是把media查询放到source标签外面，让浏览器先判断设备条件，再决定加载哪个格式。

给你一个正确的写法：

<picture>

  <source media="(max-width: 768px)" srcset="small.jpg" type="image/jpeg">

  <source media="(min-width: 769px)" srcset="large.jpg" type="image/jpeg">

  <source media="(max-width: 768px)" srcset="small.webp" type="image/webp">

  <source media="(min-width: 769px)" srcset="large.webp" type="image/webp">

  <img src="fallback.jpg" alt="描述文字">

</picture>

这样写的话，浏览器会先根据media判断尺寸，然后再根据type判断格式，只会请求一个最匹配的资源。注意要把jpg放在前面，webp放在后面，因为大部分现代浏览器都支持webp。

另外说个坑，别用JavaScript检测WebP支持，这玩意儿确实能解决问题但性能开销太大。而且你用picture标签就是为了省事，何必又绕回JS呢。记得给img标签加个兜底的src，防止所有source都不匹配时页面空白。

最后吐槽一句，兼容性这事真烦人，要不是为了照顾那些不肯升级系统的用户，谁愿意折腾这些啊。

2026-02-14 11:33