{"id":22551,"date":"2021-11-29T16:29:50","date_gmt":"2021-11-29T23:29:50","guid":{"rendered":"http:\/\/the_roi_of_adopting_avif_for_websites"},"modified":"2025-02-25T15:46:55","modified_gmt":"2025-02-25T23:46:55","slug":"the_roi_of_adopting_avif_for_websites","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/the_roi_of_adopting_avif_for_websites","title":{"rendered":"The ROI of Adopting AVIF for Websites"},"content":{"rendered":"

AVIF is a 2019 spinoff from the AV1 video format developed by the Alliance for Open Media (AOM), whose members include Amazon, Apple, ARM, Facebook, Google, Huawei, Mozilla, Microsoft, Netflix, and Intel. As an open-source and royalty-free video codec, AVIF delivers much higher compression rates than the older image codecs like JPEG and WebP, and is on par with the brand-new JPEG-XL<\/a> format, which does not work on any browser yet.<\/p>\n

Capable of reducing approximately half of the image weight, AVIF impressively shrinks webpage sizes and accelerates downloads. However, the format still does not enjoy universal support by browsers, and encoding AVIF images is costly.<\/p>\n

AVIF uses the generic High Efficiency Image File (HEIF) format<\/a> as a container for a subset of the AV1 bitstream. Because each AVIF file can contain a single or sequence of images, the format can also replace animated GIFs. AVIF supports High Dynamic Range (HDR); extended color spaces, i.e., Wide Color Gamut (WCG); monochrome images; as well as multichannel and multilayer images.<\/p>\n

In addition to describing AVIF\u2019s strengths and weaknesses, this post discusses if and where you should adopt AVIF.<\/p>\n

Note:<\/strong>

If your images are viewed more than 30 times on supported devices (Chrome, Edge, FireFox, etc.), AVIF can save you money. The easiest way to add AVIF to your site is with Cloudinary\u2019s Media Optimizer<\/a>, which automatically delivers AVIF to the appropriate clients and, where AVIF is not yet supported, serves the best of WebP, High-Efficiency Image File (HEIC), J2K<\/a>, or plain old JPEG images instead.<\/p><\/div>\n

What Are AVIF\u2019s Pros and Cons?<\/h2>\n

According to HTTP Archive\u2019s Web Almanac<\/a>, \u201cimages comprise almost 75% of the total page weight.\u201d AVIF can deliver the same image quality at a much smaller size, saving over half of the weight compared to the popular JPEG format and about 40% of a WebP image. Since slow page loads tend to cause abandonment by viewers and reduce conversions, you should definitely serve AVIFs to reap the benefits of higher performance with no quality loss.<\/p>\n

\"Compare<\/p>\n

The same image (600×600) encoded with JPEG, WebP, and AVIF, spotlighting AVIF\u2019s superior compression capability. (Photo by Amnon Cohen-Tidhar)<\/p>\n

Source images: Jpeg<\/a>, WebP<\/a>, and Avif<\/a><\/em><\/p>\n

\"Can<\/p>\n

Source: https:\/\/caniuse.com\/<\/a><\/em><\/p>\n

On the other hand, despite its rising popularity over the past year, AV1 has yet to win support on Safari, which relies on the OS rather than WebKit for decoding images<\/a>.\nAdditionally, since AVIF decoding consumes a lot of CPU and battery, mobile devices are taking a while to jump on the AVIF bandwagon.<\/p>\n

So, for now, to leverage AVIF\u2019s superior compression capabilities, deliver first-rate user experience, and save bandwidth, go hybrid instead.<\/p>\n

How Do You Adopt AVIF?<\/h2>\n

You can implement AVIF in one of the following ways:<\/p>\n