WebP图片在老浏览器上不显示怎么办？
我最近把网站的图片全换成WebP格式了，体积小了很多，加载快了不少。但测试时发现IE和一些老版本Safari完全不显示图片，页面直接裂图了。
我知道可以用<picture>标签做兼容，但不确定具体怎么写才稳妥。比如下面这样写对吗？会不会有遗漏的兼容情况？
<picture>
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="fallback">
</picture>- 1
回答
44浏览
WebP图片在老浏览器上不显示怎么办？
我最近把网站的图片全换成WebP格式了，体积小了很多，加载也快。但测试时发现IE和一些旧版安卓浏览器完全不显示图片，页面直接空白。有没有办法优雅降级？ 我试过用picture标签配合source，但C...
- 2
回答
76浏览
WebP图片在低版本浏览器不显示，picture标签回退没生效怎么办？
最近在项目里把所有图片换成WebP格式，测试时发现IE11和Edge旧版直接不显示图片。虽然知道这些浏览器不支持，但按照网上的方法写了picture标签：<picture><sour...
- 1
回答
51浏览
WebP图片在老浏览器上不显示怎么办？
我最近把项目里的图片都转成WebP格式了，体积确实小了很多，但在一些老版本的 Safari 和 IE 上完全不显示，页面直接裂图。我知道可以用 picture 标签做兼容，但不确定具体怎么写才稳妥。 ...
- 1
回答
71浏览
WebP图片在旧版浏览器上不显示怎么办？
我最近把网站的图片全换成WebP格式了，加载快了不少，但在一些老浏览器（比如Safari 13以下、IE）里直接显示空白。试过用picture标签加回退，但好像没生效，是不是写法有问题？ 这是我的代码...
- 2
回答
70浏览
Vue项目用了WebP图片但旧浏览器显示不出来怎么办？
最近在Vue项目里把图片都换成WebP格式了，发现Chrome显示正常，但测试IE11和部分安卓机完全看不到图片。我查了文档知道这些浏览器不支持WebP，试过用标签加srcset属性：<img ...
- 2
回答
68浏览
WebP图片在Safari上不显示怎么办？
我最近把项目里的JPG和PNG都转成WebP格式了，体积小了很多，但在Safari上图片直接裂开不显示。查了下说Safari 14之前不支持WebP，但用户还在用老版本，这咋办？ 试过用<pic...
- 1
回答
60浏览
浏览器不支持WebP图片时，如何优雅地实现降级回退到JPEG？
最近在做图片格式优化时，把所有图片换成了WebP格式，结果发现低版本IE和某些移动端浏览器直接显示不出来。我试过用标签配合： <picture> <source srcset="im...
- 2
回答
115浏览
转换为WebP后图片显示空白怎么办？
我刚把项目里的JPG图片转成WebP格式，但页面上全显示空白了... 之前用的是普通标签，改成WebP路径后这样写的： <img src="logo.webp" alt="logo" width...
- 1
回答
60浏览
WebP图片不兼容老浏览器，怎么优雅降级？
我最近把项目里的图片全换成WebP格式了，体积小了很多，但在一些老版本的 Safari 和 IE 上直接显示不了。试过用 Modernizr 检测，但感觉太重了。现在想在 React 里做个简单的 f...
- 2
回答
103浏览
为什么我的Vue项目中使用WebP图片在某些浏览器显示异常？
我在Vue项目里尝试用WebP格式优化图片资源，用标签直接引入.webp文件。在Chrome/Firefox都能正常显示，但测试时发现IE11和旧版Safari（比如14.1）显示空白。我检查过文件路...
<picture>标签的用法基本上是对的，但为了确保所有老浏览器都能正确显示图片，可以稍微优化一下，加个type属性在<img>标签里虽然不太常见，但加上也无妨，作为冗余处理。不过主要还是要确保默认的<img>标签里的src指向一个广泛兼容的格式，比如JPEG或者PNG。你可以这样写：
这样即使某些极端老旧的浏览器不识别
<picture>和<source>标签，至少还能通过<img>标签正常显示图片。记得测试一下在各种浏览器上的效果，确保万无一失。