AVIF vs WebP — the smaller file isn't always the right one

I spent an embarrassing evening once A/B-ing the same hero image as WebP and AVIF, flipping between two browser tabs, trying to catch a difference my eyes could actually see. The AVIF was 31% smaller. I could not tell them apart. I sat there feeling like I'd found free money — and then I ran the batch on a folder of 200 images and remembered the catch.

AVIF is, most of the time, the smaller file. That part is true and worth knowing. But "smaller" is only one column in the spreadsheet, and the other columns are where the decision actually lives.

Where AVIF wins

AVIF is built on the AV1 video codec, and it's a genuinely newer, cleverer design than WebP. On photographic content it typically lands 15–30% smaller than a WebP at matched visual quality. It handles smooth gradients — skies, skin, soft shadows — without the blocky artifacts that older codecs smear across them. It supports HDR and wide color gamut, which WebP does not. It keeps a full alpha channel, same as WebP.

Some rough numbers from that folder I mentioned, all at a quality setting where I couldn't spot a difference:

Look at that last row again. On flat, simple graphics AVIF sometimes comes out bigger. Its cleverness is tuned for photographic complexity, and it has nothing to chew on in a two-color illustration. WebP, or even PNG, can win there.

Where AVIF costs you

The size win isn't free. Two real prices:

Encode time. AVIF is dramatically slower to compress. On the same image, an AVIF encode can take several times longer than a WebP — sometimes the difference between "instant" and "wait a couple seconds per file." For one hero image, who cares. For a batch of 200, you feel every second. WebP encodes so fast it's basically free.

Decode and support. Every browser people actually use decodes AVIF now — Chrome since 2020, Firefox not long after, Safari from version 16 in late 2022. In 2026 that covers the vast majority of real traffic. But "supported" and "universal" aren't the same word. WebP has a few more years of saturation behind it, and it decodes faster on low-end phones, where AV1 decoding can actually cost noticeable battery and CPU. Some email clients and older embedded webviews still don't touch AVIF at all.

The 20% question

So the real decision comes down to this: does the extra ~20% matter for this image, in this place?

For a large hero image on a landing page — the one heavy asset every visitor downloads — yes. Shaving 100 KB off the thing that gates your first paint is worth a slower encode you only pay once. That's the clearest case for AVIF I know.

For a thumbnail grid, a blog's inline screenshots, or anything already under about 50 KB as WebP, the answer is usually no. Twenty percent of a small number is a smaller number. You've traded encode time and a sliver of compatibility to save bytes nobody was waiting on. WebP is the calmer default there.

When I don't bother with AVIF

If a file is going anywhere outside a modern browser — an email newsletter, an old CMS, a partner's system I don't control — I don't gamble on AVIF. I use WebP, or plain JPG if I want zero risk. The smallest file that doesn't render is worth nothing.

And I don't AVIF-encode flat graphics, logos, or line art. That's not what the codec is for, and I've watched it lose to WebP on those often enough to stop trying.

How I actually decide

My honest workflow: I convert the heavy photographic stuff to AVIF and keep the light, simple, and widely-distributed stuff as WebP. It's not one format to rule them all. It's picking per image.

If you want to try the comparison yourself, both run in your browser here — WebP to AVIF for squeezing existing WebP assets further, and PNG to AVIF for going straight from a master. Nothing uploads anywhere; the encode happens on your machine, which is also why you'll feel AVIF's slowness firsthand. That's not a bug. That's the codec doing more work for a smaller file, right in front of you.

Run your own hero image through both. If you can't see the difference and the AVIF is meaningfully smaller, you have your answer. Just don't assume the answer is the same for the next 200 files.