AVIF has quietly become the default modern image format for serious web work. If you have run a Lighthouse audit recently, you have probably seen its name: “Serve images in next-gen formats.” If you have visited a major site in the last two years and inspected the network panel, you have likely seen .avif files quietly replacing the JPEGs and WebPs of the previous decade. This guide is a practical starting point for anyone curious about why that shift is happening and how to participate in it.

What AVIF Actually Is

AVIF stands for AV1 Image File Format. It is an image container that wraps a single still frame compressed with the AV1 video codec. AV1 itself was developed by the Alliance for Open Media — a coalition that includes Google, Mozilla, Netflix, Amazon, Apple, Microsoft, Meta, and Intel — explicitly to be a royalty-free successor to HEVC. AVIF inherits both AV1’s compression efficiency and its open licensing.

Reusing a video codec for still images may sound odd, but it is the same trick HEIC pulled with HEVC and WebP pulled with VP8. Modern video codecs absorb the bulk of the world’s compression research, and image formats riding on top of them benefit from the spillover.

The format is just three layers stacked on top of each other:

flowchart LR
    A["Image pixels"] --> B["AV1 keyframe<br/>(video codec)"]
    B --> C["HEIF container<br/>(metadata, color, alpha)"]
    C --> D[".avif file"]

Each layer does one job: AV1 compresses the pixels, HEIF wraps them with the boring-but-essential metadata (color profile, transparency, EXIF), and the .avif extension tells the operating system what’s inside.

Why It Matters

Three reasons AVIF is worth caring about:

  1. Significant compression gains. AVIF typically produces files 30–50% smaller than JPEG at equivalent visual quality, and 15–25% smaller than WebP. On a content-heavy page, that translates directly into faster load times and lower CDN bills.
  2. Royalty-free. Unlike HEIC (which is encumbered by HEVC patents), AVIF carries no licensing fees. Browsers, encoders, and decoders can ship it freely. This is the single biggest reason it has spread to non-Apple platforms while HEIC has not.
  3. Modern feature set. AVIF supports HDR, wide color gamut (BT.2020), 10- and 12-bit depth, transparency, and animation. JPEG supports none of these.

For most websites, the practical pitch is simpler: smaller images, same perceived quality, no patent concerns.

(See HEIC vs JPEG vs WebP vs AVIF for a side-by-side comparison of all four formats.)

A photographic example encoded as AVIF
A 1114×760 photograph encoded as AVIF — 39 KB. The same image as JPEG at perceptually equivalent quality is 92 KB, more than 2× the size.

The image above is a real .avif file, not a static thumbnail — your browser is decoding it directly.

Browser and Tool Support in 2026

The support landscape has shifted dramatically since AVIF first appeared in 2019:

  • Chrome / Edge: full support since 2020
  • Firefox: full support since 2021
  • Safari: full support since 16.0 (late 2022)
  • iOS Safari: full support since 16.0
  • Android Chrome: full support

In practice, AVIF now reaches over 95% of global web traffic. The remaining gap is small enough that a single fallback (WebP or JPEG) covers it.

On the tooling side:

  • macOS Preview: native support since macOS Ventura
  • Windows Photos: built-in support via the AV1 Video Extension (free from the Microsoft Store)
  • GIMP, Krita, Affinity Photo: AVIF export available
  • Photoshop: requires the Camera Raw plugin or a third-party extension

If your image viewer or editor is more than two or three years old, it may not handle AVIF yet. The quickest fix is usually a system update.

How to Encode AVIF Yourself

You have several free options, ranked roughly from easiest to most powerful. A quick decision guide:

flowchart LR
    Q[Pick an encoder] --> SHELL{Shell-driven<br/>workflow?}
    SHELL -->|Yes| BATCH{Batch / pipeline?}
    BATCH -->|Yes| FFMPEG["ffmpeg or<br/>ImageMagick"]
    BATCH -->|No| AVIFENC[avifenc]
    SHELL -->|No| INTERACTIVE{Quality preview<br/>matters?}
    INTERACTIVE -->|Yes| SQUOOSH["Squoosh<br/>(browser)"]
    INTERACTIVE -->|No| CDN["Cloud / CDN<br/>auto-encode"]

Squoosh (browser-based)

Google’s Squoosh lets you drag in an image, pick AVIF as the output format, and tweak quality interactively. Side-by-side preview and file-size readout make it the fastest way to learn what AVIF settings produce what results. No installation required.

avifenc (command line)

Part of the official libavif reference implementation. Single-purpose, fast to learn:

avifenc --min 20 --max 30 --speed 6 input.png output.avif

The --min / --max flags control the quantizer range (0 = lossless, 63 = worst); --speed trades encoding time for compression efficiency (0 = slowest/best, 10 = fastest/worst). For most photo content, a quantizer of 25–30 produces files that look indistinguishable from the source at typical viewing sizes.

ffmpeg

If you already have ffmpeg installed, AVIF encoding is one flag away:

ffmpeg -i input.png -c:v libaom-av1 -still-picture 1 output.avif

Useful when you are batch-processing alongside video work.

ImageMagick

Version 7 added AVIF support via libheif. Convenient for shell pipelines:

magick input.jpg -quality 75 output.avif

Cloud / CDN encoders

Cloudflare Images, imgix, Cloudinary, Vercel Image Optimization, and Netlify Image CDN all auto-encode AVIF on the fly and serve it to browsers that accept it. If your site is hosted on one of these platforms, you may already be shipping AVIF without writing a single line of conversion code.

Serving AVIF on the Web

The standard pattern is the <picture> element with progressive fallbacks:

<picture>
  <source srcset="hero.avif" type="image/avif" />
  <source srcset="hero.webp" type="image/webp" />
  <img src="hero.jpg" alt="..." width="1200" height="630" />
</picture>

Browsers walk the <source> list top to bottom and pick the first format they understand. The trailing <img> is the fallback for ancient browsers and the source of the alt text and dimensions for layout.

flowchart LR
    REQ[Browser loads page] --> S1{"Supports<br/>image/avif?"}
    S1 -->|Yes| AVIF["Load hero.avif<br/>(smallest)"]
    S1 -->|No| S2{"Supports<br/>image/webp?"}
    S2 -->|Yes| WEBP[Load hero.webp]
    S2 -->|No| FALLBACK["Load hero.jpg<br/>(universal)"]

A few practical reminders:

  • Always include width and height on the <img> element to prevent layout shift.
  • Match aspect ratios across formats. Cropping mismatches are a common bug.
  • Don’t bother shipping all three formats for tiny UI icons — the savings are dwarfed by request overhead.

Encoding Speed Is the Real Trade-Off

The one place AVIF stings is encoding time. AV1 was designed to spend CPU on the encoder so it can be cheap on the decoder, and AVIF inherits this asymmetry. A high-quality AVIF encode of a 4K photo can take 5–20× longer than the equivalent JPEG. For build-time encoding (static sites, asset pipelines), this is fine. For real-time encoding (user uploads converted on the fly), it can be a real bottleneck.

Two mitigations:

  1. Use a lower --speed setting only when it matters. For thumbnails and below-the-fold images, --speed 8 or 9 is fast and the quality loss is negligible at small sizes.
  2. Cache aggressively. AVIF is the perfect candidate for content-addressable caching — encode once, serve forever.

When NOT to Use AVIF

AVIF is not the right answer for everything:

  • Source / archival files. Use lossless PNG or DNG for masters; encode AVIF for distribution.
  • Anything you need to share with non-technical users via email. JPEG is still safer.
  • Diagrams and screenshots with sharp text. PNG (or SVG, where applicable) often produces smaller files than AVIF for line art.
  • Single-color icons and logos. SVG wins on every axis.

The goal is matching the format to the delivery context, not picking a winner across all categories.

Where to Go Next

Three good follow-ups once you have encoded your first AVIF file:

  1. Jake Archibald’s AVIF write-up — still one of the clearest hands-on introductions, with side-by-side image comparisons.
  2. The official libavif repo on GitHub — the reference encoder, decoder, and command-line tool.
  3. web.dev/articles/serve-images-with-correct-dimensions and related Lighthouse documentation for measuring real impact on your site.

AVIF is no longer the “future” image format. It is the present one, and the tooling has caught up enough that the cost of adopting it is mostly just deciding to do it. If you ship images on the web in 2026, it is worth at least running an experiment on your largest hero image and seeing what the file-size delta looks like. The results tend to be persuasive.