I benchmarked AVIF vs WebP on real images, and the "best" format flipped
depending on what I compressed
Every "best image format 2026" article says the same thing: AVIF wins, WebP
is second, JPEG and PNG are legacy. I believed that too, until I ran the
same encoder at the same settings against two different image types and got
opposite winners.
Same quality setting, same encoder. Opposite results.
I compressed a photorealistic image and a transparent graphic through JPG,
PNG, WebP, and AVIF, all at quality 80, same encoder, same run. Here's what
came back:
On the photograph (3.35MB source): WebP came out at 342KB. AVIF came out
at 537KB — 57% larger than WebP, for a format that's supposed to be the
efficient one.
On the transparent graphic (54KB source): AVIF won cleanly at 18.6KB. WebP
trailed at 29KB. PNG saved as PNG actually came back larger than the
original — +13.6%.
Same two formats. Same encoder. Same quality target. The ranking inverted
completely depending on what was inside the file.
Why "just use AVIF" is bad advice
The instinct after seeing AVIF's reputation is to default to it everywhere.
But AVIF's compression strategy is tuned for smooth photographic detail —
it's genuinely excellent there in the general case, but it's not free
computation, and on a photo where WebP's simpler model already gets close
to optimal, AVIF's extra complexity can cost more than it saves. There's
no universal winner. The right format depends on what's actually in the
pixels.
The trap hiding inside the numbers
Here's the part that would have fooled me if I hadn't looked closer. On
the transparent graphic, JPG actually beat WebP on file size (27.7KB vs
29KB). If you only looked at the number, JPG would look like the winner.
It isn't. JPG has no alpha channel. To "win" that comparison, it silently
flattened the transparency onto a white background and destroyed the one
property that graphic needed. A format that can't carry your actual
requirement isn't a smaller version of the same image — it's a different,
broken image that happens to compress well.
Smaller isn't better if the format threw away the thing you needed.
The format you can't rely on
There's a practical wrinkle with AVIF specifically that benchmark tables
never show: browser support for encoding AVIF client-side depends on the
browser's own native decoder, and that availability varies by browser
version. In other words, the format that won the transparent-image test
above is also the one most likely to be silently unavailable depending on
who's opening your file. And animation is a harder wall entirely —
still-image codecs only ever keep the first frame.
So even when AVIF wins on paper, it's not always the safe default in
practice.
What I actually do now
Pick the format for what's in the image, not for its reputation:
Photos and complex gradients: WebP is usually the safer default — strong
compression, broad support, and it doesn't lose to AVIF by nearly as much
as AVIF sometimes loses to it.
Screenshots, UI, flat graphics, anything with transparency: worth testing
AVIF specifically, since this is where it actually pulls ahead — but verify
support if it needs to render everywhere.
Anything that needs to work absolutely everywhere with zero surprises:
JPG (no transparency) or PNG (transparency, no compression guarantee)
remain the boring, reliable choices for a reason.
The honest caveat
These specific percentages came from two fixtures I built for this test,
not a universal law — the direction of the finding (rankings aren't stable
across image types) generalizes; the exact numbers won't. Test your own
asset before assuming either format is the "right" one.
If you want to check this yourself
I built a format comparison tool
that runs these numbers against real images, and an image converter]
if you just want to convert a file — both run entirely in the browser,
nothing uploaded. I'd be curious whether this holds on assets very
different from mine.
Top comments (0)