AVIF

AVIF (AV1 Image File Format) is a modern image format derived from the AV1 video codec. Standardised in 2019. Compresses 20-30% smaller than WebP at equivalent visual quality.

Like WebP, AVIF supports both lossy and lossless modes, full alpha (transparency), animation, HDR, and wide colour gamuts. Unlike WebP it’s expensive to encode — encoders can take 10× to 100× longer than equivalent WebP encoding for the same input. Decoding is fast (the AV1 video decoder is well-optimised, including hardware acceleration on recent CPUs and GPUs).

Browser support as of 2026: ~93% globally. Chrome since 2020, Firefox since 2021, Safari since 2022. Older Android and Apple devices still miss out.

When AVIF is worth the encoding cost:

• Image-heavy sites where page weight is critical — e-commerce hero images, gallery sites, news media.
• CDN-delivered images where the encoding happens once at upload time.
• Mobile-first audiences on metered connections — the 20-30% bandwidth savings compound.

For most workflows, WebP is the easier default and AVIF is a worthwhile optimisation when you already have a build pipeline producing multiple format variants and shipping them via <picture> fallback.

Worked example

Take a 4000×3000 photograph from a modern smartphone. The original JPEG out of the camera at quality 85 is roughly 4.2 MB. Re-encoding the same image to WebP at quality 80 (visually equivalent) lands around 2.8 MB — a 33% saving. Re-encoding to AVIF at quality 60 (still visually equivalent because AVIF’s quality scale is lower-numbered for the same perceived result) lands around 1.9 MB — a 55% saving versus JPEG and 32% versus WebP. The encode time tells the other half of the story: JPEG encodes in ~50 ms on a modern laptop, WebP in ~300 ms, AVIF in ~3-8 seconds at the slow-but-high-quality preset. Decode times are roughly equivalent across all three because the AV1 decoder is well-optimised. For a single hero image displayed on a million page loads, the encoding cost is amortised once; for a user-uploaded gallery transcoded on-the-fly, AVIF may be impractical.

When and why it matters

AVIF matters whenever bandwidth costs (CDN egress, mobile-user data caps, Core Web Vitals) outweigh encoding time. The most common deployment is a build-time pipeline (Next.js Image, Cloudflare Polish, ImageKit) that produces AVIF + WebP + JPEG variants once at upload time and serves the best supported format per request via the <picture> element. For sites measured by Largest Contentful Paint (LCP) — a Core Web Vitals metric Google factors into search ranking — shaving 30% off hero-image weight directly improves the score on mobile. Skip AVIF when you need broad legacy browser support (sub-2022 Safari on iPad still fails), when you’re generating thumbnails on the fly without a queue (encoding latency blocks the response), or when the asset is already small (under 50 KB the absolute saving is tiny). Reference: web.dev — Use AVIF to compress images.

The Alliance for Open Media — why AVIF is patent-clean: AV1, AVIF’s parent codec, was developed by AOMedia (Google, Mozilla, Cisco, Intel, Microsoft, Netflix, Amazon, Apple as of 2018) explicitly as a royalty-free alternative to HEVC, whose patent licensing fragmented across multiple pools and made it commercially toxic for browser deployment. AVIF inherits the AV1 patent grant: anyone can implement, distribute, and serve AVIF without paying licensing fees. JPEG XL — a competing modern format with arguably better tooling for archival — has stalled in browsers partly because of unclear patent positions, while AVIF’s clean grant accelerated its adoption.

Recommended <picture> ordering: serve AVIF first (best compression), WebP second (broader support), JPEG/PNG last (universal fallback). The browser picks the first supported format and never downloads the others. <picture><source type="image/avif" srcset="hero.avif"><source type="image/webp" srcset="hero.webp"><img src="hero.jpg" alt="..."></picture>. Common mistakes: forgetting type= attributes (browser cannot skip without parsing), or putting the <img> fallback before the AVIF source (the browser stops at the first match). Related: WebP, lossy. Reference: AVIF Specification — AOMedia.