WebP兼容性问题全解析：哪些浏览器支持？旧浏览器怎么办？

核心关键词： WebP兼容性、浏览器支持、优雅降级、picture标签、WebP fallback

虽然WebP已经得到了主流浏览器的广泛支持，但仍有极少数旧浏览器（如IE）不支持。如果你的网站用户可能使用这些浏览器，就需要考虑兼容性问题。本文将全面解析WebP的兼容性，并提供优雅降级的解决方案。

一、哪些浏览器支持WebP？

截至2025年，支持WebP的浏览器包括：Google Chrome（所有版本）、Mozilla Firefox（65+）、Microsoft Edge（所有版本）、Safari（14+）、Opera（所有版本）、Android浏览器（所有版本）、iOS Safari（14+）。全球市场占有率超过95%。不支持的浏览器主要是Internet Explorer（所有版本）和旧版Safari（13及以下）。

二、使用picture标签实现优雅降级

如果你需要兼容IE用户，可以使用HTML5的picture标签。浏览器会优先加载source中的WebP图片，如果不支持WebP，则自动降级加载img中的JPEG/PNG图片。示例代码如下：

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

这种方法对所有用户都友好，WebP用户享受小体积快速加载，旧浏览器用户也能正常看到图片。

三、服务端根据Accept头返回不同格式

另一种方法是服务端判断。当浏览器请求图片时，会在Accept头中声明是否支持WebP（包含image/webp）。服务端根据这个信息返回WebP或JPEG。这种方法不需要修改HTML代码，但对服务端配置有要求。

四、CSS背景图片的兼容处理

对于CSS中的背景图片，可以使用@supports规则检测WebP支持：

.background {
  background-image: url('image.jpg');
}
@supports (background-image: url('image.webp')) {
  .background {
    background-image: url('image.webp');
  }
}