The Complete AVIF Guide: Next-Generation Image Format

AVIF represents the cutting edge of image compression technology, offering unprecedented file size savings while maintaining exceptional visual quality. This guide covers everything you need to know to implement AVIF effectively.

What is AVIF?

AVIF (AV1 Image File Format) is a modern image format based on the AV1 video codec, developed by the Alliance for Open Media (AOMedia). Released in 2019, it’s designed to supersede both JPEG and WebP with superior compression efficiency.

Key Characteristics

Feature	AVIF Support
Lossy compression	✓ Yes
Lossless compression	✓ Yes
Transparency (alpha)	✓ Yes
Animation	✓ Yes
HDR support	✓ Yes
Wide color gamut	✓ Yes (10/12-bit)
Max dimensions	65536 x 65536 pixels

AVIF typically achieves:

• 50% smaller file sizes than JPEG at equivalent quality
• 20-30% smaller than WebP for photographs
• Significantly better quality at low bitrates
• Superior handling of fine details and gradients

The Alliance for Open Media

AVIF benefits from backing by major tech companies including Google, Apple, Microsoft, Netflix, Amazon, and Mozilla. This broad industry support ensures:

• Royalty-free usage
• Continued development
• Growing browser adoption
• Wide tooling support

How AVIF Compression Works

Understanding AVIF’s compression helps you make informed optimization decisions.

The AV1 Foundation

AVIF uses intra-frame encoding from the AV1 video codec. The compression pipeline involves:

1. Block partitioning: Images are divided into superblocks (up to 128x128 pixels), which can be recursively split into smaller blocks of varying sizes and shapes, including rectangular blocks.

2. Prediction: Each block is predicted using:

   • Intra prediction (from neighboring pixels)
   • Palette prediction (for graphics)
   • Intra block copy (for repeated patterns)

3. Transform: Residual data undergoes transform coding using multiple transform types (DCT, ADST, identity) that can be combined.

4. Quantization: Transform coefficients are quantized. AVIF supports separate quantization for different block sizes and frame regions.

5. Entropy coding: Uses a sophisticated arithmetic coder with context modeling for maximum efficiency.

Why AVIF Compresses Better

Several factors contribute to AVIF’s superior compression:

Larger block sizes: Up to 128x128 vs WebP’s 16x16, better for smooth gradients.

More prediction modes: 56+ directional intra prediction modes vs 10 in WebP.

Advanced transforms: Multiple transform types selected per-block.

Better chroma handling: Supports 4:4:4, 4:2:2, and 4:2:0 subsampling.

Film grain synthesis: Can encode grain parameters separately, reconstructing at decode time.

Encoding Speed Trade-off

AVIF’s sophisticated compression comes at a cost: encoding is significantly slower than JPEG or WebP. A typical image might take:

Format	Encode Time (relative)
JPEG	1x (baseline)
WebP	2-3x
AVIF (speed 6)	10-20x
AVIF (speed 0)	100x+

This makes AVIF better suited for:

• Pre-processed assets (build-time conversion)
• CDN/image service processing
• Situations where encode time isn’t critical

Browser Support in 2026

AVIF browser support has matured significantly:

Browser	Support Since
Chrome	Version 85 (2020)
Firefox	Version 93 (2021)
Safari	Version 16 (2022)
Edge	Version 85 (2020)
Opera	Version 71 (2020)
Samsung Internet	Version 14 (2021)
iOS Safari	iOS 16 (2022)
Android Browser	Version 85 (2020)

Current global support: ~92% according to Can I Use data.

The remaining ~8% consists primarily of:

• Older iOS devices (pre-iOS 16)
• Older Safari on macOS
• Some enterprise environments
• Older Android devices

Progressive Enhancement Strategy

Given the support gap, always provide fallbacks:

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Description" width="800" height="600">
</picture>

This serves AVIF to ~92% of users, WebP to ~5% more, and JPEG to the remainder.

When to Use AVIF

Ideal Use Cases

High-quality photography

• Portfolio sites
• Stock photography
• Product detail shots
• Editorial content

Bandwidth-constrained scenarios

• Mobile-first sites
• Emerging markets
• Data-sensitive users
• Large image galleries

Visual quality priority

• Art and design portfolios
• Medical imaging
• Archival digitization
• Print-quality previews

HDR and wide color content

• HDR photography
• Professional color workflows
• Display advertising
• Entertainment media

When to Consider Alternatives

Real-time encoding needed: Use WebP or JPEG for user uploads requiring instant processing.

Animation-heavy content: WebP or even GIF may have better tooling support for complex animations.

Maximum compatibility required: WebP offers broader support if you can’t serve multiple formats.

Very simple graphics: PNG or SVG might be more appropriate for icons and simple illustrations.

Legacy system integration: Some systems don’t yet support AVIF in their image pipelines.

Quality Settings and Optimization

Understanding AVIF Quality

AVIF quality settings work differently than JPEG:

• Quality values typically range from 0-63 (lower = better quality)
• Or 0-100 in some tools (higher = better quality)
• The perceptual quality curve is different from JPEG

Quality Comparison Guide

For a typical 1920x1080 photograph:

Quality (cq-level)	File Size	Visual Quality
18	~80 KB	Excellent
23	~50 KB	Very Good
28	~35 KB	Good
33	~25 KB	Acceptable
40	~18 KB	Visible artifacts

Recommended Settings by Use Case

Hero images and key visuals

• Quality: 18-23 (cq-level)
• Priority: Visual quality
• Typical savings: 60-70% vs JPEG

Product images

• Quality: 23-28
• Priority: Detail preservation
• Typical savings: 65-75% vs JPEG

Thumbnails and previews

• Quality: 28-35
• Priority: File size
• Typical savings: 70-80% vs JPEG

Background images

• Quality: 30-40
• Priority: Maximum compression
• Typical savings: 75-85% vs JPEG

Speed vs Quality Trade-off

AVIF encoders offer speed presets affecting both encode time and compression efficiency:

Speed	Encode Time	File Size	Use Case
0	Very slow	Smallest	Archival, one-time processing
3	Slow	Smaller	Pre-built assets
6	Medium	Good	Default for most uses
8	Fast	Larger	Real-time needs
10	Very fast	Largest	Testing only

Speed 6 typically offers the best balance for production use.

Converting to AVIF

Command Line with avifenc

The reference encoder from libavif:

# Basic conversion
avifenc input.png output.avif

# With quality setting (0-63, lower = better)
avifenc --min 20 --max 28 input.jpg output.avif

# Constant quality mode
avifenc -a cq-level=23 input.jpg output.avif

# With speed setting (0-10)
avifenc --speed 6 -a cq-level=23 input.jpg output.avif

# Lossless mode
avifenc --lossless input.png output.avif

Key avifenc options:

Option	Description
--min, --max	Quality range (0-63)
-a cq-level=N	Constant quality level
--speed N	Encode speed (0-10)
--lossless	Lossless compression
--yuv 444	No chroma subsampling
--depth 10	10-bit color depth
-j N	Number of threads

Using ImageMagick 7+

# Basic conversion
magick input.jpg -quality 80 output.avif

# With resize
magick input.jpg -resize 1200x800 -quality 75 output.avif

# Batch conversion
magick mogrify -format avif -quality 80 *.jpg

Sharp (Node.js)

const sharp = require('sharp');

// Basic AVIF conversion
await sharp('input.jpg')
  .avif({ quality: 65 })
  .toFile('output.avif');

// With specific settings
await sharp('input.jpg')
  .avif({
    quality: 65,
    effort: 6,        // 0-9, higher = slower/smaller
    chromaSubsampling: '4:2:0'
  })
  .toFile('output.avif');

// Lossless
await sharp('input.png')
  .avif({ lossless: true })
  .toFile('output.avif');

Squoosh CLI

Google’s Squoosh provides excellent AVIF encoding:

npx @squoosh/cli --avif '{
  "cqLevel": 25,
  "speed": 6
}' input.jpg

FFmpeg

Useful for batch processing and automation:

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

# With specific settings
ffmpeg -i input.jpg \
  -c:v libaom-av1 \
  -crf 25 \
  -cpu-used 6 \
  -row-mt 1 \
  output.avif

Implementing AVIF on Your Website

HTML Picture Element

The standard approach with full fallback chain:

<picture>
  <!-- AVIF for modern browsers -->
  <source
    srcset="image-400.avif 400w,
            image-800.avif 800w,
            image-1200.avif 1200w"
    sizes="(max-width: 600px) 400px,
           (max-width: 1000px) 800px,
           1200px"
    type="image/avif">

  <!-- WebP fallback -->
  <source
    srcset="image-400.webp 400w,
            image-800.webp 800w,
            image-1200.webp 1200w"
    sizes="(max-width: 600px) 400px,
           (max-width: 1000px) 800px,
           1200px"
    type="image/webp">

  <!-- JPEG fallback -->
  <img
    src="image-800.jpg"
    srcset="image-400.jpg 400w,
            image-800.jpg 800w,
            image-1200.jpg 1200w"
    sizes="(max-width: 600px) 400px,
           (max-width: 1000px) 800px,
           1200px"
    alt="Description"
    width="1200"
    height="800"
    loading="lazy"
    decoding="async">
</picture>

CSS Background Images

For CSS backgrounds, use feature queries:

.hero {
  background-image: url('hero.jpg');
}

@supports (background-image: url('test.avif')) {
  .hero {
    background-image: url('hero.avif');
  }
}

Or use JavaScript-based detection:

async function supportsAvif() {
  const avif = new Image();
  return new Promise(resolve => {
    avif.onload = () => resolve(true);
    avif.onerror = () => resolve(false);
    avif.src = 'data:image/avif;base64,AAAAIGZ0eXBhdmlmAAAAAGF2aWZtaWYxbWlhZk1BMUIAAADybWV0YQAAAAAAAAAoaGRscgAAAAAAAAAAcGljdAAAAAAAAAAAAAAAAGxpYmF2aWYAAAAADnBpdG0AAAAAAAEAAAAeaWxvYwAAAABEAAABAAEAAAABAAABGgAAAB0AAAAoaWluZgAAAAAAAQAAABppbmZlAgAAAAABAABhdjAxQ29sb3IAAAAAamlwcnAAAABLaXBjbwAAABRpc3BlAAAAAAAAAAIAAAACAAAAEHBpeGkAAAAAAwgICAAAAAxhdjFDgQ0MAAAAABNjb2xybmNseAACAAIAAYAAAAAXaXBtYQAAAAAAAAABAAEEAQKDBAAAACVtZGF0EgAKBzgABpAQ0AIyDRAAACgAAABkAQY=';
  });
}

supportsAvif().then(supported => {
  document.documentElement.classList.add(supported ? 'avif' : 'no-avif');
});

Server-Side Content Negotiation

Nginx:

map $http_accept $avif_suffix {
  default "";
  "~*avif" ".avif";
}

map $http_accept $webp_suffix {
  default "";
  "~*webp" ".webp";
}

location ~* ^(.+)\.(jpg|jpeg|png)$ {
  add_header Vary Accept;
  try_files $1$avif_suffix $1$webp_suffix $uri =404;
}

Apache (.htaccess):

<IfModule mod_rewrite.c>
  RewriteEngine On

  # AVIF
  RewriteCond %{HTTP_ACCEPT} image/avif
  RewriteCond %{REQUEST_FILENAME}.avif -f
  RewriteRule ^(.+)\.(jpe?g|png)$ $1.$2.avif [T=image/avif,E=REQUEST_image]

  # WebP fallback
  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{REQUEST_FILENAME}.webp -f
  RewriteRule ^(.+)\.(jpe?g|png)$ $1.$2.webp [T=image/webp,E=REQUEST_image]
</IfModule>

<IfModule mod_headers.c>
  Header append Vary Accept env=REQUEST_image
</IfModule>

<IfModule mod_mime.c>
  AddType image/avif .avif
</IfModule>

Using a CDN

Modern image CDNs handle AVIF automatically:

<!-- Sirv auto-serves AVIF when supported -->
<img src="https://example.sirv.com/image.jpg" alt="Description">

<!-- Force AVIF format -->
<img src="https://example.sirv.com/image.jpg?format=avif" alt="Description">

<!-- AVIF with quality setting -->
<img src="https://example.sirv.com/image.jpg?format=avif&quality=70" alt="Description">

Benefits of CDN-based conversion:

• Automatic browser detection
• On-demand encoding (cached)
• No build-time processing needed
• Reduced storage requirements
• Consistent quality optimization

HDR and Wide Color Gamut

AVIF excels at high dynamic range and wide color content.

HDR Support

AVIF supports multiple HDR formats:

HDR Format	AVIF Support
PQ (HDR10)	✓ Yes
HLG	✓ Yes
Dolby Vision	✓ Profile 5

Color Depth

Bit Depth	Use Case
8-bit	Standard web content
10-bit	HDR, professional color
12-bit	Cinema, archival

Wide Color Gamut

AVIF supports color spaces beyond sRGB:

• Display P3: Common on Apple devices, wider gamut
• Rec. 2020: Even wider, used in HDR video
• ProPhoto RGB: Maximum gamut for photography

// Sharp with wide color gamut
await sharp('input-p3.jpg')
  .avif({
    quality: 65,
    bitdepth: 10
  })
  .withMetadata()  // Preserve color profile
  .toFile('output.avif');

Browser HDR Support

HDR display requires both browser and hardware support:

Browser	HDR Support
Chrome	✓ (HDR display required)
Safari	✓ (macOS 11+, iOS 14+)
Firefox	✓ (version 100+)
Edge	✓ (HDR display required)

AVIF Animation

AVIF supports animated sequences, competing with GIF, WebP, and video.

Animated AVIF vs Alternatives

Feature	GIF	WebP	AVIF	Video
Colors	256	16.7M	16.7M+	16.7M+
Compression	Poor	Good	Excellent	Excellent
Alpha	1-bit	8-bit	8-bit	Varies
HDR	No	No	Yes	Yes
Seek support	No	No	Yes	Yes
File size	Large	Medium	Small	Smallest

Creating Animated AVIF

From image sequence:

# Using avifenc
avifenc --speed 6 -a cq-level=25 \
  frame001.png frame002.png frame003.png \
  -o animation.avif

# With frame duration (in timescale units)
avifenc --timescale 30 --keyframe 1 \
  frame*.png -o animation.avif

From GIF:

# Convert GIF to frames, then to AVIF
ffmpeg -i input.gif frame%04d.png
avifenc frame*.png -o output.avif

Animated AVIF Considerations

Pros:

• Excellent compression (often 50%+ smaller than WebP animation)
• Full color depth and alpha
• HDR support

Cons:

• Slow encoding
• Higher CPU decode cost
• Less tooling support than WebP

For most web animations, consider whether a short video (WebM/MP4) might be more appropriate.

Performance Impact

Real-World Case Studies

Media website migration:

• 52% reduction in image payload
• 28% improvement in LCP
• 15% reduction in bounce rate

E-commerce platform:

• 45% smaller product images
• 18% faster page loads
• Improved mobile conversion

Photography portfolio:

• 60% file size reduction
• No perceptible quality difference
• Significant bandwidth savings

Decoding Performance

AVIF decoding is more CPU-intensive than JPEG or WebP:

Format	Relative Decode Time
JPEG	1x (baseline)
WebP	1.2x
AVIF	2-3x

This is generally offset by:

• Smaller file sizes (faster download)
• Browser decode optimizations
• Hardware acceleration (emerging)

Measuring Impact

Key metrics when implementing AVIF:

1. Largest Contentful Paint (LCP): Should improve despite decode overhead
2. Total image bytes: Expect 30-50% reduction vs WebP
3. Time to First Byte (TTFB): Smaller files = faster delivery
4. CPU usage on mobile: Monitor for low-end devices

Common Pitfalls and Solutions

Pitfall 1: Ignoring Encode Time

Problem: Build times become excessive with many images.

Solution: Use parallel encoding, appropriate speed settings, or CDN-based conversion.

# Parallel encoding with GNU parallel
find . -name "*.jpg" | parallel avifenc --speed 6 {} {.}.avif

Pitfall 2: Over-Compression

Problem: AVIF can look deceivingly good at low quality, but artifacts appear at certain viewing conditions.

Solution: Test at target quality on multiple displays. AVIF artifacts differ from JPEG—they can be less visible in thumbnails but apparent at full size.

Pitfall 3: Missing Fallbacks

Problem: ~8% of users can’t view AVIF.

Solution: Always provide WebP and JPEG fallbacks via <picture>.

Pitfall 4: Wrong Color Profile Handling

Problem: Colors appear different after conversion.

Solution: Preserve or explicitly set color profiles:

await sharp('input.jpg')
  .avif({ quality: 65 })
  .withMetadata()  // Preserves ICC profile
  .toFile('output.avif');

Pitfall 5: Forgetting MIME Types

Problem: Server doesn’t recognize AVIF files.

Solution: Add MIME type to server configuration:

# Nginx
types {
  image/avif avif;
}

# Apache
AddType image/avif .avif

Pitfall 6: Using Wrong Quality Scale

Problem: Quality settings differ between tools.

Solution: Understand each tool’s scale:

Tool	Quality Scale	Lower =
avifenc (cq-level)	0-63	Better
Sharp	1-100	Worse
Squoosh	0-100	Worse
ImageMagick	0-100	Worse

AVIF vs Other Formats

AVIF vs WebP

Aspect	AVIF	WebP
Compression	~20-30% better	Good
Encoding speed	Slow	Fast
Browser support	92%	97%
Animation	Good	Better tooling
HDR	Yes	No
Tooling maturity	Developing	Mature

Recommendation: Use AVIF as primary with WebP fallback. For time-critical encoding, consider WebP only.

AVIF vs JPEG XL

Aspect	AVIF	JPEG XL
Browser support	92%	~0%
Compression	Excellent	Excellent
Encoding speed	Slow	Fast
JPEG compatibility	No	Yes (transcoding)
Progressive decode	Limited	Excellent

Recommendation: AVIF for production use until JPEG XL gains browser support.

AVIF vs HEIC

Aspect	AVIF	HEIC
Browser support	92%	Safari only
Licensing	Royalty-free	Patent encumbered
Compression	Similar	Similar
Industry backing	Broad	Apple-centric

Recommendation: AVIF for web delivery; HEIC mainly relevant for Apple ecosystem.

Tools and Resources

Encoding Tools

• libavif/avifenc: Reference encoder, best quality
• Sharp: Node.js, good defaults
• Squoosh: Browser-based with visual comparison
• FFmpeg: Batch processing, automation
• ImageMagick 7+: General purpose

Online Tools

• Squoosh.app: Visual quality comparison
• AVIF.io: Online converter
• CloudConvert: Batch conversion service

Libraries and Frameworks

• Sharp (Node.js): Recommended for server-side
• libavif (C): Reference implementation
• cavif (Rust): Fast encoder
• @aspect/image (React): Next.js compatible

Build Tool Integration

• vite-imagetools: AVIF support for Vite
• next/image: Built-in AVIF support
• @nuxt/image: Automatic AVIF in Nuxt.js
• eleventy-img: Static site generation

Testing and Validation

• avifenc —info: Analyze AVIF files
• libavif tools: aviolve, avifdec
• Chrome DevTools: Network panel format inspection
• Lighthouse: Modern format audit

Summary and Best Practices

Quick Reference Checklist

1. ✅ Use AVIF for photographs and complex images
2. ✅ Set quality to 23-30 (cq-level) for most cases
3. ✅ Always provide WebP and JPEG fallbacks
4. ✅ Use speed 6 for production encoding
5. ✅ Consider CDN-based conversion for dynamic content
6. ✅ Test on multiple devices, especially mobile
7. ✅ Monitor Core Web Vitals after implementation
8. ✅ Preserve color profiles for color-critical content

Implementation Strategy

1. Audit: Identify high-impact images (hero, products, galleries)
2. Test: Convert samples, compare quality and file sizes
3. Implement: Start with <picture> element for easy rollback
4. Measure: Track LCP, total image bytes, user engagement
5. Iterate: Adjust quality settings based on data
6. Expand: Roll out to more images as confidence grows

When to Prioritize AVIF

• New projects without legacy format constraints
• Mobile-first applications
• High-resolution photography
• Bandwidth-sensitive markets
• Sites where image quality is a differentiator

AVIF represents the future of web images. While it requires more implementation effort than WebP, the compression benefits and advanced features make it worthwhile for most production websites.