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, Cloudflare provides hosting and distribution services for websites to optimize the loading of content 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 Support
Regarding their latest blog post about AVIF, 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 small feature.
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. For an emerging small to medium-sized business, this seems like an attractive investment 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
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})
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>Likewise, we are not sponsored in any way, but we love to see companies push technology, which Cloudflare does regularly. 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.