WebP图片在老浏览器上不显示怎么办？

红芹提问于 2026-03-16 09:21:17 阅读 5

优化

我最近把项目里的图片都转成WebP格式了，体积确实小了很多，但在一些老版本的 Safari 和 IE 上完全不显示，页面直接裂图。我知道可以用 picture 标签做兼容，但不确定具体怎么写才稳妥。

试过这样写：

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

但还是担心有没有遗漏的兼容场景，或者有没有更简洁的方案？比如能不能用 CSS 或 JS 自动检测支持再切换？

我来解答赞 4 收藏

反馈

1 条解答

UE丶蒙蒙 Lv1

你的picture标签写法是对的，基本能覆盖主流浏览器。不过确实有几个坑要注意，我帮你梳理一下。

picture标签的工作逻辑

浏览器会从上往下依次检查source标签的type属性，如果支持就加载对应的图片，跳过后面的。如果不支持或者没有picture标签，就加载img标签的src。所以你的写法逻辑是对的。

但有个关键遗漏：IE浏览器

IE完全不支持picture标签，它会直接忽略所有source标签，只显示img的fallback。这意味着IE用户会看到jpg图片，虽然能显示，但picture标签本身在IE里是无效的。如果你需要兼容IE，这没问题——IE会正确显示jpg fallback。但如果你想彻底不管IE了（现在主流项目基本都不管了），那你的写法已经够用。

真正需要注意的是这两点

第一，img标签的alt属性必须保留，你的写法有了，这个没问题。

第二，建议加上width和height属性避免页面抖动：

<picture>

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

  <img src="image.jpg" alt="fallback" width="800" height="600">

</picture>

如果想用JS自动检测

有些场景不能用picture标签，比如动态生成的图片或者CSS背景图，这时候可以JS检测：

// 检测WebP支持情况

function checkWebPSupport(callback) {

  var img = new Image();

  img.onload = function() {

    callback(true);

  };

  img.onerror = function() {

    callback(false);

  };

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

}



// 使用示例：处理CSS背景图

checkWebPSupport(function(supported) {

  if (supported) {

    document.body.classList.add('webp-supported');

  } else {

    document.body.classList.add('webp-not-supported');

  }

});

然后CSS里这样写：

/* 默认加载jpg */

.box {

  background-image: url('image.jpg');

}



/* 支持WebP的浏览器加载WebP */

.webp-supported .box {

  background-image: url('image.webp');

}

关于Modernizr

如果你项目里已经用了Modernizr，直接用它的webp类名就行，不用自己写检测函数。它会自动在html标签上加webp或no-webp类。

总结一下

你的picture标签写法已经覆盖了大部分场景 Safari 14以下、Chrome 26以下、Firefox 65以下这些老版本都会正确回退到jpg。如果你的项目不需要管IE，这个写法完全够用。唯一建议就是补上width和height属性防止页面跳动。

如果需要处理CSS背景图或者动态图片，再用JS检测方案。

2026-03-17 05:01