WebP 浏览器兼容性完整指南

WebP 浏览器支持现状（2024）

截至 2024 年，WebP 的全球浏览器支持率约为 97%，已经非常广泛。主要浏览器支持情况：Chrome（桌面和移动）从版本 23 开始完整支持；Firefox 从版本 65 开始支持（2019 年 1 月）；Safari 从 macOS 11 Big Sur（2020 年 11 月）和 iOS 14（2020 年 9 月）开始支持；Edge 自从切换到 Chromium 内核后完整支持；Opera 从版本 12.1 开始支持；Samsung Internet 从版本 4 开始支持。

不支持 WebP 的环境：IE（所有版本，已停止支持）；iOS 13 及更早版本的 Safari；macOS Catalina 及更早版本的 Safari；Android 4.4 以下的旧版 Android 浏览器。鉴于 iOS 14 发布已有数年，支持 iOS 14 之前的设备的比例已极低（约 3% 以下），大多数网站可以安全地使用 WebP 作为主要格式。

使用 picture 元素实现 WebP 回退

<!-- HTML5 picture 元素 WebP 回退 -->
<!-- HTML5 picture element WebP fallback -->
<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Description" loading="lazy">
</picture>

<!-- 带 AVIF 的三级回退 / Three-tier fallback with AVIF -->
<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Description">
</picture>

<!-- 透明图片 / Transparent image -->
<picture>
  <source srcset="icon.webp" type="image/webp">
  <img src="icon.png" alt="Icon">
</picture>

JavaScript 检测 WebP 支持

// 同步检测（不可靠，不推荐）
// Synchronous detection (unreliable, not recommended)

// 异步检测（推荐）/ Async detection (recommended)
function checkWebPSupport() {
  return new Promise((resolve) => {
    const img = new Image();
    img.onload = img.onerror = () => resolve(img.width === 1);
    img.src = 'data:image/webp;base64,UklGRiQAAABXRUJQVlA4IBgAAAAwAQCdASoBAAEAAUAmJYgCdAEO/gHOAAA=';
  });
}

// 使用示例 / Usage
checkWebPSupport().then(supported => {
  if (supported) {
    document.documentElement.classList.add('webp');
    console.log('WebP is supported!');
  } else {
    document.documentElement.classList.add('no-webp');
    console.log('WebP is not supported, using fallback.');
  }
});

// CSS 中使用特性类 / Use feature class in CSS
// .webp .hero { background-image: url('hero.webp'); }
// .no-webp .hero { background-image: url('hero.jpg'); }

服务器端 WebP 内容协商

另一种处理 WebP 兼容性的方法是在服务器端根据请求的 Accept 头部返回合适的格式。当浏览器支持 WebP 时，它会在 Accept 头中包含 "image/webp"，服务器可以检测到这一点并返回 WebP 版本。这种方法的优势是不需要修改 HTML，所有的格式选择逻辑都在服务器端处理。

# Nginx 配置 WebP 服务 / Nginx WebP serving config
map $http_accept $webp_suffix {
  default "";
  "~*webp" ".webp";
}

location ~* \.(png|jpg|jpeg)$ {
  add_header Vary Accept;
  # 如果 WebP 版本存在且浏览器支持则提供
  try_files $uri$webp_suffix $uri =404;
}

# Apache .htaccess
RewriteEngine On
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_FILENAME}.webp -f
RewriteRule (.+)\.(png|jpg)$ $1.$2.webp [T=image/webp,L]
Header append Vary Accept

移动端 WebP 支持

在移动端，WebP 的收益尤为显著。移动网络通常比固定宽带慢，而移动用户对加载速度更敏感。Android 浏览器从 Android 4.4 起支持 WebP；iOS Safari 从 iOS 14 起支持（覆盖约 97% 的活跃 iOS 设备）；微信内置浏览器（在中国使用广泛）较早就支持 WebP；企业微信、钉钉等 APP 内置浏览器也普遍支持 WebP。

对于面向中国市场的网站，需要额外注意：微信内置浏览器对 picture 元素的支持在早期版本中有些问题，但在新版本（7.0+）中已经修复。如果你的用户中有大量微信内浏览用户，建议同时测试 WebP 图片在微信中的显示效果。

CDN 和图像服务的 WebP 自动转换

主流 CDN 和图像处理服务提供 WebP 自动转换功能，让你无需手动维护两套图片。Cloudflare（Polish 功能）会自动将图片转换为 WebP 并缓存；Cloudinary 通过 URL 参数 f_auto 自动为支持的浏览器提供 WebP；Imgix 通过 auto=format 参数实现同样功能；AWS CloudFront + Lambda@Edge 可以实现自定义的 WebP 转换逻辑。

是否应该现在开始使用 WebP

对于新建网站：是的，应该现在就使用 WebP 作为主要图片格式，配合 picture 元素的 JPG/PNG 回退。对于现有网站的迁移：如果你的用户群体中使用旧版 Safari（iOS 13 及以下）的比例可以忽略不计，强烈建议迁移到 WebP。可以从对网站影响最大的大图（英雄图、产品主图）开始迁移，逐步扩展到所有图片。迁移工作可以通过构建工具自动化，或者使用 CDN 的自动格式转换功能，无需手动转换每张图片。