Cloudinary Blog

How to Adopt AVIF for Images With Cloudinary

Adopting New Image Format AVIF With Cloudinary

AVIF is a new image format for the web. Before I tell you all about it, let me show you what AVIF can do.

One way to compare image codecs is to encode the same image in different formats at matched file sizes and then compare the visual quality of the resulting images. For example, I rendered the AVIF below with a q_50 quality transformation. It weighs 12.3 KB and, compared to the lossless original it looks pretty good subjectively.

Matched filesize

Original

 
 

JPEG

File size
12.3 KB
SSIMULACRA
0.04442

WebP

File size
12.5 KB
SSIMULACRA
0.03681

AVIF

File size
12.3 KB
SSIMULACRA
0.02616

Photo credit: Aloïs Moubax

My favorite image-quality metric is SSIMULACRA. Lower scores are better; 0.01 is just about perfect and 0.1 is awful. SSIMULACRA gives the AVIF a score of 0.026, compared to the original. Pretty good!

I then rendered a WebP and a JPEG at the same file size. They look worse. SSIMULACRA gives the WebP a 41%-worse score than the AVIF; it gives the JPEG a 70%-worse score than the AVIF. Those numbers agree with my subjective judgement: the AVIF looks good; the WebP is borderline; and the JPEG is so full of artifacts that it's unusable. All for the same 12.3 KB cost. Without question, AVIF gives you more bang for your byte.

Another good way to compare codecs is to render an image at a fixed quality and then compare the resulting file sizes. Here’s an example:

Matched quality

Original

 
 

JPEG

Transformation
f_jpg,q_auto 
File size
64.7 KB
SSIMULACRA
0.01648

WebP

Transformation
f_webp,q_auto
File size
48.6 KB
SSIMULACRA
0.01553

AVIF

Transformation
f_avif,q_auto
File size
31.6 KB
SSIMULACRA
0.01883

Image credit: Studio Ghibli, “Spirited Away”

After rendering all three images with q_auto, I saw that their SSIMULACRA scores were all in the same ballpark. And they all look fantastic when presented at 2x, more or less indistinguishable from the original.

The file size differences are stark, however. The WebP is 25% smaller than the JPEG, which is impressive enough, until you see that the AVIF is half the size of the JPEG.

In Cloudinary’s initial tests, AVIF typically compresses more efficiently than JPEG by around 50%. Converting to AVIF with Cloudinary only involves adding the f_avif transformation parameter to your URLs. We’ve supported AVIF since it first shipped in a browser—in Chrome last August—and have been improving our implementation ever since.

Want to know more? Read on.


Sign up for Cloudinary free today!


Where Did AVIF Come From?

AVIF originated from the AV1 video codec. Here’s the background:

The patent minefields surrounding MPEG’s H.265 codec (aka HEVC) drove the world's top tech companies to form a consortium called the Alliance for Open Media to come up with a royalty-free-forever alternative. And lo, in 2018, the AOM released the AV1 video format.

To build a next-gen video codec, one of the things you must do is create a next-gen image codec to encode the key frames. And, as long as you already have an image codec that handily outperforms the status quo just kicking around inside your video codec, it's not too much trouble to split it off, wrap it up, and release it as a stand-alone image format.

That was what Google did with VP8 when the company created WebP. Similarly, iPhones now capture and store images with High Efficiency Image File Format (HEIF) containers around HEVC keyframe payloads, aka HEIC files.

A few of the companies behind AV1 came up with the idea to use the HEIF container with AV1 keyframe payloads, thus creating the AV1 Image File Format (AVIF for short).

What's AVIF Good For?

Just about everything!

Deciding which format to adopt for a given image on the Internet used to be pretty complicated. You had to determine whether the image contained any transparency (which ruled out JPEG), and whether its content was “photographic” (with continuous tones and fuzzy edges, in which case JPEG or WebP would be your answer). If the image contained lots of sharp edges and flat colors instead, you’d adopt PNG or lossless WebP, which is very different from regular WebP—did I mention that the process was complicated?

AVIF supports transparency, accommodating both sharp-edged and continuous-tone imagery. No matter what the input looks like, AVIF significantly outperforms WebP, JPEG, and PNG.

Also! Unlike WebP, JPEG, and PNG, AVIF works well with 10-bit bit depths, which is a necessity for HDR and wide-gamut imagery.

The one thing AVIF does not excel at is lossless compression. But you don't really need that for the web.

As other new image formats emerge, their strengths, weaknesses, and feature sets might recomplicate things. But for now, AVIF is the only next-gen format that enjoys support from a shipping browser, and it consistently beats the web’s other image formats by a wide margin.

Can I Adopt AVIF for Images?

Yes!

Desktop Chrome shipped AVIF support last Fall, and Firefox will ship AVIF support next week. Mobile Chrome will be on board in early March and, when that happens, most web traffic will come from browsers that work with AVIF.

Safari remains mum, but given that HEIC's patent story is web hostile and that Apple is a founding member of the Alliance for Open Media, the odds look good.

How Do I Do That?

While you wait—for years—for universal support for AVIF and for nonsupporting browser versions to vanish from the scene, the only responsible way to serve AVIFs on the web is with fallbacks:

Copy to clipboard
<picture>
  <source type="image/avif" srcset="dog.avif" />
  <source type="image/webp" srcset="dog.webp" />
  <img src="dog.jpg" alt="A dog chasing a ball." />
</picture>

To actually generate the little guys, you have a couple of options:

First, you can encode AVIFs with the amazing Sqoosh app, manually tuning them for a tradeoff between optimal quality and file size.

Or, on Cloudinary, add f_avif,q_auto to the URLs and let the platform figure out the details. For example:

Copy to clipboard
https://o.img.rodeo/image/upload/f_avif,q_auto,w_800/dogs/7

You might notice that encoding AVIFs with Squoosh is slow.

In fact, with certain encoding settings, the open-source libraries in Squoosh can spend a whopping 50x the effort encoding an AVIF versus a JPEG. Spending 10 full seconds encoding a single image goes against Cloudinary’s on-the-fly transformation experience. Hence, instead of an off-the-shelf, royalty-free codec, Cloudinary leverages the best proprietary codec available. We recently switched over to Visionular’s best-of-breed encoder, which is significantly more efficient.

Last, we’re working on integrating AVIF into f_auto. If all goes as planned, we'll release beta support for serving AVIFs in response to f_auto requests soon. If you’re interested in being a part of this beta, contact us please.

Why Not Go Ahead?

If your URLs contain f_auto,q_auto transformations, you’ll be able to reap the huge benefits of AVIF soon with no implementation effort at all.

If you just can’t wait to start delivering images that are half the size of JPEGs, opt for AVIF by adding f_avif,q_auto to your URLs and delivering them—along with the appropriate fallbacks—using the <picture> element.

In short, AVIF is here and it’s great. The easiest way to adopt it is with Cloudinary. Go right ahead.

Recent Blog Posts

How to Use the Cloudinary Media Editor Widget

At Cloudinary, we manage the entire pipeline of media assets for thousands of customers of varying sizes from numerous verticals.

As part of our commitment to support the entire flow of media assets, we are now introducing an intuitive media editing widget: an out­-of­-the-­box, interactive UI providing your users with a set of common image editing actions for immediate use on your website or web app. The widget is interactive and simple, built on Cloudinary's transformation capabilities, and requiring only a few lines of code to integrate. Afterwards, you can seamlessly and effortlessly add content to your site or app with no need for in-house image editing capabilities.

Read more
Shoppable Video Is Becoming Popular in E-Commerce

As pandemic restrictions necessitated, many shopping trips in 2020 took place outside the traditional brick-and-mortar store, or at least void of the physical aisle-browsing experience. Same-day curbside pickup became a safe and convenient alternative, and e-commerce transactions skyrocketed as consumers shopped online. In fact, Digital Commerce 360 estimates that, compared to 2019, e-commerce transactions grew by more than 40% last year.

Read more
Enhance Your Travel Site With Cloudinary in Anticipation of a Return to New Normal

Read more
The Benefits of Headless DAMs

Headless is not a buzzword anymore. In fact, the concept of headless architecture is gaining momentum due to the flexibility it offers for composing new experiences and for tackling the undue complexity of an ever-evolving technology stack. That’s because while the evolution of the martech landscape has enabled disruptive, digital innovations, the approach of buying point solutions for solving specific challenges can expose companies to the complicated nature of new technologies, systems, and platforms.

Read more

Building Display Ads With Transparent Video

By Afzaal Ahmad Zeeshan
Build Web Ads With Transparent Video to Attract User Engagement

Billions of views on the Internet every day drive one of the biggest industries on the planet: advertising. The sheer size of that market and the competitive nature of vying for consumer attention results in a constant need for innovation. Readers are jaded, and display ads are blind spots.

Read more