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

Personalizing Video Email for Marketing Campaigns With Cloudinary

As critical as it is to engage with shoppers in order to succeed in e-commerce, old-style, boring emails are far from being effective. In fact, they tend to be annoying because no one likes to read formulaic, generic messages that are sent en masse. For better results, rethink your email marketing campaigns and try out creative strategies.

Read more
Muted Videos and Subtitles

The bane of our existence is the lack of efficient ways for tackling the plethora of recurring tasks in our lives. One of those tasks is surfing the internet. We consume a lot of web content daily, of which a large percentage are images and videos. We’re constantly quickly scrolling through 30-second videos or checking out pictures of cute items we’d like to buy in our free time.

Read more

Building a Roommate-Matching App With Cloudinary and Jamstack

By Marcelo Ricardo de Oliveira
Building a Roommate-Matching App With Cloudinary and Jamstack

Roommate matching can be a pain—especially during the COVID pandemic when people don't want to meet in person. Matching apps like Flatmates, Roomster, and roommates.com are helpful, and if you're in the roommate-matching space, you know that great video is essential for those seeking roommates. Fortunately, Cloudinary can help.

Read more
How Cloudinary Set Up Its Podcast Webpage for ABR With the Cloudinary Video Player

Using a company’s software in-house was made famous by Microsoft’s adoption of the term “eating our own dog food” to refer to the request to employees to use the alpha and beta versions of their products. This story, “Drinking Our Own Champagne” refers to our serving videos created by our Customer Training team with the Cloudinary Video Player to implement a business initiative and enhance site performance.

Read more
Cloudinary Introduces Integration With the SFMC Builder

While managing marketing campaigns, you’ve most likely come across situations whereby a campaign must go live ASAP. Or, last-minute changes in the content, design, or brand guidelines emerge just before launch. In those circumstances, getting your creative team to generate new images or modify existing ones on a tear can lead to a lot of stress and missed deadlines. To help you navigate those rough waters, we are releasing an integration of Cloudinary with the Salesforce Marketing Cloud (SFMC) content builder.

Read more