The Complete Guide to AVIF: The Future of Image Compression

What is AVIF?

AVIF (AV1 Image File Format) is a next-generation image format based on the AV1 video codec, developed by the Alliance for Open Media (AOMedia), a consortium that includes Google, Apple, Microsoft, Netflix, Amazon, and Meta.

AVIF was finalized in February 2019 and has since gained rapid adoption. It delivers dramatically smaller file sizes than JPEG and WebP while maintaining equal or superior visual quality, making it the most efficient image format available today.

How Does AVIF Compression Work?

AVIF leverages the AV1 codec's advanced compression techniques, originally designed for video streaming. When applied to still images, these techniques produce remarkable results:

• Intra-frame prediction - the encoder predicts pixel values based on neighboring pixels, then stores only the differences. AV1 supports 56 directional prediction modes compared to JPEG's 0
• Transform coding - remaining pixel data is converted to the frequency domain using advanced transforms (DCT + ADST combinations) with flexible block sizes from 4x4 up to 64x64
• Loop filtering - post-processing filters smooth out compression artifacts at block boundaries, producing cleaner output at lower bitrates
• Film grain synthesis - instead of wastefully encoding natural film grain, AVIF can parameterize it and re-synthesize it during decoding, saving significant bits
• CDEF (Constrained Directional Enhancement Filter) - an edge-preserving filter that sharpens details while removing ringing artifacts

The result? AVIF encodes the same visual information in roughly 50% fewer bytes than JPEG and 20% fewer bytes than WebP.

AVIF vs JPEG vs WebP vs PNG: How They Compare

Here's how AVIF stacks up against the other major image formats:

File Size Comparison

For a typical photograph compressed to visually equivalent quality:

• JPEG (baseline) - 100 KB
• WebP - ~70 KB (30% smaller than JPEG)
• AVIF - ~50 KB (50% smaller than JPEG)
• PNG - ~400 KB (lossless, no comparison)

These numbers vary by image content, but the ratios are consistent across thousands of test images in independent studies.

Feature Comparison

• Lossy compression - AVIF, JPEG, WebP all support lossy. AVIF produces the smallest files
• Lossless compression - AVIF and WebP support lossless. PNG is lossless only
• Transparency (alpha channel) - AVIF, WebP, PNG support transparency. JPEG does not
• Animation - AVIF and WebP support animated frames. JPEG and PNG do not (APNG exists but is rare)
• HDR and wide color gamut - AVIF supports 10-bit and 12-bit color depth with HDR. Others are limited to 8-bit SDR
• Color space - AVIF supports BT.2020 and BT.2100 for HDR content. WebP and JPEG are limited to sRGB/Adobe RGB

Browser Support for AVIF in 2026

AVIF browser support has improved dramatically since its introduction:

• Chrome - full support since version 85 (August 2020)
• Firefox - full support since version 93 (October 2021)
• Edge - full support since version 85 (Chromium-based)
• Safari - full support since Safari 16.1 / iOS 16.1 (October 2022)
• Opera - full support since version 71
• Samsung Internet - full support since version 14.0

As of 2026, AVIF is supported by approximately 95%+ of global browsers. The remaining gap is mostly older devices that haven't been updated. For production websites, using AVIF with a JPEG/WebP fallback via the <picture> element is the recommended approach.

Using AVIF with Fallbacks

For maximum compatibility, serve AVIF with a fallback using the HTML <picture> element:

<picture>
  <source srcset="photo.avif" type="image/avif">
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="Description">
</picture>

The browser will use the first format it supports from top to bottom, automatically selecting AVIF when available.

When to Use AVIF

AVIF excels in specific scenarios:

Best Use Cases for AVIF

• Photography and hero images - AVIF's lossy compression shines with photographic content, delivering stunning quality at tiny file sizes
• E-commerce product images - faster page loads directly increase conversion rates. AVIF can cut image bandwidth by 50%+
• Social media and content platforms - serving millions of images, even a 20% size reduction saves terabytes of bandwidth monthly
• HDR content - AVIF is currently the only widely-supported web format that handles HDR and wide color gamut properly
• Images with transparency - AVIF produces significantly smaller transparent images than PNG while maintaining quality

When NOT to Use AVIF

• Thumbnails under 10KB - encoding overhead means AVIF can actually produce larger files than JPEG/WebP for very small images
• Real-time encoding - AVIF encoding is 5-10x slower than JPEG/WebP. It's best used when images are pre-processed, not generated on the fly
• Pixel-perfect graphics - for text, UI elements, screenshots, and sharp-edged graphics, PNG or SVG remain better choices
• Legacy system compatibility - if your audience includes older browsers or native apps that don't support AVIF, always provide fallbacks

The Encoding Speed Tradeoff

AVIF's biggest drawback is encoding speed. Because the AV1 codec was designed for quality over speed, encoding an AVIF image typically takes 5-10x longer than encoding the equivalent JPEG or WebP.

For a typical 2MB photograph:

• JPEG encoding - ~50ms
• WebP encoding - ~200ms
• AVIF encoding - ~1-3 seconds

This is why AVIF is ideal for pre-processing workflows (compress once, serve many times) rather than real-time encoding. For websites, you compress images during your build step or when they're uploaded, then serve the pre-compressed AVIF files.

When using ZeroPNG's compressor or converter, AVIF encoding happens locally in your browser. While it takes a moment longer than JPEG, the dramatically smaller output makes it worth the wait.

AVIF Quality Settings Explained

Like JPEG and WebP, AVIF supports a quality parameter that controls the compression-quality tradeoff:

• Quality 80-90 - visually lossless for most photos. Recommended for hero images and portfolio work
• Quality 60-80 - excellent quality with significant size savings. Ideal for blog images and general web use
• Quality 40-60 - noticeable artifacts on close inspection, but perfectly acceptable for thumbnails and background images
• Quality 20-40 - heavy compression with visible quality loss. Useful for preloading placeholder images (LQIP)

A key advantage of AVIF is that it maintains perceptual quality at much lower quality values than JPEG. An AVIF at quality 60 often looks as good as a JPEG at quality 85.

How to Convert Images to AVIF

There are several ways to convert your images to AVIF format:

Option 1: Use ZeroPNG (Free, Browser-Based)

The fastest way to convert images to AVIF is using ZeroPNG's Image Converter. Drop your images in, select "AVIF" as the output format, adjust quality, and download. Everything happens in your browser with zero uploads.

You can also use the Image Compressor with AVIF as the output format to compress existing images into AVIF in one step.

Option 2: Command Line (libavif / ffmpeg)

For developers and automation pipelines:

# Using avifenc (from libavif)
avifenc --min 20 --max 40 input.png output.avif

# Using ffmpeg
ffmpeg -i input.jpg -c:v libaom-av1 -crf 30 output.avif

# Using ImageMagick 7+
magick input.jpg -quality 60 output.avif

Option 3: Build Tools and CDNs

Most modern web infrastructure supports automatic AVIF conversion:

• Cloudflare - automatic AVIF conversion via Image Resizing or Polish
• Vercel / Next.js - built-in AVIF support via next/image
• Netlify - automatic image optimization with AVIF output
• Sharp (Node.js) - programmatic AVIF encoding via sharp().avif()
• Squoosh - Google's open-source image optimization library

The Future of AVIF

AVIF adoption is accelerating rapidly. With universal browser support now achieved and major platforms (Netflix, Google Photos, Facebook) already using it internally, AVIF is positioned to become the default image format for the web within the next few years.

Key developments to watch:

• Hardware decoding - dedicated AV1 decode chips in newer phones and GPUs will eliminate the remaining decode performance gap
• Faster encoding - projects like SVT-AV1 and rav1e are dramatically improving encode speeds with each release
• AVIF Sequence - animated AVIF could replace GIF entirely with 90%+ smaller file sizes and full color depth
• AV2 codec - the next-generation AV2 codec is already in development, promising even better compression ratios

Key Takeaways

• AVIF compresses images 50% smaller than JPEG and 20% smaller than WebP at equivalent visual quality
• Browser support is now at 95%+ globally, making it production-ready
• Use the <picture> element with JPEG/WebP fallbacks for maximum compatibility
• AVIF is best for photographs, hero images, and e-commerce, not for tiny thumbnails or sharp-edged graphics
• Encoding is slower than JPEG/WebP, so pre-process images in your build pipeline or use a tool like ZeroPNG
• AVIF supports features no other web format offers: HDR, 12-bit color, transparency, and animation