WebP图片在旧版浏览器上不显示怎么办?

英洁🍀 阅读 61

我最近把网站的图片全换成WebP格式了,加载快了不少,但在一些老浏览器(比如Safari 13以下、IE)里直接显示空白。试过用picture标签加回退,但好像没生效,是不是写法有问题?

这是我的代码:

<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="示例图">
</picture>
我来解答 赞 7 收藏
二维码
手机扫码查看
1 条解答
司马书娟
你的代码写法没问题,picture标签的降级机制是正常的。

问题在于:很可能是浏览器缓存了你之前加载失败的空白结果。打开开发者工具的Network面板,勾选Disable cache,然后长按刷新按钮选"硬性重新加载",看看能不能显示。

如果还是不行,检查一下服务器是否正确返回了WebP的MIME类型(image/webp),没配好的话浏览器可能识别不了。

Safari 13以下确实不支持WebP,但只要img标签的jpg回退写对了就应该能显示,检查一下jpg路径对不对。
点赞
2026-03-17 10:05