WebP browser support guide

The short answer

If your audience uses any browser released after 2020, you can ship WebP and not think about fallbacks. Global support sits above 97%.

Support matrix

The right way to fall back

The <picture> element handles fallback automatically. The browser picks the first <source> it can decode; otherwise it falls through to the <img>:

<picture>
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.png" alt="Site hero"
       width="1280" height="720" loading="lazy">
</picture>

Notes:

• The type="image/webp" attribute is what makes browsers skip the source they can't decode.
• Always include width and height — it prevents layout shift (good for CLS).
• For a hero / above-the-fold image, drop loading="lazy" and add fetchpriority="high".

Responsive WebP with srcset

Combine <picture> with srcset for proper density / size handling:

<picture>
  <source type="image/webp"
          srcset="hero-800.webp 800w, hero-1600.webp 1600w"
          sizes="(min-width: 64rem) 1024px, 100vw">
  <img src="hero-1600.png" alt="…" width="1600" height="900">
</picture>

Server-side content negotiation

If you'd rather not edit every <img>, you can serve WebP based on the request's Accept header. Apache (Hostinger, cPanel hosts) supports it via .htaccess:

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{REQUEST_FILENAME} (.+)\.(png|jpg|jpeg)$
  RewriteCond %{REQUEST_FILENAME}.webp -f
  RewriteRule (.+)\.(png|jpg|jpeg)$ $1.$2.webp [T=image/webp,L]
</IfModule>

This rewrites /foo.png to /foo.png.webp only when the browser said it accepts WebP and the WebP file actually exists on disk.

How to detect WebP support in JavaScript

Rare, but occasionally useful (e.g., Canvas-based tools). The cleanest probe:

function supportsWebP() {
  const c = document.createElement('canvas');
  return c.toDataURL('image/webp').indexOf('data:image/webp') === 0;
}

Bottom line

• Ship WebP by default in 2025.
• Use <picture> when you actively need to support a long tail.
• Use .htaccess negotiation when you want zero markup changes.