I benchmarked AVIF vs WebP on real images, and the "best" format flipped depending on what I compressed

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.