AVIF vs WebP: The Next Image Formats

For years the web ran on JPG and PNG. Then WebP arrived and shaved a third off most files. Now AVIF is doing the same thing to WebP. If you publish images online, it is worth knowing how the two modern formats compare — because picking the right one can halve your page weight without touching quality.

Where both formats come from

Both AVIF and WebP are spin-offs of video codecs. WebP is built on the VP8/VP9 technology behind YouTube; AVIF is built on AV1, the newer, royalty-free codec backed by Google, Netflix, Amazon and others. Video codecs are extremely good at describing images in very few bytes, so borrowing them for still pictures was a natural move.

How they compare on size

At the same visual quality, the rough pecking order is simple: AVIF is smaller than WebP, which is smaller than JPG. AVIF typically beats JPG by 50% or more, and WebP by around 20%. The gap is widest on photographs with lots of smooth gradient — skies, skin, soft shadows — where AV1's smarter compression really shows.

For flat graphics, logos and screenshots the difference narrows. Both formats support lossless compression that beats PNG, and both support transparency, so either is a fine PNG replacement.

Where they differ in practice

• Encoding speed. AVIF is slower to create. Squeezing a file that hard takes CPU time, which matters if you are converting thousands of images in a build step. WebP encodes much faster.
• Browser support. WebP is supported everywhere — every current browser, going back years. AVIF is supported in all the major current browsers too, but a little less universally on older versions. For a public site you serve both with a fallback.
• Detail retention at low quality. Pushed to very small sizes, AVIF tends to stay clean where JPG and even WebP show blocky artefacts. The trade-off is that AVIF can smear very fine texture (think grass or hair) into a slightly "painted" look if you over-compress.

How to serve them safely

You do not have to choose one and abandon the rest. The <picture> element lets the browser pick the best format it understands:

• Offer AVIF first, WebP second, and a JPG or PNG as the final fallback.
• The browser downloads only the first source it supports, so modern visitors get the smallest file and older ones still see the image.

This is the standard pattern on performance-focused sites, and it means you never gamble a broken image against a few saved kilobytes.

A practical workflow

1. Keep a high-quality master in a lossless format (the original camera file, or a PNG for graphics).
2. Resize to the dimensions the image is actually displayed at — this is almost always the biggest single saving, bigger than any format change.
3. Export to AVIF and WebP at a quality you have checked by eye, and keep a JPG or PNG fallback.
4. Serve all three with <picture> and let the browser decide.

Do you even need AVIF yet?

If your workflow is simple and you want one modern format that works everywhere with fast encoding, WebP remains an excellent default and will not let you down. Reach for AVIF when image weight is a real bottleneck — an image-heavy gallery, a slow mobile audience, a Core Web Vitals score you are fighting to improve — and you can afford the extra encoding time.

Either way, the old rule still holds: resize first, then compress, then pick the format. The format is the last 20%; the dimensions are the first 50%. Converting between JPG, PNG, WebP and AVIF in your browser lets you test each one on a real image without uploading anything to a server — the sensible way to find the smallest file that still looks right.