Cloudflare AVIF support - Boost your image delivery!

0 min reading time

Introduction

Images compressed in AVIF usually take up half the storage space of JPEG and WebP. It uses the HEIF ISO standard and AV1 codec from Mozilla, Google, Cisco, and others. On the other hand, the CDN provider Cloudflare provides hosting and distribution services for websites to optimize content loading for the user.
On October 3, Cloudflare announced support for automatic AVIF image delivery. If we check web statistics, we can see that more than half of an average website size is occupied by images. We can also see that about 15% of websites are powered by Cloudflare, which gives Cloudflare a lot of leverage to speed up the web.

cloudflare stats

Optimizing images into the new AVIF image format is a critical milestone to make the web faster. Improved image compression can reduce bandwidth usage and improve web performance. Services and companies like Discord, ILovePDF, Hubspot, and Zendesk all use the technology provided by Cloudflare to function. We assume that you are on this page because you are using Cloudflare services and want to turn on AVIF support. Oh, and by the way, this post is not sponsored in any way. Let's see:

Cloudflare Support

Regarding their latest blog post about the AVIF file format, Cloudflare decided to support AVIF because of the following benefits:

  • fixes WebP biggest flaws
  • uses the next generation VP10 video codec
  • is not limited to 8-bit color depth and support 12-bit color
  • support high dynamic range
  • uses chrome-from-luma compression technique for smaller file size
  • is already seeing faster adoption than previous royalty-free codecs
  • is a feature-rich format with lots of possibilities
  • already has multiple independent implementations like rav1e

Business Plan

The Image Resizing feature converts images to the AVIF format. Unfortunately, this feature is not free but part of the Business Plan. Since a Business plan costs about $200 or more per month, this seems excessive for such a minor feature.

cloudflare pricing

However, in another comment section of the Cloudflare blog, Kornel Lesinski of Cloudflare said that automatically converting your images into the best variant for your users will eventually be part of their Pro plans in the future.
Pro Plans start at $20 per month and have a lot more features. Automatic selection of the best TCP settings, automatic mobile and image optimization, a better firewall, captchas, cache analytics, etc. This seems like an attractive investment for an emerging small to medium-sized business to get the last bit of performance out of your website.

Workers

Browsers with AVIF support add an image/avif note to their Accept request header. To request the AVIF format from the Image Resizing module of Cloudflare, simply set the format option to avif. Using a worker script, you can easily automatically detect and enable AVIF support:

1addEventListener('fetch', event => {
2  const imageURL = "https://yourdomain.com/image.jpg";
3  
4  const resizingOptions = {
5    width: 800,
6    sharpen: 1.0,
7  };
8  const accept = event.request.headers.get("accept");
9  const isAVIFSupported = /image\/avif/.test(accept);
10  if (isAVIFSupported) {
11    resizingOptions.format = "avif";
12  }
13  event.respondWith(fetch(imageURL), {cf:{image: resizingOptions}})
14})

The resizing is done via the options of a fetch subrequest within a worker. It could also be beneficial to dynamically operate more image functions based on the state of the network. Crisp images in 4K are still incredible if your visitors have a bandwidth that supports it, and you can still handle the large file size.

Picture element

In our Tutorial on how to use avif in HTML, we present you the <picture> element as the best option to serve AVIF files in an HTML environment. Cloudflare allows you to use their image optimization endpoint to perform the conversion if you do not want to use Workers.

1<picture>
2    <source type="image/avif" 
3            srcset="/cdn-cgi/image/format=avif/image.jpg">
4    <img src="/image.jpg">
5</picture>

Keep in mind that support for the AVIF image format is still missing. Still, vendors such as Apple for Safari have confirmed integration. Please do not hesitate to look at the sources below for additional information about Cloudflare and their AVIF support.
Likewise, we are not sponsored in any way, but we love to see companies push technology, which Cloudflare regularly does. They already have preliminary support for HTTP/3. Is there anything else you would like to know about avif? Do you have a good suggestion for an advanced worker script? Tell us on Justin's Twitter.

Profit from a faster website, higher ranking and better conversions.
Convert your images to AVIF for free.