AVIF vs All Other Image Optimization Formats

See how AVIF images beat JPG, PNG, and even WebP for best image compression, plus how they save hosting disk space and keep your backups small too.

As of April 2024, WordPress 6.5 fully supports the AVIF image format. All major browsers support it too. So, you’ll have full coverage with this image format, and no fallback images will be required as they were with WebP images.

Let’s have a look at the numbers and you’ll see what I mean.

Subscribe to the BlogAid YouTube Channel

Tutorial

Also see this tutorial Squoosh Image Optimizer with AVIF Images

A transcript is below the video

Transcript

Original Image

This is the original image I made in Midjourney of a strawberry pie slice.

It is in the original WebP format.

And I have it uploaded to Squoosh, which is my favorite image optimizer.

See this tutorial on how to use Squoosh to optimize your images.

File Sizes

On the right you can see the original files size is 416 KB.

WebP File Size

On the left, you can see how much more this image can be optimized by Squoosh while retaining the WebP format. With a quality setting of 75 and Effort of 4 passes, we can bring that file down to 32.5 KB.

Preview Comparison

On the preview, the left is the original image and the right is the optimized image.

If you look at the sugar coating, you can see that nothing got fuzzy with these settings.

Convert to Other Formats

Now, normally we wouldn’t convert to different formats from WebP, but we’re going to do that here just so you can see the difference in file sizes.

MozJPEG File Size

If we compress it using another of the modern image formats with Progressive render, such as MozJPG, with the Quality set at 80, which is as low as I could go and retain detail, the file size is 55.6 KB. Not as small as WebP for the original.

OxiPNG File Size

And if try to optimize as an OxiPNG, which is another modern image format, we don’t get much compression at all.

Even with an Effort of 4, the file size is 495 kB, which is bigger than the original.

AVIF File Size

Now let’s try the newest modern format of AVIF.

We can go all the way down to a quality setting of 50 and an Effort of 4 passes and still retain a good looking image.

And just look at that file size! It’s 20.1 KB.

Comparison Chart

I downloaded each of these Squooshed images, including 2 more for just regular jpg and png.

Here is a chart of those image sizes so you can see the sizes side by side.

As you can see, AVIF is the smallest, followed by WebP, then by MozJPEG.

WordPress Thumbnails

But the file size of the original is not all there is to it.

When you upload these images to WordPress, it will auto generate several thumbnails in the sizes your theme requires.

Let’s have a look at what happens with those file sizes.

WebP Thumbnails

I’ve uploaded the compressed WebP image.

And here we’re looking at the wp-content > uploads directory at my hosting.

Here is the original, full sized image.

And my theme is set to create 3 thumbnails in various sizes. The number of thumbnails and sizes you see will depend on your theme.

The original image is 800 x 448 px.

And you can see that the Large thumbnail display size is smaller, but the file size is actually bigger.

Then we have the other 2 thumbnail sizes.

Since WordPress 5.8, it has supported WebP by default and no longer creates fallback images unless your theme specifically calls for jpg or png.

MozJPEG Thumbnails

Now let’s upload the MozJPEG format.