AVIF and WebP are not always better than PNG and JPG

In my post on how good AVIF is, I mention:

I’ve found the odd occasion where an equivalent quality WebP file ends up slightly bigger than the PNG or JPEG; I’m yet to see that with AVIF.

Dariusz Więckiewicz also found some of his WebP and AVIF conversions were bigger than the original PNG or JPG they were taken from too. Like Dariusz, I losslessly compress my exported PNGs and JPGs after export (I use ImageOptim) to ensure they’re as small as possible. And, it would seem, sometimes that’s as good as it’ll get!

Here’s a quick snapshot of some of the images I converted to WebP and AVIF, along with the difference in file size for each, when compared to their original PNG or JPG:

Image 1

Type	File size	Difference
PNG	44KB	- Not applicable
WebP	28KB	-36%
AVIF	19KB	-57%

Image 2

Type	File size	Difference
PNG	128KB	- Not applicable
WebP	93KB	-27%
AVIF	23KB	-82%

Image 3

Type	File size	Difference
JPG	51KB	- Not applicable
WebP	35KB	-31%
AVIF	26KB	-49%

Image 4

Type	File size	Difference
JPG	132KB	- Not applicable
WebP	87KB	-34%
AVIF	25KB	-81%

That’s a 32% saving across those four images when converted to WebP and a whopping 67% saving for AVIF, but image 5 is where it gets interesting:

Image 5

Type	File size	Difference
PNG	17KB	- Not applicable
WebP	25KB	+47%
AVIF	8KB	-53%

I still made a good saving on the AVIF, but the WebP ended up nearly 1.5 times bigger than the original PNG. So I discarded the WebP, and my HTML reflected that:

<picture>
    <source srcset="image5.avif" type="image/avif" />
    <img src="image5.png" alt="A description of Image 5" width="800" height="450" />
</picture>

Similarly, if I converted an image and the AVIF came out at a bigger file size than the PNG or JPG it was converted from, I wouldn’t use it.

It’s all very well for me to say that though, as I don’t use many images on my website so I can afford to spend a bit more time converting and adding them manually. For more image-heavy websites the solution would need to be different. Image conversion would probably become part of the build process:

• convert all PNGs and JPGs to WebP and AVIF
• ensure each WebP and AVIF isn’t larger than the file it was converted from
• remove them if they’re larger
• ensure the generated HTML doesn’t reference any images that didn’t make the grade

It looks like the Eleventy Image plugin could be the answer to that automation as it:

• Never upscales raster images larger than original size
• supports: jpeg, png, webp, avif
• generates the HTML automatically, based on a macro, so if a WebP or AVIF didn’t make the grade they won’t end up in the markup

I have a couple of projects that would benefit from Eleventy Image, so I’ll no doubt write about it at some point. Though I’ll be carefully monitoring how it increases the build time, and weighing up whether it’s worth adding yet another dependency.

All things told, I feel AVIF and WebP are very much worth adding, but only if they’re not bigger than their source files.