After Converting PNG to WebP: A Compatibility Checklist for Safari and Older Browsers

You converted your images to WebP, your pages load faster, and everything looks fine in Chrome. Then a visitor on an older Safari reports broken images, or a hero graphic vanishes on an old company laptop. WebP support is broad today, but "broad" is not "universal," and the failures are usually silent: a missing image, not an error message.

This checklist is for the moment after conversion, when you need to confirm that real visitors actually see your images. Work through it before you delete your original PNG files.

1. Keep the PNG fallback, at least for now

The single most effective safety net is the HTML <picture> element. It lets the browser pick the first format it understands:

<picture>
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.png" alt="Product hero image">
</picture>

If a browser cannot decode WebP, it simply falls back to the PNG. If you served WebP by rewriting URLs at the server level instead, check that your server also has a fallback path for old user agents. Do not remove the PNG originals until this checklist is fully green.

2. Test on real Safari versions, not just the latest

Safari added WebP support in version 14, released in 2020. That sounds old, but plenty of devices still run older versions: iPhones that stopped receiving updates, iPads handed down to family members, and Macs stuck on older macOS releases.

Test on:

• Safari 13 or earlier, where WebP images will not render at all
• Safari 14 and 15, where WebP works but animated WebP and some alpha-channel edge cases behave differently
• The in-app browsers inside messaging and social apps, which often lag behind the system Safari version

If you do not have old devices on hand, browser testing services let you spin up real Safari versions in the cloud. A screenshot-only check is not enough: open the page, scroll through it, and confirm every image actually appears.

3. Check the images old browsers actually receive

Open your page in an old browser and inspect what loads. You are checking three things:

• Does the fallback PNG load when WebP is unsupported? A blank box means your fallback is broken, not that WebP failed.
• Do transparent images keep their transparency? A WebP with an alpha channel that falls back to a flattened JPG will show an unwanted background color.
• Do images inside CSS backgrounds have a fallback too? CSS has no <picture> element, so you need a separate rule, for example serving the PNG first and overriding it with a WebP rule for supporting browsers.

4. Audit the places images hide

Hero images get all the attention, but compatibility bugs usually live elsewhere:

• Open Graph and social preview images: some link preview crawlers still prefer PNG or JPG, so keep a PNG or JPG version for your og:image tags.
• Email templates: most email clients do not support WebP at all, so newsletters and transactional emails should keep using PNG or JPG.
• Favicons, logos in PDFs, and images embedded in documents: these are often rendered by older tooling, so do not convert them just because the website converted fine.
• Third-party embeds and widgets that hotlink your images: if they request a specific file, they get whatever format you serve, with no fallback logic.

5. Watch for the silent failures

After launch, monitor for a week:

• Image error rates in your analytics or error tracking, segmented by browser version
• Support messages mentioning missing images, especially from Safari and older Android users
• Pages where the layout shifts because a failed image collapses to zero height

If a specific browser version shows failures, that is a fallback bug, not a reason to abandon WebP. Fix the fallback, keep the format.

6. Only then clean up

Once every item above is green, you can archive the original PNGs. Keep them somewhere safe rather than deleting them outright: a future redesign, a print asset, or a platform that requires PNG will thank you.

Converting without uploading

If you still have PNGs left to convert, you can convert PNG to WebP online in your browser. The conversion runs locally on your device, so your images are never uploaded to a server, and there is no account to create.

Checklist summary

• Serve WebP with a PNG fallback via <picture>
• Test on Safari 13 and earlier, plus in-app browsers
• Verify transparency and CSS background fallbacks
• Keep PNG or JPG for email and social previews
• Monitor image errors by browser version for a week
• Archive, do not delete, the original PNGs

WebP is worth it. The savings on photo-heavy pages are real, and most visitors will never notice the change. The ones who would notice are exactly the ones this checklist protects.

Disclosure: I'm the developer of FileOnTap.