I mentioned earlier that I’ve been replacing the WebP images on my website with AVIF to reduce file sizes and decrease bandwidth usage. But when I started converting my portfolio images, I noticed something odd. Some weren’t smaller—they were bigger. Sometimes much bigger.

Blogging and all that Malarkey

Switching from WebP to AVIF doesn't always reduce file sizes. While general images saw dramatic savings (65% overall, some over 90%), 18 out of ~300 portfolio images actually grew larger after conversion — in one case nearly tripling in size. The culprit: images with complex alpha transparency and text, which WebP already compressed efficiently. AVIF excels with photographic content but can underperform on graphics with large transparent areas. The takeaway is to always verify file size and visual quality before committing to a new format rather than assuming the newer format is universally better.

I thought AVIF would make every image smaller. It didn’t.

Good timing I came across this article. Was thinking of doing a similar webp -&gt; avif swap. Hm, perhaps I’ll stay on the webp train…

This matches what we see rasterizing document assets: AVIF wins on photographic content but loses on flat-color graphics with text and alpha, because its lossy path smears high-frequency edges and stores alpha as a separate plane that doesn’t compress like the color one. Blanket format swaps are the trap — the only reliable approach is encoding both AVIF and WebP per image and keeping whichever is actually smaller. A 3x regression on a logo is a strong tell you had a lossless-friendly image to begin with.

Hey, did you actually try to reduce the quality of avif images before comparing? Their killer feature is that you can compress the hell out of it and they still look okay.
In my projects, I compress avif images to 50% of original quality and they look exactly the same. With webp, I can get away only with 80%. I use both images with a picture tag because not all browsers support avif yet.