AVIF Support Arrives—And With It, New Trade-Offs

AVIF is suddenly everywhere, thanks to Jake Archibald’s write-up. While the format is new to many of us, browser support has quietly reached the point where you can start shipping it today—provided you’ve structured your images with <picture> and fallbacks in mind. For those who have, slipping AVIF into the mix means supporting browsers get the new format, and everyone else simply gets what they had before:

<picture>
  <!-- use if possible -->
  <source type="image/avif">

  <!-- fallback -->
  <img alt="Hut in the snow" src="snow.jpg">
</picture>

The easiest way to experiment is Squoosh, which Jake has updated with AVIF support. CodePen has it too—fork Shaw’s original Pen and play with the Pug markup to swap sources. If your images live on CodePen’s Asset Hosting, conversions happen automatically through a Cloudflare Worker that now handles AVIF. Just be ready for slower first responses: generating AVIF encodings is noticeably heavier work, though subsequent requests pull from cache.

Size Isn’t a Simple Win

AVIF’s compression is not universally better. Feed it an already-compressed JPEG and the resulting AVIF can more than double in file size. There’s real risk of making pages slower if you apply it indiscriminately. And unlike the shift to WebP—which nearly always came out smaller and let you rely on simple logic like if (webp_supported) { use_webp }—AVIF wins are conditional. Sometimes the compression is tighter, sometimes it isn’t, and the visual output differs due to how the format encodes data. Smaller files won’t matter if the look doesn’t pass muster.

Automatic Picking Still Has Gaps

The ideal workflow remains an image CDN that handles selection for you, something like a ?format=auto&quality=auto endpoint that never returns a worse result than the original. That requires both smart defaults and manual overrides for cases where the automatic choice misses. Cloudinary doesn’t support AVIF in its auto-formatting yet. It probably will soon, but the complexity involved suggests it won’t be a quick add—getting the trade-off between size and quality right for every image type is genuinely hard.