In part 1 of our PageSpeed Optimization: Get Faster Loading Images article, we talked all about WebP, what it is, and how to implement it on your site. Another next-gen image format that is gaining popularity due to its compression capabilities, without sacrificing image quality is AVIF.
AVIF is an open sourced, royalty-free image format based on the AV1 video codec developed by the Alliance for Open Media (AOMedia) in collaboration with Google, Cisco, and Xiph.org.
With AVIF, images are compressed and made smaller, while retaining the same quality of the original image. AVIF offers the best compression in the market, while still keeping the quality of the images high. It supports any image codec and significantly reduces file size compared to JPEG, PNG, and even WebP.
Compared to JPEG, AVIF is 50% less in size, and as compared to WebP, it is 20-30% less file size, with no quality loss.
AVIF has been developed by a lot of companies such as Google, Amazon, Cisco, and Netflix, among others. These companies are developing the format because of their need for high-quality images that do not consume too much bandwidth. Netflix even claimed that AVIF is far superior to JPEG, PNG, and WebP, and is currently serving it for their image thumbnails.
The AVIF image format supports these following features, making them potentially better compared to other image formats:
Though the AVIF image format has a lot of advantages, the main disadvantage it has is its availability and browser support.
As of writing (November 2021), AVIF is supported by Firefox, Chrome, Android, and Opera. As of the moment, Microsoft Edge and Safari does not support the image format. However, if you are a Microsoft user, there is an available add-on that you can download that provides support for it. In addition, Firefox does not yet support animated AVIFs.
WebP and AVIF are both next generation image formats that are both recommended by Google in their PageSpeed Insights tool. WebP is much older compared to AVIF and was developed by Google themselves. It is also much commonly used and is supported by more web browsers compared to AVIF.
AVIF, however, is much smaller and renders faster compared to WebP. In fact, it is around 20-30% less compared to WebP. The only downside to AVIF is that, it is not as widely supported at this time, compared to WebP.
The outlook for AVIF is bright though as support for Edge and Safari can come faster as it is seen as a very promising image format.
Aside from those main factors to consider, here are some more differences between AVIF and WebP to consider:
Both WebP and AVIF has advantages and disadvantages over the other. When it comes to which one to choose between the two, it would mainly be up to your preference, what kind of site you have, and which would provide you the most benefit.
There are a couple of programs and apps that you could use to convert your images to AVIF. One that is recommended is Squoosh, which is an image compression Web App that was developed by the Google Chrome Labs team themselves. Other programs to use are GIMP and Microsoft Paint. Unfortunately, Photoshop does not support it as of this time.
Since AVIF is still quite the new technology and is not yet fully supported in all browsers, when it comes to implementation, there are two main ways to serve the format – through the picture element and through content negotiation.
This is used so that if the browser used does not support AVIF, it will display another image type, instead.
Here is an example of the code that you could add to the <body> tags in your page.
<picture>
<source srcset=”images/example.avif” type=”image/avif”>
<source srcset=”images/example.webp” type=”image/webp”>
<img src=”images/example.jpg” alt=”description of example image”>
</picture>
Content negotiation allows the server to serve formats based on what is supported by the browser. Browsers that support a specific format can announce it by adding the format to their Accept Request Header. For example, the Accept Request Header for images in Chrome is:
Accept: image/avif,image/webp,image/apng,image/*,*/*;q=0.8
The code to check if AVIF is supported in the fetch event handler can look something like this:
const hdrAccept = event.request.headers.get(“accept”);
const sendAVIF = /image\/avif/.test(hdrAccept);
You can use this value to serve AVIF or any other default format.
Another option is to use a CDN that supports AVIF. If you host your images on Cloudflare, this should not be a problem as they have added support for it.
If your site is in WordPress, there are plugins that you could use that could help you serve AVIF images to browsers that support it and for those that are not supporting it, would use other image formats instead.
Examples of these plugins include Shortpixel, Imagekit, Cloudinary, ImageEngine, among others.
More and more next generation image formats are coming up as companies seek to improve web performance and improve on previous image formats and their limitations.
Both WebP and AVIF are next gen formats that are recommended by Google to help speed up your site and improve user experience.
At the end of the day, both have advantages and disadvantages, and it would be up to you, as a site owner and business owner to decide which is your preferred format that would best serve your site and your visitors/customers.
When it comes to speeding up a site while still providing quality images, both formats are great options, in comparison to the more common formats like JPEG and PNG. We’ve both tested JPEG vs PNG to see if there is a preferred format and we found that there is none, and that it really boils down to page speed. Check out our test on that for more details.
If your goal is to speed up your site, in order to gain rank, image compression is just one factor to work on and going for either WebP or AVIF is just one step towards that. We hope that through these two articles, you now have a better idea of which new generation image format to go for.
For more information and tips on how to optimize your images, check out our Image Optimization article.
Before you can receive free updates, link building strategies or SEO tips you need to confirm your email right now.
(It’s easy)
Just go to your inbox, open the confirmation email from the SIA, and click the link.
And that’s it!
PS: If you don’t see a confirmation email, please check your spam/junk or promotions folders. Sometimes the confirmation message ends up there by mistake.
Obtenez nos 7 études S.I.A. les plus controversées qui feront trembler la tête même les SEO les plus avancés d’incrédulité.
De plus, nous vous alerterons lorsque nous publierons de nouveaux tests au public.
Obtenga nuestros 7 estudios S.I.A. más controvertidos que harán que incluso el SEO más avanzado sacuda la cabeza con incredulidad.
Además, le avisaremos cuando publiquemos nuevas pruebas al público.
Get Our Most 7 Controversial S.I.A. Studies That Will Make Even the Most Advanced SEO Shake Their Head in Disbelief.
Plus we will alert you when we publish new tests to the public.
