WebP图片回退时旧浏览器显示空白怎么办？

司徒奕卓提问于 2026-02-03 23:05:32 阅读 24

优化

我在项目里用picture标签做WebP回退，代码写成这样：


<picture>
  <source srcset="logo.webp" type="image/webp">
  <img src="logo.png" alt="logo" />
</picture>

但测试时发现IE11和Android 4.4设备直接显示空白，明明回退的PNG是存在的。我之前还试过把标签放在外面，结果变成两个图片重叠了。有没有更好的兼容方案？

我来解答赞 4 收藏

反馈

1 条解答

Good“春明 Lv1

这问题很常见，咱们来一步步排查。

首先标签在 IE11 和 Android 4.4 上确实支持不好，尤其是 Android 4.4 的 WebView 基本不认这标签。这时候 fallback 的按理说应该显示，但你遇到的是空白，说明浏览器压根没加载，可能是阻断了加载。

解决方法有几个方向：

### 1. 用 JS 判断 WebP 支持，动态加载合适格式

function supportsWebp() {

  return new Promise(resolve => {

    const img = new Image();

    img.onload = () => resolve(img.width === 1);

    img.onerror = () => resolve(false);

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

  });

}



supportsWebp().then(supported => {

  const logo = document.getElementById('logo-img');

  logo.src = supported ? 'logo.webp' : 'logo.png';

});

HTML：

<img id="logo-img" src="logo.png" alt="logo" />

### 2. 后端检测 User-Agent，返回合适格式（适合服务器配置）
如果你能控制服务器，可以加个中间层根据 UA 返回对应图片格式。

### 3. 用 CSS 实现 fallback（不推荐，控制力弱）

<div class="img-wrapper">

  <img src="logo.png" class="fallback" alt="logo" />

  <img src="logo.webp" class="webp" alt="logo" />

</div>

CSS：

.webp {

  display: none;

}



/* WebP 支持的浏览器中显示 WebP 图 */

@supports (background-image: url('data:image/webp;base64,UklGRiQAAABXRUJQVlA4IBgAAAAwAQCdASoBAAADAA==')) {

  .webp {

    display: block;

  }

  .fallback {

    display: none;

  }

}

建议优先用第一种 JS 判断方案，兼容性最好，维护也简单。我以前也踩过这坑，IE 和老安卓真不是省油的灯，用 JS fallback 最靠谱。

2026-02-03 23:11