Best Settings for AVIF Encoding: Quality vs. File Size Tradeoff

Quick Answer: The best AVIF encoding settings balance quality and file size using a quality value between 60-80. For web images, start with quality 65-75 and speed 6. For photos, use quality 70-80 with 4:2:0 chroma subsampling. For graphics with text, use quality 80-85 with 4:4:4 chroma subsampling.

Best Settings for AVIF Encoding

AVIF is the newest image format that compresses files smaller than JPEG and WebP while keeping better quality. But getting the settings right takes some knowledge.

This guide walks you through every setting that matters. You'll learn what each option does and how to pick the right values for your specific needs.

Understanding AVIF Encoding Basics

AVIF stands for AV1 Image File Format. It's based on the AV1 video codec, which explains why it compresses so well.

The format uses advanced techniques like:

These features mean AVIF can create files 50% smaller than JPEG at the same visual quality. The Chrome team's research confirms these benefits across thousands of test images.

Why Settings Matter More Than You Think

Wrong settings can make AVIF worse than JPEG. Too low quality creates blocky artifacts. Too high quality wastes bandwidth with barely visible improvements.

The encoding speed setting alone can change file size by 20-30% without touching quality. Understanding these tradeoffs saves you from trial and error.

Core AVIF Encoding Settings Explained

Quality Setting (The Most Important One)

Quality controls how much detail the encoder keeps. The scale runs from 0 to 100, but AVIF works differently than JPEG.

Here's what each range does:

Quality Range Use Case File Size vs JPEG Visual Quality
90-100 Archival, professional photography Similar or larger Near-lossless
80-89 High-quality web images, portfolios 30-40% smaller Excellent, no visible loss
65-79 Standard web images, e-commerce 50-60% smaller Very good for most uses
50-64 Thumbnails, preview images 60-70% smaller Acceptable, some artifacts visible
Below 50 Extreme compression scenarios 70%+ smaller Poor, noticeable quality loss
Pro Tip: AVIF quality 75 often looks better than JPEG quality 85-90 at half the file size. The codec handles gradients and detailed areas more efficiently than JPEG's block-based compression.

Speed Setting (CPU vs File Size)

Speed ranges from 0 (slowest) to 10 (fastest). This setting doesn't affect visual quality directly. It changes how hard the encoder works to find the best compression.

Speed 0-3: Takes minutes per image. Creates the smallest possible files. Use for batch processing overnight or archival work.

Speed 4-6: Takes seconds per image. Good compression with reasonable encoding time. Best for most web workflows.

Speed 7-10: Encodes instantly. Files are 20-40% larger than slower speeds. Use for real-time encoding or when speed matters more than size.

Most production workflows use speed 6. It's the sweet spot between encoding time and file size.

Chroma Subsampling Settings for AVIF Encoding

This setting controls how much color information gets stored. Your eyes see brightness (luma) better than color (chroma), so reducing chroma data saves space without obvious quality loss.

4:2:0 Subsampling (Default)

Stores full brightness but quarter resolution color. Cuts file size by 30-40% compared to full color.

Use for:

4:2:2 Subsampling

Half resolution color horizontally, full resolution vertically. Middle ground between size and quality.

Use for:

4:4:4 Subsampling (Full Color)

Stores every color pixel at full resolution. Creates larger files but preserves all color detail.

Use for:

[Insert Image: Side-by-side comparison of chroma subsampling effects on text and photos]

Advanced Settings That Make a Difference

Bit Depth Selection

AVIF supports 8-bit, 10-bit, and 12-bit color depth. Most displays show 8-bit color, but higher bit depths prevent banding in gradients.

8-bit: Standard for web. Creates smaller files. Good for most photos and graphics.

10-bit: Better gradient handling. Useful for sunset photos, blue skies, and smooth color transitions. File size increases by 15-25%.

12-bit: Professional use only. Rarely needed unless working with HDR content or high-end printing.

Stick with 8-bit unless you see visible banding in your images. The Mozilla documentation provides more technical details about bit depth handling.

Tiling Settings

Tiling splits images into chunks for parallel encoding. More tiles mean faster encoding but slightly larger files.

For images under 1000px: Use 1x1 tiles (no tiling). For images 1000-2000px: Use 2x2 tiles. For images over 2000px: Use 4x4 tiles.

Each tile adds a small overhead, so don't over-tile small images.

Effort and Quantizer Settings

These work together to control compression detail:

Min/Max Quantizer: Sets the range for quality variation across the image. Lower values mean higher quality but larger files. Default range (0-63) works well for most images.

Effort: Similar to speed but specific to AV1 encoders. Higher effort (8-10) creates smaller files but takes longer. Medium effort (4-6) balances speed and size.

Recommended Settings by Use Case

Web Photography Portfolio

Goal: Showcase image quality while keeping reasonable load times.

This creates stunning visuals at 40-50% smaller than equivalent JPEG quality 90.

E-commerce Product Images

Goal: Clear product details with fast page loads.

Balances clarity for zooming with optimal compression for multiple images per page.

Blog and Editorial Content

Goal: Readable images that don't slow down article loading.

Aggressive compression that still looks good. Perfect when images support text rather than being the main focus.

Screenshots and Technical Documentation

Goal: Sharp text and UI elements.

Full chroma subsampling prevents color fringing around text. Higher quality preserves edge sharpness.

Social Media Graphics

Goal: Eye-catching visuals optimized for mobile viewing.

Mobile screens are smaller and users scroll quickly. Slightly lower quality saves bandwidth without noticeable impact.

Testing and Finding Your Sweet Spot

The best settings depend on your specific images. Here's how to test systematically:

Step 1: Pick Representative Images

Choose 5-10 images that represent your typical content. Include:

Step 2: Encode at Multiple Quality Levels

Start with quality 60, 70, 80, and 90. Keep speed at 6 and chroma at 4:2:0 for fair comparison.

Note the file sizes and compare visually. Find where quality improvements become invisible.

Step 3: Test Chroma Subsampling

Take your chosen quality level. Encode once with 4:2:0 and once with 4:4:4.

If you can't see the difference in 4:2:0, stick with it. If text looks fuzzy or colors bleed, use 4:4:4.

Step 4: Adjust Speed for Your Workflow

Encode one image at speed 4, 6, and 8. Check file sizes.

If speed 4 takes too long for your workflow, use speed 6. The file size difference is usually under 15%.

Testing Tool: Use Squoosh.app for side-by-side visual comparisons. It lets you adjust settings and see results immediately in your browser.

Common Mistakes to Avoid

Using JPEG Quality Scales

AVIF quality 80 is not the same as JPEG quality 80. AVIF handles compression differently.

Don't convert JPEG quality directly. Start with AVIF quality 10-15 points lower and test visually.

Ignoring Image Content Type

One setting doesn't fit all images. Photos need different settings than graphics.

Create presets for different content types rather than using one universal setting.

Over-Optimizing File Size

Saving 10KB more isn't worth it if quality suffers. Your users care about visual experience, not whether an image is 42KB or 38KB.

Find the point where file size reductions become meaningful (usually 20%+ savings) and stop there.

Not Testing on Target Devices

Desktop monitors hide compression artifacts that mobile screens reveal. Always check your images on the devices your audience uses.

Text readability especially suffers on mobile with aggressive compression.

Tools and Encoders Comparison

Different AVIF encoders handle settings slightly differently. Here are the main options:

avifenc (Reference Encoder)

Command-line tool from the AVIF specification authors. Offers complete control over every setting.

Example command:

avifenc --min 0 --max 63 --speed 6 --jobs 4 input.jpg output.avif

Best for: Batch processing, automation, maximum quality control.

ImageMagick

Widely used image processor with AVIF support. Simpler syntax but fewer advanced options.

Example command:

magick convert input.jpg -quality 75 output.avif

Best for: Integrating with existing workflows, quick conversions.

Sharp (Node.js)

JavaScript library for image processing. Great for web application integration.

Example code:

sharp('input.jpg').avif({ quality: 75, speed: 6 }).toFile('output.avif')

Best for: Web apps, build pipelines, automated processing.

Squoosh CLI

Command-line version of Squoosh.app. Good balance of control and simplicity.

Best for: Visual testing workflow, quick experimentation.

Each encoder may produce slightly different results at the same settings. Test with your chosen tool to establish your baseline.

Real-World Performance Data

Here's actual file size data from converting the same 2000x1333px photograph:

Format & Settings File Size Quality Score Notes
Original PNG 3.2 MB 100/100 Lossless baseline
JPEG Quality 90 487 KB 88/100 Standard high quality
JPEG Quality 75 198 KB 79/100 Typical web quality
WebP Quality 80 156 KB 85/100 Better than JPEG
AVIF Quality 75, Speed 6 89 KB 86/100 Recommended setting
AVIF Quality 65, Speed 6 58 KB 81/100 Aggressive compression
AVIF Quality 85, Speed 4 127 KB 91/100 High quality option

Quality scores use SSIM (Structural Similarity Index) to measure perceptual quality objectively.

Browser Support and Fallback Strategy

AVIF works in Chrome, Edge, Opera, Firefox, and Safari (iOS 16+, macOS Ventura+). That covers about 90% of users.

Always provide fallback formats:

Use the <picture> element for automatic fallback:

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

This ensures everyone gets the best format their browser supports.

Frequently Asked Questions

Q: Is AVIF quality 75 better than JPEG quality 85?
A: Yes, in most cases. AVIF's advanced compression creates better-looking images at the same file size. AVIF quality 75 typically produces files 40-50% smaller than JPEG quality 85 while maintaining equal or better visual quality. The codec handles gradients, textures, and colors more efficiently than JPEG's block-based approach.
Q: Why do my AVIF images take so long to encode?
A: AVIF encoding is computationally intensive, especially at low speed settings (0-3). Each speed level dramatically affects encoding time. Use speed 6 for production work—it balances encoding time with compression efficiency. If you need faster encoding, increase the speed setting to 7-8, accepting slightly larger files. Tiling also helps by enabling parallel processing on multi-core systems.
Q: Should I use 4:2:0 or 4:4:4 chroma subsampling for web images?
A: Use 4:2:0 for photographs and natural images—it creates files 30-40% smaller with no visible quality loss. Use 4:4:4 only for images with text, screenshots, logos, or graphics with sharp color transitions. The full-color preservation of 4:4:4 prevents color fringing around edges but creates noticeably larger files.
Q: Can I convert my entire JPEG library to AVIF?
A: Yes, but test first. Converting JPEG to AVIF involves re-encoding, which adds compression artifacts on top of existing JPEG artifacts. For best results, convert from original source files (PNG, RAW) when possible. If you only have JPEGs, use AVIF quality 80-85 to minimize additional quality loss. Always keep original files as your archive.
Q: What's the best quality setting for mobile-first websites?
A: Use quality 65-72 for mobile-optimized images. Mobile screens are smaller and users typically scroll quickly through content. This quality range cuts file sizes significantly (50-60% vs JPEG) while maintaining good visual quality on smaller displays. Test on actual devices—what looks good on desktop may show artifacts on high-DPI mobile screens, and vice versa.

Summary and Final Recommendations

The best AVIF encoding settings balance three factors: visual quality, file size, and encoding time. For most web use, start with these proven settings:

Test with your actual images before committing to production settings. Different content types respond differently to compression. What works perfectly for landscape photography might not suit product photography or technical documentation.

Remember that AVIF encoding is slower than JPEG or WebP. Build this into your workflow with batch processing or automated pipelines. The file size savings—typically 40-60% smaller than JPEG—make the encoding time worthwhile for high-traffic websites.

Always provide fallback formats for browsers without AVIF support. The <picture> element handles this automatically, ensuring the best experience for all users.

Start converting your highest-traffic images first. These give you the biggest bandwidth savings and fastest return on the time invested in encoding.

Last updated: September 2025