AVIF vs PNG
Use PNG for screenshots and graphics that must stay pixel-perfect, and AVIF for photographs on a website. AVIF is many times smaller for photos, but it is lossy as normally used and many upload forms and older apps still do not accept it.
Last updated
Choose AVIF when
- Photographs on a web page, where every kilobyte affects loading time.
- Large hero images and product photos.
Choose PNG when
- Screenshots, diagrams, logos and text.
- Anything uploaded to a form or app that may not read AVIF.
- Images you will edit and re-save.
What AVIF actually is
AVIF is the smallest of the widely supported image formats, often half the size of a JPG that looks the same. It handles high dynamic range, wide colour, transparency and animation, and it degrades more gracefully than JPG when pushed hard.
Reading AVIF is nearly universal; writing it is not. A browser without an encoder quietly hands back a PNG instead of refusing, so the conversion looks as though it worked. Current Chrome on macOS is one of them. This site checks for a real encoder first and says so when there is none.
What PNG actually is
PNG stores every pixel exactly as it was, using a compression method that throws nothing away. It carries a full alpha channel, so a pixel can be any degree of transparent rather than simply on or off, and it handles up to 16 bits per colour channel.
People save photographs as PNG and wonder why an email bounces. A photo that is 400 KB as a JPG is routinely 4 MB as a PNG, because lossless compression cannot do much with the noise in a real photograph.
AVIF and PNG side by side
| AVIF | PNG | |
|---|---|---|
| Extension | .avif | .png |
| Media type | image/avif | image/png |
| Compression | Lossy | Lossless |
| Transparency | Yes | Yes |
| Animation | No | No |
| Quality setting | Yes | Not applicable |
| We can write it | Yes | Yes |
Questions
Can AVIF be lossless?
Yes, it has a lossless mode, but those files are often no smaller than a well-compressed PNG. AVIF’s advantage is in lossy compression of photographs.
Do all browsers support AVIF?
Current versions of Chrome, Edge, Firefox and Safari all do. Safari before version 16, and many desktop apps, do not.