Troubleshooting AVIF: Common Issues & Solutions

AVIF images won't load. Your website shows broken images. Browsers display errors. Sound familiar?

AVIF is a powerful image format that delivers smaller file sizes and better quality than JPEG or PNG. But it comes with challenges. Browser support isn't universal. Encoding can fail. Fallbacks break. Conversion tools produce corrupt files.

This guide solves the most common AVIF problems you'll face. You'll learn why AVIF images fail to display, how to fix browser compatibility issues, and how to troubleshoot encoding errors. No fluff, just working solutions.

Why AVIF Images Don't Display in Browsers

The most frustrating AVIF problem is simple: your images don't show up. The browser displays a broken image icon or nothing at all.

Browser Compatibility Issues

AVIF support varies wildly across browsers. Chrome added support in version 85. Firefox followed in version 93. Safari joined late with version 16.

Older browsers simply can't decode AVIF files. Internet Explorer never added support. Older Android phones struggle with AVIF. Even current browsers on older operating systems might fail.

Solution: Implement Proper Fallbacks

Use the HTML <picture> element to provide fallback images:

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

Browsers load the first format they support. Unsupported browsers fall back to JPEG.

Server Configuration Problems

Your server might not recognize AVIF files. Without proper MIME type configuration, browsers receive wrong content-type headers.

Check your server's MIME types. AVIF needs image/avif.

Apache Configuration

Add this to your .htaccess file:

AddType image/avif .avif

Nginx Configuration

Add this to your nginx.conf:

types {
  image/avif avif;
}

Restart your web server after making changes.

AVIF Encoding and Conversion Errors

Converting images to AVIF format produces errors. Files come out corrupt. Colors look wrong. File sizes balloon unexpectedly.

Corrupt AVIF Files

Some conversion tools create technically valid but unreadable AVIF files. This happens when:

• The encoder runs out of memory during conversion
• Input images contain unsupported color profiles
• The conversion process gets interrupted
• Encoder settings create invalid combinations

Solution: Use Reliable Encoding Tools

Switch to proven AVIF encoders. libavif is the reference implementation and most reliable option.

Command-line encoding with libavif:

avifenc --min 0 --max 63 --speed 6 input.png output.avif

For web-based conversion, Squoosh.app by Google provides a reliable interface with visual feedback.

Quality Issues After Conversion

Your AVIF images look blocky, blurry, or have strange artifacts. This stems from encoder settings.

The quality parameter ranges from 0 to 100, but AVIF behaves differently than JPEG. A quality setting of 75 in JPEG doesn't match AVIF quality 75.

Recommended Quality Settings

The speed setting affects encoding time, not final quality. Higher speeds process faster but create slightly larger files.

Color Space and Profile Problems

AVIF images display with wrong colors. Bright images look washed out. Vibrant colors appear dull.

This happens when the encoder strips or mishandles color profiles. AVIF supports multiple color spaces, but not all encoders handle them correctly.

Solution: Preserve Color Profiles

Convert images in the sRGB color space when possible. Most web browsers expect sRGB.

With libavif, use the --icc flag to embed ICC profiles:

avifenc --icc input.icc input.png output.avif

For images with wide color gamuts (Display P3, Adobe RGB), test across multiple browsers. Not all browsers handle these correctly.

AVIF Loading Performance Issues

AVIF images load slowly despite small file sizes. Pages feel sluggish. Users see blank spaces where images should appear.

Decode Time Problems

AVIF offers great compression but requires more CPU power to decode than JPEG. On older devices or low-power processors, decoding becomes a bottleneck.

Large AVIF images (above 2000px width) take noticeably longer to decode. Mobile devices struggle more than desktops.

Solution: Optimize for Decode Speed

• Use lower quality settings for larger images (70-75 instead of 85-90)
• Reduce image dimensions before encoding
• Reserve AVIF for hero images and above-the-fold content
• Keep JPEG fallbacks for below-the-fold images

Consider using WebP as an intermediate format. It decodes faster than AVIF while still offering better compression than JPEG.

Progressive Loading Issues

Unlike progressive JPEG, AVIF doesn't show a low-quality preview while loading. Images pop in suddenly rather than appearing gradually.

This creates a jarring user experience, especially on slower connections.

Solution: Implement Loading Placeholders

Use blur-up techniques with tiny placeholder images:

• Create a 20px-wide version of your image
• Encode it as a base64 data URI
• Display it blurred while the full image loads
• Swap in the full-resolution AVIF when ready

Modern frameworks like Next.js and Gatsby provide this functionality built-in through their image components.

CMS and Platform-Specific AVIF Problems

Your content management system or hosting platform blocks AVIF uploads. Images work locally but fail in production.

WordPress AVIF Issues

WordPress doesn't support AVIF uploads by default. The media library rejects .avif files.

Solution: Enable AVIF in WordPress

Add this code to your theme's functions.php:

function enable_avif_upload($mimes) {
  $mimes['avif'] = 'image/avif';
  return $mimes;
}
add_filter('upload_mimes', 'enable_avif_upload');

WordPress 5.8+ includes better AVIF support through the wp_get_avif_info() function. Update to the latest version if possible.

CDN and Caching Problems

Your CDN serves wrong image formats or caches issues incorrectly. Some users get AVIF, others get JPEG, even when their browser supports AVIF.

This happens when CDNs don't respect the Accept header or cache images without considering content negotiation.

Solution: Configure Content Negotiation

Use the Vary: Accept header to tell CDNs and caches to store separate versions for different image formats:

Vary: Accept

Major CDNs like Cloudflare and Fastly support automatic AVIF conversion. Enable this in your CDN dashboard rather than serving pre-converted files.

Check your CDN's documentation for specific AVIF configuration. Cloudflare Polish and similar services handle format negotiation automatically.

Testing and Debugging AVIF Implementation

You need to verify AVIF works correctly across different scenarios. Manual testing across browsers takes too long.

Browser DevTools Inspection

Use browser developer tools to check what format actually loads:

1. Open DevTools (F12 or Cmd+Option+I)
2. Go to the Network tab
3. Reload the page
4. Find your image request
5. Check the Content-Type header in the response

It should show image/avif in supported browsers. If you see image/jpeg or another format, the fallback activated.

Automated Testing Tools

Several tools help validate AVIF implementation:

• Can I Use shows current browser support statistics
• Chrome Lighthouse audits flag missing image optimization opportunities
• WebPageTest compares load times across different image formats

Run these tests from different locations and device types. Mobile performance differs significantly from desktop.

File Validation

Verify AVIF files are actually valid before deploying them. Corrupt files cause silent failures.

Use avifenc with the decode flag to test files:

avifdec input.avif output.png

If decoding fails, the file is corrupt. Re-encode from your source image.

When to Use AVIF vs Other Formats

AVIF isn't always the right choice. Sometimes WebP, JPEG, or PNG work better.

AVIF Advantages

• 20-50% smaller files than WebP for similar quality
• Better quality at low bitrates
• Superior HDR and wide color gamut support
• Excellent for detailed photography

AVIF Disadvantages

• Slower encoding and decoding than WebP or JPEG
• Limited browser support compared to WebP
• Higher CPU usage on older devices
• Tool support still maturing

Advanced AVIF Troubleshooting

Memory Issues During Encoding

Large images consume massive amounts of RAM during AVIF encoding. Your system might crash or hang.

Solution: Control Memory Usage

Reduce input image size before encoding. Resize images to their display dimensions first.

Use the --jobs parameter to limit parallel processing:

avifenc --jobs 1 input.png output.avif

Process images in batches rather than all at once. This prevents memory exhaustion.

Alpha Channel Problems

Transparent PNG images lose their transparency when converted to AVIF. Or transparency works in some browsers but not others.

AVIF supports alpha channels, but encoder settings matter. Some tools default to removing alpha.

Solution: Preserve Transparency

Explicitly enable alpha channel preservation:

avifenc --ignore-alpha 0 input.png output.avif

Test transparency in multiple browsers. Safari handles alpha channels differently than Chrome.

Metadata Loss

EXIF data, copyright information, and other metadata disappear after AVIF conversion.

By default, most encoders strip metadata to reduce file size. But you might need to preserve this information.

Solution: Retain Metadata

Use the --exif flag to preserve EXIF data:

avifenc --exif preserve input.jpg output.avif

Be aware that including metadata increases file size slightly. Decide whether you need it based on your use case.

Additional resources: Web.dev AVIF Guide | MDN AVIF Documentation