WebP图片在旧版浏览器上不显示怎么办? 英洁🍀 提问于 2026-03-14 22:39:17 阅读 61 优化 我最近把网站的图片全换成WebP格式了,加载快了不少,但在一些老浏览器(比如Safari 13以下、IE)里直接显示空白。试过用picture标签加回退,但好像没生效,是不是写法有问题? 这是我的代码: <picture> <source srcset="image.webp" type="image/webp"> <img src="image.jpg" alt="示例图"> </picture> 我来解答 赞 7 收藏 分享 生成中... 手机扫码查看 复制链接 生成海报 反馈 发表解答 您需要先 登录/注册 才能发表解答 1 条解答 司马书娟 Lv1 你的代码写法没问题,picture标签的降级机制是正常的。 问题在于:很可能是浏览器缓存了你之前加载失败的空白结果。打开开发者工具的Network面板,勾选Disable cache,然后长按刷新按钮选"硬性重新加载",看看能不能显示。 如果还是不行,检查一下服务器是否正确返回了WebP的MIME类型(image/webp),没配好的话浏览器可能识别不了。 Safari 13以下确实不支持WebP,但只要img标签的jpg回退写对了就应该能显示,检查一下jpg路径对不对。 回复 点赞 2026-03-17 10:05 加载更多 相关推荐 1 回答 36 浏览 WebP图片在老浏览器上不显示怎么办? 我最近把网站的图片全换成WebP格式了,体积小了很多,加载也快。但测试时发现IE和一些旧版安卓浏览器完全不显示图片,页面直接空白。有没有办法优雅降级? 我试过用picture标签配合source,但C... FSD-小倩 优化 2026-03-08 19:07:18 2 回答 72 浏览 WebP图片在低版本浏览器不显示,picture标签回退没生效怎么办? 最近在项目里把所有图片换成WebP格式,测试时发现IE11和Edge旧版直接不显示图片。虽然知道这些浏览器不支持,但按照网上的方法写了picture标签:<picture><sour... W″浩然 优化 2026-01-28 09:05:26 1 回答 41 浏览 WebP图片在老浏览器上不显示怎么办? 我最近把项目里的图片都转成WebP格式了,体积确实小了很多,但在一些老版本的 Safari 和 IE 上完全不显示,页面直接裂图。我知道可以用 picture 标签做兼容,但不确定具体怎么写才稳妥。 ... 红芹 优化 2026-03-16 09:21:17 2 回答 65 浏览 Vue项目用了WebP图片但旧浏览器显示不出来怎么办? 最近在Vue项目里把图片都换成WebP格式了,发现Chrome显示正常,但测试IE11和部分安卓机完全看不到图片。我查了文档知道这些浏览器不支持WebP,试过用标签加srcset属性:<img ... Top丶娅廷 优化 2026-02-19 11:53:25 2 回答 49 浏览 WebP图片在Safari上不显示怎么办? 我最近把项目里的JPG和PNG都转成WebP格式了,体积小了很多,但在Safari上图片直接裂开不显示。查了下说Safari 14之前不支持WebP,但用户还在用老版本,这咋办? 试过用<pic... 仙仙 ☘︎ 优化 2026-03-30 21:55:14 1 回答 34 浏览 WebP图片在老浏览器上不显示怎么办? 我最近把网站的图片全换成WebP格式了,体积小了很多,加载快了不少。但测试时发现IE和一些老版本Safari完全不显示图片,页面直接裂图了。 我知道可以用<picture>标签做兼容,但不... IT人克样 优化 2026-03-24 23:08:20 1 回答 53 浏览 浏览器不支持WebP图片时,如何优雅地实现降级回退到JPEG? 最近在做图片格式优化时,把所有图片换成了WebP格式,结果发现低版本IE和某些移动端浏览器直接显示不出来。我试过用标签配合: <picture> <source srcset="im... 程序员静欣 优化 2026-02-17 07:02:31 2 回答 100 浏览 使用source标签时WebP回退JPEG在旧版浏览器显示空白怎么办? 我在用picture元素优化图片,用标签指向webp格式,然后的src放jpeg。但在IE和安卓4.4测试时图片显示空白,路径没问题,这是怎么回事啊? 代码结构是这样的: 检查过路径没问题,但旧版浏览... 若曦~ 优化 2026-01-28 12:58:26 2 回答 112 浏览 转换为WebP后图片显示空白怎么办? 我刚把项目里的JPG图片转成WebP格式,但页面上全显示空白了... 之前用的是普通标签,改成WebP路径后这样写的: <img src="logo.webp" alt="logo" width... 书生シ士俊 优化 2026-01-25 21:39:22 1 回答 49 浏览 WebP图片不兼容老浏览器,怎么优雅降级? 我最近把项目里的图片全换成WebP格式了,体积小了很多,但在一些老版本的 Safari 和 IE 上直接显示不了。试过用 Modernizr 检测,但感觉太重了。现在想在 React 里做个简单的 f... 树行酱~ 优化 2026-03-26 22:07:20
问题在于:很可能是浏览器缓存了你之前加载失败的空白结果。打开开发者工具的Network面板,勾选Disable cache,然后长按刷新按钮选"硬性重新加载",看看能不能显示。
如果还是不行,检查一下服务器是否正确返回了WebP的MIME类型(image/webp),没配好的话浏览器可能识别不了。
Safari 13以下确实不支持WebP,但只要img标签的jpg回退写对了就应该能显示,检查一下jpg路径对不对。