How to Serve WebP Correctly

Learn how to deliver WebP images properly with fallbacks, ensure compatibility across browsers, and achieve maximum performance and Core Web Vitals optimization.

WebP is one of the most efficient modern image formats available today. It can reduce file size by up to 35–80% compared to PNG and JPG while keeping excellent visual quality. However, many developers still serve WebP incorrectly — causing broken images, SEO issues, or poor fallback behavior.

Why WebP Matters for Performance

WebP is supported by over 97% of browsers, making it the default choice for most websites. Its benefits include:

  • Much smaller file sizes compared to PNG and JPG
  • Support for both lossy and lossless compression
  • Transparency support similar to PNG
  • Fast decoding for mobile devices
  • Improved Core Web Vitals scores

When used correctly, WebP drastically reduces LCP (Largest Contentful Paint), making your page load faster and boosting search rankings.

How to Serve WebP with Proper Fallback

Although WebP is widely supported, some browsers and older devices may still require fallback formats. The best way to ensure compatibility is using the <picture> element.

Recommended HTML Structure



    
    
    Example image

The browser will:

  • Load the .webp version when supported
  • Fallback to .jpg or .png when needed

How to Serve WebP with NGINX


location ~* ^/assets/img/(.*)\.(jpg|jpeg|png)$ {
    try_files /assets/img/$1.webp $uri =404;
}

This configuration automatically serves WebP versions whenever they exist. If the WebP file is missing, NGINX safely falls back to the original.

How to Serve WebP with Apache (.htaccess)


RewriteEngine On

RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_FILENAME} (.*)\.(jpg|jpeg|png)$
RewriteCond %{REQUEST_FILENAME}.webp -f
RewriteRule ^ %{REQUEST_URI}.webp [L]

This enables WebP delivery without changing URLs, making it safe for SEO.

Using WebP with WordPress

WordPress 6.0+ supports WebP natively. To ensure proper fallback behavior, use optimization plugins like:

  • LiteSpeed Cache
  • WP Rocket
  • ShortPixel
  • Imagify

These plugins automatically generate WebP files and configure fallback logic for older browsers.

Final Recommendation

Serving WebP correctly is essential for modern web performance. Always include proper fallbacks, use the <picture> element, and configure your server to deliver WebP automatically when available. This ensures speed, compatibility, and a future-proof workflow for your website.