AVIF Image Format: The Good and the Bad

AVIF image format is finally natively supported by WP

On April 2, 2024, WordPress 6.5 “Regina” was released. Among many improvements, there’s one related to the newest image format supported by the WP – the AVIF image format. Yes, the WP core now officially supports the AVIF image format. Is it a game-changer? Does that mean that my WP website will be even faster now?
Well, no. And yes.

Why AVIF image format?

In WPservice.pro everlasting quest for even more efficient image formats, smaller image files, and more speed, the AVIF (AV1 Image File Format) emerges as the new teacher’s pet, the youngest and brightest. Developed by the Alliance for Open Media, this open, royalty-free image format uses AV1 compression, offering a compelling alternative to older formats like JPEG, PNG, and WebP. Its edge? AVIF combines superior compression efficiency with high-quality image retention, setting a new standard for image formats across the web and beyond.

The Foundation of AVIF

AVIF’s roots trace back to the collaborative effort of leading technology companies, which aimed to create a versatile, efficient, and high-quality codec. The format leverages the AV1 video codec’s advanced compression techniques within the HEIF container, offering a broad spectrum of features like HDR (High Dynamic Range) imaging, wide color gamut, and transparency without sacrificing quality.

Unpacking the Technical Excellence

AVIF’s superiority in image compression doesn’t come at the cost of visual fidelity. Through techniques such as chroma subsampling and adaptive quantization, AVIF significantly reduces file sizes while maintaining image quality. Its support for features like lossless and lossy compression, alpha channels for transparency, and extended color spaces enhances its utility and versatility in diverse applications​.

In my tests, AVIF images are smaller than the current WebP standard – sometimes by a lot (even 5x smaller on some files), sometimes barely smaller. For example, a featured image on this post is 42,6 KB in WebP format and close to 31 KB in AVIF format. That’s great; let’s all move to AVIF, correct? Not so fast.
We’ll get to the negative aspects later.

Broadening Horizons: Adoption and Support

The format’s adoption is evidenced by its support across various platforms and browsers. Not only the WP core, major operating systems like Android, iOS, macOS, and Windows, along with browsers like Chrome, Firefox, and Edge, have all embraced AVIF, paving the way for its integration into web standards. Image editing tools and content delivery networks (CDNs) also incorporate AVIF, signaling a shift towards broader acceptance.

What about the AVIF on WordPress?

Currently, AVIF images are supported on WordPress like any other image format, but AVIF relies on your web server’s image processing library.

If you’d like to adjust the default compression level used for generated AVIF images, you can use this filter:

// Use a quality setting of 75 for AVIF images.
function filter_avif_quality( $quality, $mime_type ) {
	if ( 'image/avif' === $mime_type ) {
		return 75;
	}
	return $quality;
}
add_filter( 'wp_editor_set_quality', 'filter_avif_quality', 10, 2 );

And if you’d like for the WP to create AVIF images when you upload JPEGs, you can use this code (be aware it’s a resource-heavy process, and your web-host server may penalize you for it, use on your own risk):

// Output AVIFs for uploaded JPEGs
function filter_image_editor_output_format( $formats ) {
	$formats['image/jpeg'] = 'image/avif';
	return $formats;
}
add_filter( 'image_editor_output_format', 'filter_image_editor_output_format' );

A cloud on the horizon – Practical Considerations

I had a short conversation about AVIF with Shane Bishop (you may know him as the founder of that little Image Optimization plugin – EWWW IO; maybe it rings familiar. The best one on the market – yes, that’s the one). Naturally, I asked him if he would implement AVIF conversion capability into the EWWW IO. Here’s his reply:

So, AVIF currently has the best compression, but it uses a lot of CPU power to achieve it, making it impractical for websites with many images.

The Verdict on AVIF image format

AVIF is not just another image format but a leap forward in digital imaging technology. With its unmatched compression efficiency, high-quality output, and broadening support ecosystem and yet – I will use it sparsely. At least until they find out how to compress images more efficiently, its unmatched compression rates will not shine so bright.

Don’t get me wrong – AVIF is a great format – I’ve tested it on our website, and even our Speed Loss Calculator tool agrees. If you have a website with only a few images, go for it – AVIF away. As it is now, it’s not for the masses and not in bulk. Your web host server might object.

There you go. Yes, it’s a good thing; it can make your website faster, but no, it’s not the best thing since sliced bread. We’ll have to wait for AI to develop something more efficient in compressing and creating format files.