AVIF in WordPress: Better Than WebP?

AVIF is a modern image format gaining popularity among web developers for its impressive compression and visual quality. In this post, we’ll explore what AVIF is, how to use it in WordPress, and how it stacks up against WebP.

AVIF offers significantly smaller file sizes than WebP and JPEG, making it ideal for performance-focused WordPress sites.

What is AVIF?

AVIF (AV1 Image File Format) is an image format based on the AV1 video codec. It supports high compression efficiency, HDR, transparency, and a wide color gamut, all while maintaining excellent quality. AVIF is designed for the modern web, offering smaller file sizes compared to WebP and traditional formats like JPEG or PNG.

Benefits of Using AVIF in WordPress

• Smaller file sizes: AVIF often delivers 30–50% smaller images than WebP without noticeable quality loss.
• Transparency support: Just like PNG and WebP, AVIF supports alpha channels.
• HDR and wide color support: AVIF can display richer, more vibrant colors.
• Next-gen compression: Based on the AV1 codec, it’s designed for modern devices and browsers.
• Improved page speed: Lighter images mean faster loading times and better Core Web Vitals scores.

Although AVIF is newer and not universally supported yet, its performance advantages are too significant to ignore for speed-optimized WordPress sites.

Browser Support

Most modern browsers now support AVIF, including Chrome, Firefox, and Opera. However, Safari has limited support, and older browsers do not recognize AVIF files. That’s why it’s best used alongside fallback formats like WebP or JPEG.

How to Use AVIF in WordPress

WordPress doesn’t support AVIF by default as of version 6.5, but you can add support in several ways:

1. Enable AVIF Upload Support via Functions.php

// Allow AVIF uploads
function allow_avif_uploads($mime_types) {
    $mime_types['avif'] = 'image/avif';
    return $mime_types;
}
add_filter('upload_mimes', 'allow_avif_uploads');

2. Use a Plugin like Converter for Media

Converter for Media is a popular plugin that can convert uploaded images to WebP and AVIF formats. It automatically serves the best format depending on browser support, ensuring optimal performance for all users.

3. Convert to AVIF with LiteSpeed Cache

If you’re using a LiteSpeed server, the LiteSpeed Cache plugin offers built-in support for converting and serving AVIF images. Under the Image Optimization tab, you can enable AVIF conversion with a fallback to WebP or original formats. This solution is seamless and highly efficient.

4. Serve AVIF with Fallback using <picture> Tag

The <picture> tag allows you to serve modern image formats like AVIF with fallbacks for older browsers:

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

Browsers try each <source> in order. If AVIF isn’t supported, WebP will load. If neither are supported, the JPEG fallback will display.

Always include a .jpg fallback to ensure full compatibility.

AVIF vs WebP: Comparison Table

Which Format Should You Use?

If your audience primarily uses modern browsers, AVIF offers better compression and color capabilities, making it the superior choice for performance.

However, for broader compatibility, a fallback strategy using <picture> tags or a plugin that serves the best format per browser is ideal.

Conclusion

AVIF is a powerful image format for modern WordPress websites, offering next-gen compression and quality. While WebP remains more universally supported, combining both formats ensures you deliver fast-loading, high-quality images to all visitors.

To future-proof your WordPress site and maximize performance, start integrating AVIF today, alongside WebP as fallback, for the best results.