Skip to main content

AVIF and WebP are not always better than PNG and JPG

Posted in Development and Performance

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.

Subscribe

If you enjoyed reading this and want a monthly roundup of my articles delivered to your inbox, just enter your email below.

I don’t collect any data on when, where or if people open the emails I send them. Your email will only be used to send you newsletters and will never be passed on. You can unsubscribe at any time.

More posts

Here are a couple more posts for you to enjoy. If that’s not enough, have a look at the full list.

  1. How I approach CSS: my ABC system

    CSS is easy to write but can become messy and bloated over time. A solid methodology can make maintenance much more comfortable; here’s how I do it.

  2. Critical CSS: what it is, why it’s useful, and how it works

    With Critical CSS, we can give our visitors the most important styling as early as possible and the rest when it’s ready. Here’s why and how to do it.