PNG vs WebP: a clash of generations
For nearly 20 years, the golden rule of web design was simple: JPG for photos, PNG for images that need a transparent background (alpha channel). But the WebP format, pushed by Google since 2010 and adopted en masse from 2020 on, has reshuffled the deck.
Should we now banish PNG entirely from our websites? The answer is nuanced — but the verdict leans very clearly one way.
The PNG problem: a structural heavyweight
PNG (Portable Network Graphics) uses lossless compression. That’s perfect for preserving the crisp sharpness of text, vector paths and flat color areas, but it produces extremely heavy files.
A few real-world ballpark figures:
- an illustrated 1920×600 banner with gradients in PNG: 800 KB to 1.4 MB;
- a complex logo with drop shadows: 180 to 350 KB;
- a 1440p interface screenshot: 2.5 to 4 MB.
On a mobile 4G network (median ~12 Mbps in the US), those sizes mean 0.5 to 2.5 seconds of load time per image. Multiply by 15 images on a product page, and your LCP blows up.
WebP’s crushing advantage
WebP is the ultimate Swiss Army knife:
- it handles transparency (like PNG);
- it can use lossy compression (with losses invisible to the naked eye, like JPG) or lossless (your choice);
- it supports animation (as an alternative to heavy GIFs);
- at equal visual quality, a WebP file is on average 26% lighter than a PNG, and the gap can reach 80% on illustrations with complex gradients.
Detailed comparison: 1 image, 3 formats
Source image: a vector illustration exported at 1200×800 pixels, with transparency and gradients.
| Format | Size | Compression | Transparency | Compatibility |
|---|---|---|---|---|
| PNG-24 | 612 KB | Lossless | Yes (8-bit alpha) | 100% |
| WebP lossless | 312 KB | Lossless | Yes (8-bit alpha) | 96% |
| WebP lossy 85 | 88 KB | Lossy | Yes (8-bit alpha) | 96% |
| AVIF 80 | 54 KB | Lossy | Yes (10-bit alpha) | 92% |
In this example, switching from PNG to lossy WebP saves 524 KB, or 85% — with no perceptible visual difference.
Browser compatibility: the debate is over
Today, WebP is supported by 96% of browsers worldwide (source: caniuse.com, May 2026). The incompatibility excuse no longer holds:
- Chrome ≥ 32 (2014)
- Firefox ≥ 65 (2019)
- Safari ≥ 14 (macOS Big Sur, iOS 14 — September 2020)
- Edge ≥ 18 (2018)
The only genuinely blocking case is Internet Explorer, whose global market share has fallen below 0.3% and which Microsoft officially retired back in June 2022.
The verdict: when to use what?
- Keep PNG only for:
- very small graphic elements (simple pixel-art icons, favicons), where the size is already just a few kilobytes;
- source files delivered to a printer (which often requires PNG, TIFF or PSD);
-
exports from design software (Figma, Sketch) before publishing to the web.
-
Switch to WebP for everything else:
- complex logos with shadows or cutouts;
- blog illustrations;
- marketing banners;
- product photos (as an alternative to JPG, WebP is ~30% lighter at equal quality);
- interface screenshots.
What about AVIF, then?
If you’re after maximum optimization, AVIF (~50% lighter than WebP
in lossy mode) is the future. But its compatibility still tops out at
92% and its encoding is noticeably slower. The best practice in 2026:
serve AVIF with a WebP fallback via the <picture> tag:
<picture>
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="…" loading="lazy">
</picture>
Optimize your assets without leaking data
If you manage a client’s website, uploading their graphic assets (sometimes under NDA, sometimes ahead of a product launch) to a third-party online converter is a security hole and a privacy risk.
Convert your PNGs to WebP in one click with MediaBay. The code runs directly in your browser: your clients’ trade secrets stay on your workstation. No file ever touches a third-party server, no leak possible.
Written by Nikola Markovic · published on May 17, 2026.