Why the Avif Image Format Matters (And What Imagify Plans Are)

Have you already tried Avif — the latest powerful image format? At Imagify, we’ve started to get questions about why our plugin doesn’t support it (spoiler: yet). 

In this article, you’ll discover why Avif can be a game-changer for image optimization and where it stands in comparison to the most popular formats, such as JPG and WebP. And, of course, you’ll learn more about Imagify’s plans to support Avif.

What’s the Avif Image Format?

Avif is an image format based on the AV1 video codec — it compresses images with AV1 in the HEIF (High-Efficiency Image File) file format. In plain English, it means that images get compressed at their best — they’re lighter than ever in size while keeping the same quality. Such a powerful compression goes along with other important features such as HDR (High Dynamic Range) support and 12-bit color resolution. 

And there’s more.

Avif is open-source software, and it’s royalty-free — it means that if you want to use it for any image compression project or business, you don’t have to pay anything.

Avif has been developed by many tech giants such as Google, Amazon, Cisco, Netflix, and many more. The reason is simple. These companies are extremely interested in developing and spreading a high-quality image format that doesn’t need too much bandwidth — it’s how more and more people can consume content on their devices.

Given its outstanding performance, Avif seems to be the perfect replacement for the heaviest formats such as JPEG and WebP. Until a while ago, there was only an issue: browser compatibility.

Which Browsers Support Avif

For a long time, only a small portion of browsers supported Avif. In other words, most users would not be able to view any photos in the Avif format. As of October 2021, things are different. Now, Avif is supported by Firefox, Chrome, and Opera. Overall, 67% of users can benefit from the format. 

And that’s why it’s time to start taking Avif into serious consideration for image performance optimization.

Comparing Performance: Avif vs. WebP (and Other Formats)

We mentioned how the Avif format offers the best compression on the market and keeps a high quality of the images. Let’s run an image performance comparison and see how Avif stands versus formats such as JPEG and WebP.

We’ll use Squoosh, a web app that easily compares different formats. 

Let’s take one of the heaviest image formats as a starting point and see how the other formats perform. We chose a PNG image with a 15.6 MB original size and measured the difference between the original size and the conversion to the JPG format. 

The conversion from PNG to JPG shows a reduction of 92%. The image size is now 1.20 MB. Since JPG is not the lightest format ever, and we know it, we couldn’t expect more than this.

What about WebP? We ran the comparison again. This time, the PNG image has been compressed by 95%. The image size is now 704 KB. Given the initial size (15.6 MB), it’s a great result  — and it’s difficult to see any drop in the image’s quality. After all, WebP is the image format you should use on WordPress. 

We then ran the comparison again and found out that the Avif format lives up to performance expectations.

The image size has been reduced by 98%. It’s just 261 KB — and it’s still hard to notice any difference in the image’s quality.

Here’s the full recap of the comparisons we ran. It shows how Avif can reduce your images’ size. 

And now you may be wondering: why Imagify doesn’t support Avif? This brings us to the next section.

Why Imagify Doesn’t Support Avif (Yet)

Jean-Baptiste Marchand-Arvier, Co-Founder and CEO of WP Media, explains: “Avif was released as an experimental format, and a very tiny percentage of browsers supported it. What’s more, Avif went through some issues due to the encoding time. At first, encoding would take several seconds per image, which is extremely slow. As a comparison, compressing images on Imagify usually takes less than 100ms. Since then, there’s been a lot of work to improve performance”.

As you can see in the screenshot below, encoding time is getting better and better:

Jean-Baptiste goes on: “In addition to the improvements in the encoding time, now more browsers are supporting Avif. And this format is extremely interesting for two reasons: it supports alpha channel (transparency), so it can be used as a replacement for PNG, and it supports animation to be used as a replacement for GIF.

Here’s why Imagify will certainly support Avif in the short future”. 

And he adds: “We will probably replace WebP with Avif. Otherwise it may be too complex or confusing for our users”.

If you’re wondering what it means, here’s some context. 

WebP was released in 2010, more than 10 years ago. Nonetheless, it’s still not fully compatible with browsers and operating systems. The only partial compatibility entails two things. As a website owner, you still need to handle 2 different formats: the “classic” one, such as JPG or PNG, and the more performing one, such as WebP or Avif. On the other hand, image optimization plugins, such as Imagify, need to store on their servers both formats.

“From a user perspective,” says Jean-Baptiste, “it means that a new format such as Avif won’t help at the end to replace JPG or PNG — they’re going to stay. However, converting these formats to Avif will help improve image performance, and that’s why Avif will replace WebP at some point. Users won’t need both formats. And we want to keep the plugin as simple as possible”.

WebP is Still a Great Way to Optimize Your Images

So, you can’t already convert your images to Avif with Imagify — but you can always convert your images to WebP and boost your image performance right now. 

More than 90% of users worldwide will be able to see your images converted in the WebP format, so it’s still a great option to make your photos lighter and optimize your site performance.

When running a PageSpeed Insights audit, you may have come across the performance recommendation about serving images in next-gen formats. Well, WebP is exactly the next-gen format that Google recommends alongside Avif. It’s all you need to make your images load faster.

We ran a test and created three pages. Each page only contains the image in a specific format: PNG, JPG, or WebP. 

When running the PageSpeed Insights audit for the page including the PNG image, we got a red flag about the next-gen format recommendation. You can see how the estimated saving is huge: 1,076.7 KB. 

The same goes when testing the page with the JPG image. The performance got slightly better, and we got an orange flag. Still, there’s room for improvement — a potential saving of 16.8 KB.

It doesn’t come as a surprise that the recommendation becomes a passed audit when we converted the image to WebP with Imagify and created a dedicated page:

We got the same result when testing the page with the Avif image:

So, WebP and Avif deliver the same great result. What’s more, the PageSpeed Insights score is pretty much the same:

Performance Score – WebP Page	Performance Score – Avif Page

We also tested the difference in image size and bytes between the WebP and the Avif pages. And we couldn’t notice a huge difference either:

As you can see, WebP and Avif are pretty similar in delivering outstanding image performance. 

On the one hand, Avif offers a slightly better optimization. However, unless your site has thousands and thousands of images, your performance will be excellent using WebP — also because this is still the most common next-gen format.

What’s more, with Imagify, converting your images to the WebP format is easy and faster than ever, thanks to the new faster compression that allows you to convert your images in no time.

Here’s what you should do:

1. Download Imagify for free
   
2. Go to Settings >  Optimization > WebP Format and check both boxes:

3. Convert your images (and take advantage of the bulk optimization):

That’s it. It’s so simple — yet effective!

And you can choose the plan that suits you best. 

You can optimize 20 MB of images per month for free, or you can choose between the Growth Plan (500 MB for $4.99 per month) and the Infinite Plan (unlimited images for $9.99 per month). No matter what plan you choose: you can install Imagify on an unlimited number of websites.

Start optimizing your images with Imagify, and let us know how your performance improved in the comments.