Introduction

In the ever-evolving landscape of web development, optimizing website performance while maintaining image quality is a constant challenge. One innovative solution gaining momentum is the adoption of AVIF (AV1 Image File Format) comes with file extension .avif. AVIF, a spinoff from the AV1 video format developed by the Alliance for Open Media, boasts impressive compression capabilities that can revolutionize your website's efficiency. In this blog post, we'll delve into the pros and cons of AVIF, explore ways to implement it, and discuss whether it's the right choice for your site.

What are the Pros and Cons of AVIF (Or .avif files)?

Images often constitute a significant portion of a webpage's total weight, making efficient image compression crucial for faster loading times. AVIF (or .avif) shines in this regard, delivering the same image quality as JPEG (or .jpg) but at a significantly smaller file size. According to HTTP Archive's Web Almanac, images make up nearly 75% of a page's total weight, making AVIF's compression capabilities a game-changer.

The same image (600×600) encoded with JPEG, WebP, and AVIF, spotlighting AVIF’s superior compression capability. (Photo by Amnon Cohen-Tidhar)
The same image (600×600) encoded with JPEG, WebP, and AVIF, spotlighting AVIF’s superior compression capability. (Photo by Amnon Cohen-Tidhar)

A comparison of the same image in JPEG, Google's WebP, and AVIF formats highlights AVIF's superior compression. This means faster page loading, reduced bounce rates, and improved user experience, all of which contribute to higher conversions and better SEO ranking.

Browsers Supporting AVIF Format (Source: CanIUse.com)
Browsers Supporting AVIF Format (Source: CanIUse.com)

However, it's essential to note that AVIF isn't universally supported yet. Safari, for instance, lacks AVIF support, and AVIF decoding can be resource-intensive on mobile devices. To harness the benefits of AVIF without compromising compatibility, a hybrid approach may be your best bet for now. AVIF is on par with the brand-new JPEG-XL format, which does not work on any browser yet.

Adopting AVIF (or .avif): How to Do It Right?

If you're considering adopting AVIF (or .avif files) for your website, there are several ways to implement it:

HTML srcset: You can set up srcset in HTML to serve AVIF images to browsers that support it while falling back to other formats for compatibility.

<picture>
  <source srcset="images/white_shoes.avif" type="image/avif">
  <source srcset="images/white_shoes.webp" type="image/webp">
  <img src="images/white_shoes.jpg" alt="White Shoes">
</picture>

Front.Space's auto-format parameter: Use Front Space's f_auto parameter in the image URL to automatically deliver AVIF (or .avif ) images to supported clients.

<img src="cdn.front.space/upload/f_auto/images/white_shoes.jpg" alt="White Shoes">

Configure Front Space's Media Optimizer: For automation and optimization, consider configuring FrontSpace's Media Optimizer to handle AVIF delivery.

💡
Keep in mind that AVIF encoding can be computationally expensive, especially for large images. Avoid using AVIF for images smaller than 5,000 pixels (70x70) and stick with formats like JPEG, WebP, or PNG instead.

Should I adopt AVIF for my Site?

The decision to adopt AVIF should be based on your website's specific needs and goals. AVIF offers a range of benefits, including accelerated page loads, enhanced user experience, reduced bounce rates, and improved SEO ranking, thanks to its bandwidth-saving capabilities. You can make a significantly better score on Google's Web Core Vitals meter as well

Analysis of the poor metrics on a bewakoof.com page, which takes a whopping 3.1 seconds to load the Largest Contentful Paint (LCP)
Analysis of the poor metrics on a bewakoof.com page, which takes a whopping 3.1 seconds to load the Largest Contentful Paint (LCP)

The larger the image, the more substantial the bandwidth savings. For instance, a 2-MP image in AVIF format can save over 100 KB compared to JPEG. This bandwidth economy can quickly offset the costs associated with implementing AVIF.

Low Performance Score for another e-commerce giant namely lenskart.com
Low-Performance Score for another e-commerce giant namely lenskart.com

The savings might be less significant for smaller images, requiring more views to justify the switch. However, AVIF's future-proofing and support for advanced features like HDR and Wide Color Gamut (WCG) make it a compelling choice for many websites.

To summarise, AVIF is here with a lot to offer:

  • AVIF is open source, royalty-free, and backed by industry leaders with a promise of acceptance and future enhancements.
  • Compared to the 30-year-old JPEG, AVIF can reduce the image size by an average of 40%-60%, save significant bandwidth, speed up load time, deliver an excellent user experience, and win a higher SEO score for the site.
  • Given its minimal view count, AVIF can mitigate the site’s operation cost.
  • AVIF yields high quality and supports advanced features like HDR and WCG.

If your site contains images, definitely give AVIF a try.