DEV Community

zjch022
zjch022

Posted on

WebP Compatibility Check: Which Browsers Support WebP (and How to Fall Back to PNG)

#webdev #webp #tutorial #browsers

WebP Compatibility Check: Which Browsers Support WebP (and How to Fall Back to PNG)

WebP has been around since 2010, and every modern browser supports it today — Chrome, Edge, Firefox, Opera, and Safari (14+ on macOS Big Sur and later, iOS 14+). So why do people still hesitate to switch their PNGs over? Usually it's one lingering fear: "What about that one user on an old browser?"

The answer is simple: serve WebP to everyone, and fall back to PNG for the stragglers. Both formats exist side by side. Here's how to do it properly.

The Short Answer on Browser Support

WebP is supported by:

  • Chrome / Edge / Opera — supported for years (Chrome since 2010)
  • Firefox — since version 65 (2019)
  • Safari — since Safari 14 on macOS Big Sur and iOS 14 (2020)
  • Android browsers — broadly supported

The only real gaps are ancient browsers: Internet Explorer (all versions), Safari 13 and older, and truly old mobile browsers. In most analytics you'll see these at well under 1% of traffic, but if you serve a regulated or enterprise audience, the fallback below has you covered.

Convert First, Then Fall Back

Step one is producing the WebP files. If you don't have an image pipeline yet, the simplest path is to convert PNG to WebP online with a browser-local tool — drop the PNG in, download the WebP, no upload involved. Keep both files next to each other: hero.png and hero.webp.

Step two is telling the browser to prefer WebP. The <picture> element does exactly this:

<picture>
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.png" alt="Hero banner" loading="lazy">
</picture>
Enter fullscreen mode Exit fullscreen mode

Browsers that understand WebP take the <source>; everything else silently falls through to the PNG in the <img> tag. No JavaScript, no user-agent sniffing, no broken images — ever. The loading="lazy" is a bonus for below-the-fold images.

Two Gotchas Worth Knowing

Test with actual old browsers, not assumptions. If your audience includes older Safari, remember the cutoff is Safari 14. A quick check in your analytics for browser versions beats guessing. If Safari 13 shows up at meaningful volume, the <picture> fallback above already handles it — just make sure the PNG fallback is compressed reasonably too.

Don't serve WebP through a pipeline that re-encodes it. Some CDNs and CMS plugins transcode images on the fly. If yours converts your carefully made WebP back to JPEG, you lose the savings. Check the response headers (look for content-type: image/webp) on a live URL before assuming the savings are real.

One more tip: favicons and Open Graph social images still belong in PNG or JPEG. Crawlers that generate link previews are a separate population from browsers, and several of them still don't read WebP. Convert your page content, keep your social cards conservative.

Converter mentioned above: https://fileontap.com/png-to-webp/

Disclosure: I built FileOnTap, a free set of file converters that run 100% in your browser — your images never get uploaded to a server. I wrote this because the "but what about old browsers?" question kept coming up, and the answer is a five-line <picture> tag.

Top comments (0)