元素
元素
工具
博客
问答

WebP图片在低版本浏览器不显示，picture标签回退没生效怎么办？

W″浩然 阅读 30
优化

最近在项目里把所有图片换成WebP格式，测试时发现IE11和Edge旧版直接不显示图片。虽然知道这些浏览器不支持，但按照网上的方法写了picture标签：<picture><source srcset="img.webp" type="image/webp"><img src="img.jpg"></picture>，结果还是没显示回退的jpg，这是哪里出问题了？

试过用CanIuse检查过，确实IE不支持WebP。也确认过文件路径没问题，但直接访问jpg地址能打开。难道是标签结构有问题吗？或者需要额外加type属性？

我来解答 赞 11 收藏
二维码
手机扫码查看
反馈
1 条解答
Mc.梓宸
Mc.梓宸 Lv1
标签理论上是可以实现回退的，但从你的描述来看，可能有几个地方需要注意：

1. **确保HTML结构正确**：你的写法本身没错，但有时候空格、大小写等问题可能会导致浏览器解析出错。建议严格按照标准写：
<picture>

    <source srcset="img.webp" type="image/webp">

    <img src="img.jpg" alt="fallback image">

</picture>


2. **检查MIME类型**：服务器返回的WebP文件必须有正确的Content-Type头（image/webp），而JPG也得是image/jpeg。如果MIME类型不对，某些浏览器会直接忽略图片。可以通过浏览器开发者工具的Network面板检查。

3. **注意安全**：如果你用的是CDN或者跨域资源，确保CORS配置正确，不然IE和旧版Edge可能会因为安全限制无法加载回退图片。

4. **测试环境问题**：有时候本地测试环境可能会缓存图片或有其他干扰因素。清一下浏览器缓存再试试。

如果还是不行，可以考虑用JavaScript做动态检测和替换作为最后的兜底方案：
function supportsWebp() {

    return new Promise((resolve) => {

        const elem = document.createElement('canvas');

        resolve(elem && elem.toDataURL('image/webp').indexOf('data:image/webp') === 0);

    });

}



supportsWebp().then(supported => {

    if (!supported) {

        document.querySelectorAll('picture img').forEach(img => {

            img.src = img.src.replace('.webp', '.jpg');

        });

    }

});


总之先按上面的步骤排查，大多数情况下都能解决。
点赞 9
2026-01-29 18:05
相关推荐
元素
元素
工具
博客
问答
登录/注册