Do you benefit from Cloudwork's AVIF support?

01.10.20 · 8 min read
Images compressed in AVIF can be reduced to half the size of JPEG and WebP. It combines the HEIF ISO standard with the royalty-free AV1 codec from Mozilla, Google, Cisco, and others. Cloudflare on the other hand provides hosting services and distribution services to many websites to optimize the loading of content on the user's side. On the 3rd of October, Cloudflare announced support for automatic serving of AVIF images. Upon reviewing web stats, let's point out that more than half of an average website is spent on pictures, and that over 15% of all websites are powered by Cloudflare.cloudflare statsAllowing users to optimize images into the new AVIF image format marks a major milestone in making the web a faster place. Improved image compression can reduce bandwidth usage and improve web performance. Services and companies like Discord, ILovePDF, Hubspot and Zendesk all use the technological foundation that is provided by Cloudflare to function. We assume you are on this page because you are using Cloudflare services and would like to know how to turn on AVIF support. Oh, and by the way, this post is not sponsored in any way. Let's see:

Why Cloudflare supports avif

Regarding their latest blog post about AVIF, Cloudflare has made the decision to support AVIF for the following advantages:

Business & Pro Plan

The Image Resizing feature converts images to the AVIF format. Unfortunately, this feature is not available for free but is part of the Business Plan. Since a Business plan costs around $200 or more per month, this seems overkill for such a small feature.cloudflare pricingHowever, in another comment section on the Cloudflare Blog, Kornel Lesinski from 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/month and come with a lot more features. Things like automatically choosing the best TCP settings, automatic mobile and image optimizations, a better firewall, captchas, cache analytics, etc. For an upcoming small to medium-sized business, this seems like an attractive investment to get the last bit of performance out of your website.

Implementation with 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 auto-detect and enable support for AVIF easily:
1addEventListener('fetch', event => {
2  const imageURL = "https://yourdomain.com/image.jpg";
3
4  const resizingOptions = {
5    width: 800,
6    sharpen: 1.0,
7  };
8
9  const accept = event.request.headers.get("accept");
10  const isAVIFSupported = /image/avif/.test(accept);
11  if (isAVIFSupported) {
12    resizingOptions.format = "avif";
13  }
14  event.respondWith(fetch(imageURL), {cf:{image: resizingOptions}})
15})
The resizing feature is accessed via the options of a fetch() subrequest inside a Worker. It might also be beneficial to dynamically serve more image features based on the network's condition. Crisp-clear images in 4K are still incredible if your visitors have a bandwidth that supports it, and you can keep serving the large file size. Also, supported image formats are the only ones that can be resized.

The picture element

In our Tutorial on , 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 don't 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>
Remember that support for the AVIF image format is still missing, but vendors like Apple for Safari or Mozilla for Firefox have confirmed an integration. Please feel free to check out the sources below for additional information about Cloudflare and their avif support. Likewise, we're not sponsored in any way, however we love to see companies push technologies, which Cloudflare does regularly. They already have preliminary support for HTTP/3 as well. Is there anything else you'd like to know about avif? Got a good suggestion on an advanced worker script?

Related topics, websites and sources

Related Questions, tags and headlines

(image format)
(cloudflare)
(browser)
(image resizing)
(google)
(file size)
(safari)
(apple)
(bandwidth)
(header)
(video codec)
(request header)
(image compression)
(webp support)
(cloudflare workers)
(original image)
(Cloudflare supports the new AVIF image format in Image Resizing)
(Progressively delivering new image formats with CSS and Cloudflare Workers)
(Cloudflare Image Resizing adds support for AVIF images)
(Cloudflare Workers and AVIF Support)
(Cloudflare Image Resizing docs)
(AVIF, a next-gen image format for the web)
(Resizing with Cloudflare Workers)

Related articles

#html
How to get started with AVIF using HTML
Enjoy this in-depth guide on how to use AVIF in HTML. Featuring examples with modern delivery standards.
#css
Fully support AVIF in your CSS today.
Learn how to boost your website by using the new AVIF image format in the `background-images` of your CSS.
#NextJS
Start using AVIF in your Next.JS project
Curious to read on how to use AVIF images in Next.JS? Well, this site does exactly that! Learn more.
Profit from a faster website, higher ranking and better conversions.
Convert your images to AVIF for free.