Cloudflare Adds AVIF Support to Image Resizing

Cloudflare's Image Resizing service now supports the AVIF image format. AVIF offers significantly better compression than older formats like WebP and JPEG — images can be reduced to roughly half the size. Given that images account for more than half of the average website's bandwidth, this can deliver substantial performance gains. Chrome desktop already supports AVIF, with other Chromium-based browsers and Firefox gradually adding support.

What AVIF Brings to the Table

AVIF combines the HEIF ISO standard with the royalty-free AV1 codec developed by Mozilla, Xiph, Google, Cisco, and others. It directly addresses the shortcomings of its predecessor WebP, which is over a decade old and based on the older VP8 codec. WebP is limited to 8-bit color depth and, in its best-compression mode, stores color at half resolution (chroma subsampling), causing smudged edges on saturated colors. AVIF supports 10- and 12-bit color at full resolution, along with high dynamic range (HDR).

AVIF also leverages a technique called chroma-from-luma, which uses the brightness channel to predict color information. Since these channels are typically correlated, this approach yields sharper edges and smaller files.

Adoption and Compatibility

WebP's adoption was slow — Safari added support a decade after Chrome. AVIF appears to be gaining traction faster. Chrome 85 already supports it, and active development is underway in other browsers. Apple, a member of the Alliance for Open Media that created AVIF, has not announced Safari support, but the AV1 codec already benefits from hardware decoding in current Nvidia, AMD, and Intel GPUs.

AVIF uses the same HEIF container as Apple's HEIC format, but with a key difference: HEIC relies on the patent-encumbered H.265 codec, which requires licensing from multiple patent holders in countries that recognize software patents. AV1 is royalty-free, and its backers — including Google, Netflix, and Amazon — have committed to defending it against patent trolls. The format already has multiple independent implementations: libaom, Intel SVT-AV1, libgav1, dav1d, and rav1e. Cloudflare chose rav1e for a pure-Rust implementation in its Image Resizing service.

Caveats and Trade-offs

AVIF lacks progressive rendering — images don't display until fully downloaded. Progressive JPEGs, by contrast, show a lower-quality version while loading, making pages feel faster. AVIF compensates with compression that can fully load at half of a JPEG's size, which also leaves WebP behind since it offers neither progressive rendering nor strong compression.

Encoding remains the biggest bottleneck. Creating a single AVIF image can take several seconds, though tiling enables parallel encoding across multiple CPU cores — an advantage Cloudflare leverages with its server hardware. Decoding is less demanding, and even low-end Android devices handle full-HD AV1 video without hardware acceleration. Image Resizing doesn't use AVIF's maximum compression level to speed up encoding, and cached images mean the encoding cost only surfaces on cache misses.

Benchmarking Concerns

Measuring lossy codec quality is tricky. All lossy codecs discard subtle details that the naked eye can't perceive, so file size alone isn't a meaningful comparison. The proper method is to compress images to identical file sizes and then compare actual visual quality. Differences in file size don't prove a codec is better — it may simply have been given more data to work with.

Enabling AVIF

Supporting browsers send image/avif in their Accept header. Set the format option to avif in Image Resizing requests to request the format explicitly.

addEventListener('fetch', event => {
  const imageURL = "https://jpeg.speedcf.com/cat/4.jpg";

  const resizingOptions = {
    // You can set any options here, see:
    // https://developers.cloudflare.com/images/worker
    width: 800,
    sharpen: 1.0,
  };

  const accept = event.request.headers.get("accept");
  const isAVIFSupported = /image\/avif/.test(accept);
  if (isAVIFSupported) {
    resizingOptions.format = "avif";
  }
  event.respondWith(fetch(imageURL), {cf:{image: resizingOptions}})
})

The script above auto-detects supported formats and serves AVIF when appropriate. For URL-based resizing, the <picture> element provides an alternative approach:

<picture>
    <source type="image/avif" 
            srcset="/cdn-cgi/image/format=avif/image.jpg">
    <img src="/image.jpg">
</picture>

This leverages the /cdn-cgi/image/… endpoint, and only browsers with AVIF support will use the alternate source. Cloudflare's format=auto option doesn't select AVIF yet, as the company prefers more testing before enabling it by default. AVIF support will also come to Polish, which converts images asynchronously in the background, fully masking encoding latency.