Improve your website loading speed by using AVIF images

AVIF is an image format that’s been here for some time, but recently browsers added support for it. AVIF images can be up to 300kb smaller in size compared to WebP.

Images are usually the most time-consuming resource on your website. Someone probably told you that you can resize and compress the image to get the same quality for half a size. Probably you are using some compressing online tool like tinypng.com to compress the images before uploading them to your website. Or maybe not even that? 

Well, you can do better than that with the new image format that all the popular kids are using. It should be the successor of WebP, and in a way, I think it is.  AVIF stands for AV1 Image File Format (AVIF) and as per sources from Wikipedia:

In a number of tests by Netflix in 2020, AVIF showed better compression efficiency than JPEG as well as better detail preservation, fewer blocking artifacts, and less color bleeding around hard edges in composites of natural images, text, and graphics.

I do have trust in a big company like Netflix that they tested it thoroughly, but in addition to that, I wanted to create my own test. So I went to the unsplash.com and downloaded one image, that I wanted to use as the featured image for my blog post. I’ve used the highest possible resolution and got the image in the JPG file format.

Now these results are incredible. Yes, I know that I’ve used a big image, and yes for .png I know that I converted a large jpg image to the .png and that created a lot of unnecessary size, but I wanted to stress test this. Personally the results blow me away.

Of course, all the major browsers support this except Edge. Alex Russel Microsoft Partner PM on the Edge team and a Blink API owner has provided an update. It is a licensing issue holding things up. So hopefully they will clear things up and this can be widely used, until then we can use AVIF images in the other browsers.

Like you would convert any other image to any other format. With an online tool.😄 I am kidding, you can use whatever you’d like to accomplish this. For the test you’ve seen above I’ve used this converter.

In order to use it on our website, we of course need an image in AVIF format. WordPress as the most popular CMS in the world already has a couple of plugins in its arsenal that can do the conversion for you. But I am still old school when it comes to this, I am doing it manually myself. Then I just upload the images to the wp media section and that’s it.

<img src="./assets/test.avif" alt="avif" width="800" height="600" />

If you want to get your hands a bit more dirty, tools like ImageMagick and FFmpeg are a good starting point. Regarding the usual HTML page and avif format, it works just as any other image would.

If you try to upload an AVIF image to wp like any other image. It’s going to show you this error.

“Sorry, this file type is not permitted for security reasons.”

Now as I said before AVIF is supported but as you probably know WordPress is late with the updates. For example, it added support for WebP in the 2021 version 5.8, even though WebP was there for quite some time.

/**
 * Add AVIF images support
 *
 * @param [type] $mime_types
 * @return void
 */
function allow_modern_images($mime_types)
{
  $mime_types['avif'] = 'image/avif';
  $mime_types['avifs'] = 'image/avif-sequence';
  return $mime_types;
}

add_filter('upload_mimes', 'allow_modern_images');

So crack open your favorite text editor, open the functions.php for your website, and paste the above code inside. Save it, and upload it to your website. Refresh the page and try that upload again. Like clockwork, right?

Same thing as with the images, but much better. It’s not only that the GIF (488.42KiB) is much “heavier” than the AVIF (91kb), but it’s also better, there is no noise, and colors look more accurate. It’s almost like you are watching a gif and a video. Let’s look at the examples below.

In all the test scenarios that we ran, AVIF beats any format easily, we just need to wait for Edge and Microsoft to adopt this format which should hopefully be soon, and we can start using this format instead of the ones that we are using now. This will change everything since it doesn’t only impact the SEO and UX, but also the complexity of building the website. Maybe we won’t need lazy loading anymore, or srcset, etc.