DEV Community

Pixotter
Pixotter

Posted on • Originally published at pixotter.com

What Is AVIF? The Next-Gen Image Format Explained

What Is AVIF? The Next-Gen Image Format Explained

AVIF is showing up everywhere. Browsers support it, image tools list it as an output option, and developers keep recommending it for web performance. The format promises dramatically smaller files than JPEG and WebP without visible quality loss — and unlike HEIC, it is completely royalty-free.

Here is what AVIF actually is, how it works under the hood, and when you should (and should not) use it.

AVIF at a Glance

Property Details
Full name AV1 Image File Format
File extension .avif
MIME type image/avif
Compression AV1 (lossy and lossless)
Color depth 8-bit, 10-bit, 12-bit
Transparency Full alpha channel
Animation Yes (via AVIF sequences)
HDR support Yes (PQ, HLG, Rec. 2020, DCI-P3)
Browser support Chrome 85+, Firefox 93+, Safari 16.1+, Edge 85+
Year introduced 2019 (AVIF 1.0 specification)
License Royalty-free (Alliance for Open Media)

AVIF is the still-image counterpart to AV1 video, packaged in a HEIF-based container. If you know what HEIC is — Apple's image format using HEVC compression inside a HEIF container — AVIF is the same container idea, but with AV1 compression instead.

How AVIF Compression Works

AVIF uses the AV1 video codec to compress individual image frames. AV1 was developed by the Alliance for Open Media (AOMedia), a consortium that includes Google, Apple, Microsoft, Netflix, Amazon, Meta, and Mozilla. The consortium's goal was to create a next-generation video codec that anyone could use without paying patent royalties — a direct response to the licensing complexity around HEVC/H.265.

The Technical Mechanics

AV1 achieves its compression through intra-frame coding — the same technique video codecs use to compress keyframes (frames that don't reference other frames). For still images, every image is a keyframe. Here is what happens when an AVIF encoder processes your image:

  1. Block partitioning. The image is divided into coding units up to 128x128 pixels. AV1's superblock structure is far more flexible than older codecs — it can recursively split blocks into smaller rectangles to match image complexity. Simple regions (blue sky) get large blocks; detailed regions (tree branches) get small ones.

  2. Intra prediction. For each block, the encoder predicts pixel values from already-encoded neighboring blocks. AV1 offers over 50 directional prediction modes (compared to VP8's 4), plus smooth and Paeth predictors. The encoder picks whichever mode minimizes the residual — the difference between prediction and reality.

  3. Transform and quantization. The residual signal is transformed (DCT or ADST variants) and quantized — this is where lossy compression happens. Higher quality settings preserve more of the residual; lower settings discard more.

  4. Entropy coding. The quantized coefficients are compressed using an arithmetic coder that adapts to the statistical patterns in the data.

  5. Loop filtering. AV1 applies deblocking filters, CDEF (Constrained Directional Enhancement Filter), and loop restoration to reduce blocking artifacts at the decoder side. This is why AVIF images look cleaner than JPEG at equivalent file sizes — the filtering happens after decoding, not during encoding.

The result: AVIF files are typically 30-50% smaller than JPEG and 20-50% smaller than WebP at the same perceptual quality. The compression gains come from AV1's larger block sizes, richer prediction modes, and more sophisticated filtering — all of which require more computation to encode.

The Royalty-Free Advantage

This matters more than most developers realize. HEVC (the codec behind HEIC) is patent-encumbered, which is why Chrome, Firefox, and Edge never added native HEIC support. Browser vendors would owe royalties to multiple patent pools for every HEVC decoder they shipped.

AV1 was designed to avoid this entirely. AOMedia's patent license grants royalty-free rights to anyone implementing the standard. This is why AVIF has broad browser support and HEIC does not — the codec politics are as important as the codec technology.

AVIF vs Other Formats

Feature AVIF JPEG WebP PNG HEIC
Compression type Lossy + lossless Lossy only Lossy + lossless Lossless only Lossy + lossless
File size (1920x1080 photo) ~185 KB ~450 KB ~290 KB ~5.9 MB ~220 KB
Color depth 10/12-bit 8-bit 8-bit 8/16-bit 10/12-bit
Transparency Yes No Yes Yes Yes
Animation Yes No Yes APNG only Yes
HDR support Yes No No No Yes
Browser support ~93% global ~100% ~97% ~100% Safari only
Encoding speed Slow Fast Fast Fast Fast
Patent licensing Royalty-free Royalty-free Royalty-free Royalty-free HEVC patents
Best for Web images, HDR, photography Universal sharing General web images Graphics, screenshots Apple ecosystem

Key takeaways from this comparison:

  • AVIF vs JPEG: AVIF produces files roughly 50-60% smaller at equivalent quality. JPEG's only advantage is universal compatibility — every device, browser, and application on earth reads JPEG. For web delivery where you can use <picture> fallbacks, AVIF is strictly better.

  • AVIF vs WebP: AVIF compresses 20-50% more efficiently than WebP. WebP encodes dramatically faster (milliseconds vs seconds) and has 4% more browser coverage. For a detailed comparison with benchmarks, see WebP vs AVIF: Which Next-Gen Format Wins?.

  • AVIF vs PNG: Different jobs entirely. PNG is lossless and excels at graphics with sharp edges, text, and transparency. AVIF can do lossless too, but its real advantage is lossy compression of photographs. Use PNG for screenshots and logos; AVIF for photos.

  • AVIF vs HEIC: Nearly identical compression performance (both are modern codecs with similar capabilities). AVIF wins on licensing — royalty-free vs HEVC's patent pools — which is why AVIF has cross-browser support and HEIC does not. Read more in What Is HEIC?.

For a complete format decision framework, see Best Image Format for Web.

Browser and Platform Support

AVIF support reached a tipping point in late 2022 when Safari 16.1 added support, completing coverage across all major browsers. Here is the current state:

Browser AVIF Support Since Version
Chrome (desktop + Android) August 2020 85+
Firefox October 2021 93+
Safari (macOS + iOS) October 2022 16.1+
Edge August 2020 85+
Opera September 2020 71+
Samsung Internet 2023 20+

As of March 2026, AVIF has approximately 93% global browser coverage. The remaining 7% is mostly older iOS devices stuck on iOS 15 (Safari 15.x), legacy Android phones, and enterprise environments locked to older browser versions.

That 93% is production-ready for most websites — especially when paired with a <picture> fallback:

<picture>
  <source srcset="photo.avif" type="image/avif">
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="Description of your image" width="800" height="600">
</picture>
Enter fullscreen mode Exit fullscreen mode

The browser picks the first format it supports. Chrome and Firefox grab AVIF. Older Safari grabs WebP. Ancient browsers fall back to JPEG. Everyone sees the image; most users get the smallest version.

Beyond Browsers

  • macOS: Native support since macOS Ventura (13.0). Preview, Finder thumbnails, and Photos all handle AVIF.
  • iOS: Supported since iOS 16. AVIF images render in Safari, Messages, and third-party apps that use system image decoders.
  • Windows: Windows 11 displays AVIF natively. Windows 10 requires the AV1 Video Extension from the Microsoft Store (free).
  • Linux: libavif and loaders (gdk-pixbuf, Qt) provide support in most desktop environments.
  • Adobe tools: Photoshop 23.2+ and Lightroom Classic 11.3+ read AVIF. Export support varies.

When to Use AVIF

AVIF is the right choice when compression efficiency is the priority and encoding time is a one-time cost.

Web images on high-traffic pages. A 30-50% reduction over WebP translates directly to faster load times, better Core Web Vitals, and lower CDN costs. On a page with 20 product images, switching from WebP to AVIF can save 1-2 MB per page load.

Photography and complex imagery. AVIF excels at photographs — smooth gradients, skin tones, and complex textures compress significantly better than with JPEG or WebP. The difference is most visible at aggressive compression levels where JPEG shows blocking artifacts and AVIF stays clean.

HDR content. AVIF is the only web-compatible format that supports 10-bit and 12-bit HDR with PQ or HLG transfer functions. If you are producing content for HDR displays, AVIF preserves the luminance range that WebP (8-bit only) cannot represent.

Images that need transparency and small file sizes. PNG gives you transparency but with large lossless files. WebP gives you lossy transparency but at larger sizes than AVIF. AVIF gives you both: lossy compression with full alpha channel support, producing the smallest transparent images of any web format.

Static sites and pre-built assets. Blog posts, marketing pages, and e-commerce product listings where images are encoded once at build time and served millions of times. The slow encoding is amortized across all those page views.

When NOT to Use AVIF

AVIF is not the right tool for every situation. Know its weaknesses.

When encoding speed matters. AVIF encoding is dramatically slower than WebP or JPEG — roughly 47x slower at default settings (see WebP vs AVIF for benchmarks). User-generated content platforms, real-time image processing pipelines, and dynamic resizing services cannot afford multi-second encoding times per image.

When you need universal compatibility without fallbacks. At 93% browser support, roughly 7% of users see nothing if you serve AVIF without a fallback. For email images, social media embeds, and any context where you cannot control the <picture> element, stick with JPEG or WebP.

When tooling compatibility is critical. AVIF support in design tools, CMS platforms, and image editing software is still catching up. WordPress added AVIF upload support in version 6.5, but many plugins and themes have not updated their image processing pipelines. If your workflow relies on tools that do not handle AVIF, you will spend more time fighting the toolchain than saving bytes.

Animated content. Animated AVIF is technically supported in Chrome and Firefox, but tooling is immature compared to animated WebP or MP4 video. For animated web content, WebP or short video loops are more reliable.

Lossless graphics. For screenshots, logos, and text-heavy graphics, PNG remains the safer choice. AVIF lossless mode exists but is less commonly used, and PNG's universal support and mature tooling make it the path of least resistance. WebP lossless is the better modern alternative for these use cases — see PNG vs WebP.

How to Convert Images to AVIF

In the Browser with Pixotter

The fastest way to convert any image to AVIF — no install, no upload to a remote server:

  1. Go to Pixotter's Convert tool
  2. Drop your image (JPEG, PNG, WebP, HEIC, BMP, TIFF, or GIF)
  3. Select AVIF as the output format
  4. Download the converted file

Everything runs in your browser via WebAssembly. Your images never leave your device — there is no server upload, no waiting in a queue, no privacy concern. Batch conversion works the same way: drop multiple files and convert them all at once.

Need to go the other direction? Pixotter also converts FROM AVIF to JPEG, PNG, or WebP. Same tool, same process — just select a different output format. For step-by-step guides, see How to Convert AVIF to JPG and How to Convert AVIF to PNG. Once converted, you can compress your images further to hit specific file size targets.

Command Line

For build pipelines and batch processing, avifenc from libavif v1.0.x (BSD 2-Clause license) is the standard tool:

# Standard lossy AVIF — good balance of quality and size
avifenc --speed 6 -q 60 input.jpg output.avif

# Best compression (slow — use for pre-built static assets only)
avifenc --speed 0 -q 60 input.jpg output.avif

# Faster encoding (speed 8 — less compression, much faster)
avifenc --speed 8 -q 60 input.jpg output.avif

# Batch encode all JPEGs in a directory
for f in *.jpg; do avifenc --speed 6 -q 60 "$f" "${f%.jpg}.avif"; done
Enter fullscreen mode Exit fullscreen mode

The --speed flag ranges from 0 (best compression, slowest) to 10 (fastest, least compression). Speed 6 is a solid default for most use cases. Speed 0 produces the smallest files but can take 30-60 seconds per image.

The -q flag controls quality (0-100). Quality 60 produces results comparable to JPEG quality 80-85. For photographs where quality matters, try -q 70. For aggressive compression on thumbnails, -q 40 works well.

In Build Pipelines

Sharp (MIT license, v0.33.x) handles AVIF in Node.js:

const sharp = require('sharp'); // v0.33.x

await sharp('input.jpg')
  .avif({ quality: 60, speed: 6 })
  .toFile('output.avif');
Enter fullscreen mode Exit fullscreen mode

For understanding how lossy and lossless modes differ across formats, see Lossy vs Lossless Compression.

Frequently Asked Questions

Is AVIF better than JPEG?

For web delivery, yes. AVIF produces files 50-60% smaller than JPEG at equivalent visual quality, supports transparency, HDR, and animation — none of which JPEG can do. JPEG's advantage is universal compatibility: every device on earth reads it. Use AVIF with a JPEG fallback via the <picture> element to get both.

Is AVIF the same as AV1?

Not exactly. AV1 is a video codec — it compresses moving video frames. AVIF is a still-image format that uses AV1 to compress individual frames, packaged in a HEIF-based container. The relationship is similar to how WebP uses the VP8 video codec for still images.

Can I use AVIF files on my website right now?

Yes. With ~93% global browser support (Chrome, Firefox, Safari 16.1+, Edge), AVIF is production-ready. Use the <picture> element with WebP and JPEG fallbacks to cover the remaining 7%. The browser automatically selects the best format it supports.

Why is AVIF encoding so slow?

AV1 was designed for video encoding on powerful hardware. Its large block sizes (up to 128x128), 50+ prediction modes, and sophisticated filtering produce excellent results but require significant computation. At default speed settings, AVIF encodes roughly 47x slower than WebP. Hardware AV1 encoders (Intel Arc, AMD RDNA 3+, NVIDIA Ada) are narrowing this gap.

Does AVIF support transparency?

Yes. AVIF supports a full alpha channel with both lossy and lossless compression of the alpha plane. This makes AVIF the smallest option for transparent images on the web — smaller than PNG (lossless only) and smaller than WebP with alpha.

Is AVIF free to use?

Completely. AV1 was developed by the Alliance for Open Media specifically to be royalty-free. Any person or organization can encode, decode, and serve AVIF images without paying licensing fees. This is a deliberate contrast to HEVC/H.265 (used in HEIC), which requires patent licensing.

Top comments (0)