WebP Browser Support: Complete Guide

WebP Browser Support Status (2024)

As of 2024, global WebP browser support rate is approximately 97% — very widespread. Major browser support: Chrome (desktop and mobile) has full support from version 23; Firefox has supported since version 65 (January 2019); Safari has supported since macOS 11 Big Sur (November 2020) and iOS 14 (September 2020); Edge has full support since switching to Chromium; Opera has supported since version 12.1; Samsung Internet has supported since version 4.

Environments that don't support WebP: IE (all versions, support has ended); Safari on iOS 13 and earlier; Safari on macOS Catalina and earlier; old Android Browser below Android 4.4. Given that iOS 14 was released years ago, the proportion of devices not supporting iOS 14 is now very low (under about 3%), and most websites can safely use WebP as the primary format.

WebP Fallback Using the picture Element

<!-- 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>

Detecting WebP Support with JavaScript

// 同步检测（不可靠，不推荐）
// 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'); }

Server-Side WebP Content Negotiation

Another approach to WebP compatibility is server-side content negotiation — returning the appropriate format based on the request's Accept header. When browsers support WebP, they include "image/webp" in the Accept header, and the server can detect this and return the WebP version. The advantage of this method is no HTML modification needed — all format selection logic is handled server-side.

# 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 Support on Mobile

On mobile, WebP's benefits are especially significant. Mobile networks are typically slower than broadband, and mobile users are more sensitive to load speeds. Android Browser has supported WebP since Android 4.4; iOS Safari supports it since iOS 14 (covering approximately 97% of active iOS devices); WeChat's built-in browser (widely used in China) supported WebP early; enterprise apps like WeCom and DingTalk's built-in browsers also generally support WebP.

For websites targeting the Chinese market, extra attention is needed: WeChat's built-in browser had some issues with picture element support in early versions, but this was fixed in newer versions (7.0+). If a large portion of your users browse within WeChat, it's recommended to also test WebP image display in WeChat.

CDN and Image Service WebP Auto-Conversion

Major CDN and image processing services offer WebP auto-conversion, eliminating the need to manually maintain two sets of images. Cloudflare (Polish feature) automatically converts images to WebP and caches them; Cloudinary automatically serves WebP to supporting browsers via the URL parameter f_auto; Imgix achieves the same through the auto=format parameter; AWS CloudFront + Lambda@Edge can implement custom WebP conversion logic.

Should You Start Using WebP Now?

For new websites: yes, start using WebP as the primary image format now, with JPG/PNG fallback via the picture element. For migrating existing websites: if the proportion of users with old Safari (iOS 13 and below) is negligible in your user base, strongly recommend migrating to WebP. Start with the largest images that most impact the site (hero images, main product images), then gradually expand to all images. Migration can be automated through build tools or using CDN's automatic format conversion feature, without manually converting every image.