Two image formats, one question: which saves your bandwidth without breaking your site?
Quick comparison
| Feature | PNG | WEBP |
|---|---|---|
| Compression | Lossless | Lossy or lossless |
| File size (same quality) | 100% | 30–70% |
| Transparency | Yes | Yes |
| Animation | No | Yes |
| Browser support | 100% | 98%+ |
Use PNG when…
- You need pixel-perfect transparency (logos with fine edges)
- You're saving screenshots with text
- You need lossless quality for further editing
- You're targeting very old browsers (rare now)
Use WEBP when…
- You're serving images on a modern website
- You want to reduce bandwidth by 30–70%
- You need animation (smaller than GIF)
- You're optimizing for Core Web Vitals
Choosing a format
Serve WEBP, fall back to PNG.
<picture>
<source srcset="hero.webp" type="image/webp">
<img src="hero.png" alt="Hero image" width="1200" height="630">
</picture>Every modern browser supports WebP. The fallback catches the <2% still on old software.
File size reality check
- 250KB as lossy WEBP at 85% quality (visually identical)
- 400KB as lossless WEBP (pixel-identical)
- 850KB as optimized PNG (lossless, compressed better)
For photos, WEBP is a no-brainer. For icons and vector-style art, PNG often wins after optimization.
Conclusion
Compare output size and visual quality for your own images and audience. Keep an appropriate fallback when older browsers or downstream tools need a different format.