元素
元素
工具
博客
问答

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

FSD-小倩 阅读 36
优化

我最近把网站的图片全换成WebP格式了，体积小了很多，加载也快。但测试时发现IE和一些旧版安卓浏览器完全不显示图片，页面直接空白。有没有办法优雅降级？

我试过用picture标签配合source，但CSS里背景图就不好处理了。比如下面这段：

.hero-bg {
  background-image: url('banner.webp');
  background-size: cover;
}

这种写法在不支持WebP的浏览器里就挂了，总不能每个背景图都写两套吧？有啥靠谱的方案吗？

浏览器兼容
我来解答 赞 5 收藏
二维码
手机扫码查看
反馈
1 条解答
端木国红
端木国红 Lv1
啊这个问题我踩过坑，搞兼容性确实烦人但必须处理。WebP虽然香，但IE全家桶和安卓4.x这种老古董确实不支持，我们得分情况处理DOM图片和CSS背景图。

先说DOM图片，用确实是标准做法，但很多人不知道可以配合type属性做fallback：



  

   

  fallback


重点是最后的标签必须有，这是给不支持picture的浏览器的兜底方案。

至于CSS背景图这个确实麻烦点，我有三个方案可选：

1. 最土但最保险的办法 - 特性检测 + 两套CSS
先判断浏览器支不支持WebP，然后动态加载对应CSS。现代浏览器用WebP，老古董用JPEG/PNG：

function checkWebPSupport(callback) {

  var img = new Image();

  img.onload = function() {

    callback(true);

  };

  img.onerror = function() {

    callback(false);

  };

  img.src = 'data:image/webp;base64,UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA';

}



checkWebPSupport(function(isSupported) {

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

  link.rel = 'stylesheet';

  link.href = isSupported ? 'styles-webp.css' : 'styles-fallback.css';

  document.head.appendChild(link);

});


缺点是多一个请求，但兼容性最好。

2. 用CSS变量玩花样
如果你不怕写点hacky代码，可以这样：

.hero-bg {

  background-image: url('banner.jpg'); /* 默认用jpg */

  background-image: -webkit-image-set(

    url('banner.webp') 1x,

    url('banner.jpg') 1x

  ); /* 支持webp的会用这个 */

}


需要注意Safari有个坑，它对-webkit-image-set的支持比对WebP的支持还早，所以得配合JS检测。

3. 终极懒人方案 - 用CDN自动转换
如果你在用Cloudflare或类似服务，可以开启"Polish"功能自动转换格式。请求头带Accept: image/webp的给WebP，不带的给JPEG。

我个人推荐方案1，虽然要多维护一个CSS文件，但最稳当。方案2看起来美好但测试起来会想砸键盘，特别是碰到某些安卓机型的怪异行为。方案3依赖第三方，自己控制不了。

对了，如果你用webpack之类的构建工具，可以写个loader自动生成两套CSS，这样就不用手动维护了。
点赞 1
2026-03-08 19:11
相关推荐
元素
元素
工具
博客
问答
登录/注册