AVIF vs PNG
Both store photographs, but they make different trade-offs. Here is where they actually differ, and how to pick.
Short answer
For photographic content AVIF wins by a wide margin, and it has a lossless mode too. For small flat-colour assets — icons, sprites, simple line art — PNG is often still smaller and always simpler.
Why this comes up
People usually land here in one of two situations: they have oversized PNG photographs and want the biggest possible saving, or they are rebuilding an asset pipeline and wondering whether AVIF can replace PNG everywhere. The answer differs sharply between those two, and the second one is where most blanket advice goes wrong.
Side by side
| Property | AVIF | PNG |
|---|---|---|
| Compression | Lossy | Lossless |
| Transparency | Yes | Yes |
| Typical file size | 40-55% of an equivalent JPEG | 300-500% of an equivalent JPEG |
| Compatibility | All current browsers; some older desktop apps lag behind | Opens everywhere, including decades-old software |
| Usually comes from | Websites optimising page weight | Screenshots, logos and graphics |
What actually differs
AVIF has a lossless mode, and people forget it exists
Comparisons usually pit lossy AVIF against lossless PNG, which is not a like-for-like test. Lossless AVIF exists and typically beats PNG on photographic content by a comfortable margin while being byte-exact. If your requirement is genuinely "no loss", you do not have to stay on PNG — you have to say which AVIF mode you mean.
On tiny flat assets AVIF often loses
AVIF carries container overhead that a 32×32 icon cannot amortise, and its coding tools are built for photographic texture that simple graphics do not have. A small PNG of a flat-colour icon frequently comes out smaller than the AVIF of the same image, sometimes substantially. Measure before converting an icon set; the blanket rule "AVIF is smaller" is a photography rule.
PNG has no compatibility question at all
PNG opens in everything, has since the nineties, and needs no fallback, no picture element and no content negotiation. AVIF needs all three if any part of your audience is on older Safari. For a large hero image that complexity buys you real bytes; for a 2 KB icon it buys you nothing and costs you a build step.
Which to use
Use AVIF for
Photographs and large detailed images on the web, where halving or better is on the table and a fallback is already part of your setup.
Use PNG for
Icons, sprites, logos, screenshots of text, and anything small and flat where AVIF's advantage disappears and universal support still matters.