PNG, WebP, and AVIF can all represent the same image — but they hit very different file sizes and reach very different browsers. Pick the wrong format and you either ship a bloated page or a broken image. Here's how to choose without overthinking it.
At a Glance
A typical 1920×1080 product photo, encoded at perceptually equivalent quality:
| Format | File size | Relative |
|---|---|---|
| PNG (lossless) | ~2.4 MB | 1.0× (baseline) |
| WebP (quality 80) | ~180 KB | 0.07× |
| AVIF (quality 60) | ~95 KB | 0.04× |
The numbers swing with content type — flat illustrations compress differently than noisy photographs — but the ordering almost always holds: AVIF smaller than WebP smaller than PNG, often by 10–25× over PNG for photos.
What Each Format Optimizes For
PNG (1996): lossless compression with full alpha transparency. Designed as a patent-free replacement for GIF. Universal support — every browser, every OS, every image library since the late 1990s. Wins when you need pixel-perfect output or transparency on simple graphics.
WebP (2010, Google): a web-tuned format built on the VP8 video codec. Both lossy and lossless modes, alpha channel, animation. ~30% smaller than JPEG at the same quality and ~25% smaller than PNG for lossless. Mainstream support since 2020 (Safari was the holdout).
AVIF (2019): based on the AV1 video codec. Best compression of the three by a wide margin, especially on photographic content. Supports HDR, wide color gamut, alpha, and animation. Encoding is slow and CPU-heavy; decoding is fast.
Side-by-Side Comparison
| Feature | PNG | WebP | AVIF |
|---|---|---|---|
| Compression | Lossless only | Lossy + lossless | Lossy + lossless |
| Alpha channel | Yes (8-bit) | Yes | Yes (10/12-bit) |
| Animation | No (use APNG) | Yes | Yes |
| HDR / wide gamut | No | No | Yes |
| Browser support (2026) | 100% | ~97% | ~93% |
| Encode speed | Fast | Medium | Slow |
| Decode speed | Fast | Fast | Fast |
| License | Royalty-free | Royalty-free | Royalty-free |
| Best for | Icons, UI, screenshots | Web photos, replacements for JPEG/PNG | Hero images, photo galleries |
When PNG Is the Right Call
- Icons, logos, UI elements under a few KB. The compression delta isn't worth the cognitive overhead, and you keep guaranteed pixel fidelity.
- Screenshots with text. Lossy compression mangles small type; PNG keeps it crisp.
- Anywhere you can't guarantee a modern browser — old enterprise environments, embedded webviews, email clients.
- Source files you'll re-encode later. Always keep a lossless master.
When WebP Is the Right Call
- Default replacement for JPEG and PNG on the web in 2026. Support is essentially universal, and the file-size savings are substantial.
- Product photos, blog images, thumbnails where 95%+ browser coverage is acceptable.
- Animated graphics where you'd otherwise reach for a GIF — WebP destroys GIF on size.
If you're converting an existing PNG library, PNG → WebP is the highest-leverage move you can make for page weight.
When AVIF Is the Right Call
- Hero images and large above-the-fold photos where every kilobyte hits Largest Contentful Paint.
- Photo galleries where total bytes dominate the experience.
- Any case where you control the build pipeline and can pre-encode (CPU cost is borne once at build time, not per request).
- HDR and wide-gamut content — AVIF is currently the only widely-supported option for the open web.
For one-off conversions or testing, PNG → AVIF gives you the file directly. For batch web optimization, the Image Compressor handles the whole pipeline.
Browser Support Reality Check
As of 2026, on caniuse-style global tracking:
- PNG: 100%. Universal since the late 1990s.
- WebP: ~97%. Chrome (2010), Firefox (2019), Safari (2020 on macOS Big Sur and iOS 14). The remaining gap is mostly very old Safari, IE11, and obscure embedded browsers.
- AVIF: ~93%. Chrome (2020), Firefox (2021), Safari (2022 on macOS Ventura and iOS 16). Edge cases: Safari versions older than 16, some Samsung Internet builds, embedded webviews on older Android.
The 4-percentage-point gap between WebP and AVIF matters less than it looks because the <picture> element with format fallbacks is trivial:
<picture>
<source srcset="/img/hero.avif" type="image/avif">
<source srcset="/img/hero.webp" type="image/webp">
<img src="/img/hero.jpg" alt="…">
</picture>
The browser picks the first format it can decode. You ship the best format to capable browsers and a JPEG/PNG fallback to the rest at zero JavaScript cost.
Quality Settings That Actually Matter
Naive comparisons set "quality 80" across formats and call it fair, but the quality scale isn't standardized between codecs. A practical mapping that produces visually similar output:
- WebP quality 80 ≈ JPEG quality 85
- AVIF quality 60 ≈ WebP quality 80 ≈ JPEG quality 90
In other words, AVIF's quality numbers are systematically lower for the same perceived quality — don't compare files at the same numeric quality, compare them at the same SSIM or perceptual score.
When None of Them Are the Right Call
- SVG for vector content — logos, icons, diagrams. Resolution-independent and tiny. PNG is only the right answer when SVG isn't.
- JPEG for legacy compatibility in environments where you need universal decoding (email, old document scanners, some printers).
- HEIC if you're dealing with iPhone photo originals and want maximum compression with broad Apple support — though the open-web answer there is convert to AVIF or WebP.
Decision Rubric
- Icon, logo, screenshot, or anything with sharp text → PNG
- Web photo or replacing existing JPEG/PNG, broad browser support → WebP
- Hero image, photo gallery, build-time pipeline, modern browsers → AVIF (with WebP/JPEG fallbacks via
<picture>) - Vector graphic → SVG (none of the three)
FAQ
Should I just use AVIF everywhere? No. AVIF encoding is slow, doesn't support every legacy environment, and offers diminishing returns for tiny images. Use it where bytes matter most: large photos above the fold.
Why is my WebP bigger than the JPEG? You're probably comparing lossless WebP to lossy JPEG. Set WebP to a quality level (e.g. 80) and it'll beat JPEG comfortably.
Is AVIF really patent-free? Yes. The AV1 codec it's built on was designed by the Alliance for Open Media specifically to avoid the licensing issues that plagued HEVC. Royalty-free is one of its main selling points.
Can I serve different formats to different browsers automatically?
Yes — either with the <picture> element (zero JS, browser picks based on type) or with server-side content negotiation reading the Accept header. The <picture> approach is simpler and works on static hosting.
What about file managers and OS support outside browsers? This is where PNG still dominates. macOS Preview, Windows Explorer, Photoshop, and Lightroom all handle PNG natively; AVIF support is improving but inconsistent. If the file might leave the browser, PNG (or JPEG) is the safer bet.