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

Create Lightweight Sites With Low-Code and No-Code Technology

Consumers expect modern websites to be mainly visual. But, the more compelling and complex the related media is, the more data is involved, compounding the site’s weight. In today’s content-craving world, delivering unoptimized media can cost you because it leads to sluggish page loads, resulting in visitors abandoning your site in search of a faster alternative. In fact, a page load that takes more than three seconds can cause as many as 40% of your visitors to bounce. Given this competitive, digital-first environment, you can’t afford to lose page views, for time is of the essence.

Read more
A Blueprint for AWS-Secured Webhook Listeners for Cloudinary

tl;dr: An AWS-secured and optimized Cloudinary webhook listener for extending the Cloudinary service

Code: Github

A webhook is a communication medium for sending notifications from one platform to another about events that occurred. In place are user-defined HTTP callbacks that are triggered by specific events. When a triggered event takes place on the source site, the webhook listens to the event, collects the data, and sends it to the URL you specified in the form of an HTTP request.

Read more
New Accessibility Features for Cloudinary’s Product Gallery Widget

Cloudinary’s Product Gallery widget, which launched in 2019, has enabled many brands to effectively and efficiently showcase their products in a sleek and captivating manner, saving countless hours of development time and accelerating release cycles. By adding Cloudinary’s Product Gallery widget with its customizable UI to their product page, retailers reap numerous benefits, often turning visitors into customers in short order.

Read more
Why Successful Businesses Engage With and Convert Audiences With Visual Media

Most business buyers prefer to research purchase options online, as do many shoppers. No wonder online retail sales in the U.S. rose by 32.4% in 2020—an impressive gain of $105 billion.

For B2B and B2C businesses, text-heavy websites are no longer adequate in attracting shoppers. Instead, engaging visual media—spin images, videos, 3D models, augmented reality—are becoming a must for conveying eye-catching details and differentiators about products or services.

Read more
Making User-Generated Content (UGC) Shoppable With Cloudinary

User-generated content (UGC) is a powerful marketing tool. Not only does video complement marketing efforts for e-commerce by enabling customers to explore products in greater detail, but UGC also adds an element of trust. As a bonus, user-generated video is an exceptional opportunity for e-businesses to attract website traffic without their marketing team having to create promotional videos from scratch. User-generated content drives conversions and brand loyalty as a direct result of authentic interaction.

Read more