浏览器不支持WebP图片时，如何优雅地实现降级回退到JPEG？

程序员静欣提问于 2026-02-17 07:02:31 阅读 17

优化

最近在做图片格式优化时，把所有图片换成了WebP格式，结果发现低版本IE和某些移动端浏览器直接显示不出来。我试过用标签配合：


<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="fallback">
</picture>

但测试时发现IE11直接啥都不显示，而我期望的是至少能回退到JPEG。有没有更可靠的降级方案？或者需要额外加什么polyfill？

我来解答赞 5 收藏

反馈

1 条解答

莹雪 Lv1

试试这个，用 JavaScript 动态检测 WebP 支持情况，然后替换图片源。IE11 不支持标签，所以得靠脚本兜底。

document.addEventListener("DOMContentLoaded", function() {

  var img = document.createElement('img');

  img.src = 'data:image/webp;base64,UklGRiQAAABXRUJQVlA4IBgAAAAwAQCdASoBAAEAAAABAAEAAPv/';

  img.onload = function() {

    if (img.width === 2 && img.height === 1) {

      // 支持 WebP

      var images = document.querySelectorAll('img[data-webp]');

      images.forEach(function(el) {

        el.src = el.getAttribute('data-webp');

      });

    }

  };

  img.onerror = function() {

    // 不支持 WebP，什么都不用做，因为默认已经是 JPEG

  };

});

HTML 部分这么写：

<img src="image.jpg" data-webp="image.webp" alt="description">

这样兼容性会好很多，IE11 和其他不支持 WebP 的浏览器都能正常显示 JPEG。别忘了把 data-webp 属性换成你的 WebP 图片路径。

2026-02-17 07:03