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

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.

Switching from WebP to AVIF seemed like an easy win. AVIF generally produces smaller files than WebP while maintaining similar visual quality. Smaller images mean faster pages and, in my case, lower bandwidth usage. Considering how many automated clients insist on downloading every image they can find, every kilobyte counts.

The first batch of images came from my website’s general images folder. The original WebP files totalled 6.58MB. Their AVIF replacements came to just 2.30MB. That’s a saving of 4.28MB, or 65.1%. Some of the reductions were astonishing. Several product images shrank by more than 90%, including one which dropped from over a megabyte to just 76KB.

Then, I started switching over the almost 300 images across my portfolio, and I noticed something unexpected. One portfolio image had grown from 63KB to 181KB. That’s almost three times larger than the original WebP. Across my portfolio, eighteen of the three hundred images were larger.

AVIF isn’t magic

It’s true that AVIF is usually more efficient than WebP. But more accurately, it depends on the contents of an image. Photographs with lots of subtle detail often compress brilliantly with AVIF. But images with complex alpha transparency don’t always compress as efficiently.

Looking through the eighteen larger files, they all had something in common. They were graphics containing text and large, complex areas of alpha transparency, like this example from The Shared Homeland.

Those images had already been compressed remarkably well in WebP, but converting them to AVIF made them larger rather than smaller. So, for now, I’m reverting those images to WebP until I learn more about how AVIF handles transparency and how to tweak AVIF quality settings.

Eighteen images on one website isn’t enough to prove a general rule. But it was enough to remind me that optimisation isn’t about using the newest format. It’s important to check the visual quality and file size differences before blindly updating to a new format.