AVIF Optimization Guide

Quick Optimization Checklist

• ✓ Use CRF 18-23 for photos (excellent quality)
• ✓ Choose speed 4-6 for balanced encode/quality
• ✓ Use 4:2:0 chroma subsampling for photos
• ✓ Implement fallbacks with <picture>
• ✓ Resize images before conversion
• ✓ Test file sizes against WebP/JPEG
• ✓ Use lazy loading for below-fold images

1. Quality Settings (CRF Values)

AVIF quality is controlled by CRF (Constant Rate Factor) values from 0-63:

2. Encoding Speed Settings

AVIF encoders offer speed presets (0-10) trading encoding time for file size/quality:

• Speed 0-2: Slowest (10-100x JPEG), best compression/quality
• Speed 3-5: Balanced (5-10x JPEG), good quality ⭐ Recommended
• Speed 6-8: Fast (2-5x JPEG), slight quality loss
• Speed 9-10: Fastest (similar to JPEG), noticeable quality loss

3. Chroma Subsampling

• 4:4:4: No subsampling - use for graphics, logos, screenshots
• 4:2:0: Standard subsampling - use for photographs ⭐ Recommended

4. Browser Support & Fallbacks

Always provide WebP and JPEG fallbacks:

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

5. Responsive Images

Serve different sizes based on viewport:

<picture>
  <source 
    type="image/avif"
    srcset="hero-400w.avif 400w, hero-800w.avif 800w, hero-1200w.avif 1200w"
    sizes="(max-width: 640px) 100vw, (max-width: 1024px) 80vw, 1200px">
  <source 
    type="image/webp"
    srcset="hero-400w.webp 400w, hero-800w.webp 800w, hero-1200w.webp 1200w"
    sizes="(max-width: 640px) 100vw, (max-width: 1024px) 80vw, 1200px">
  <img 
    src="hero-1200w.jpg" 
    alt="Hero"
    loading="lazy"
    width="1200"
    height="600">
</picture>

6. Performance Tips

• Batch Process: Encode AVIF during build, not runtime
• CDN Transcoding: Use services like Cloudflare Images
• Lazy Loading: Use loading="lazy" for below-fold
• Dimensions: Always set width/height to prevent layout shift
• Testing: Verify AVIF is actually smaller than WebP/JPEG

7. When NOT to Use AVIF

• Supporting IE11 or Safari 15 and below is critical
• Real-time encoding is required (too slow)
• Working with animated content (use WebP instead)
• File size difference from WebP is minimal (<10%)