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.Allowing 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.However, 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:
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.
, 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.
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?
