Support for AVIF Image Format in WordPress 6.5

Starting from WordPress 6.5, the modern image format AVIF can be used.

AVIF offers significant improvements in image quality and compression compared to other formats: JPEG, PNG, and even WebP. AVIF images can be up to 50% smaller than JPEG while maintaining the same quality. AVIF images also support a wide color range (including HDR) and appear sharper than JPEG.

AVIF images still benefit from responsive images, loading priority, and lazy loading, which WordPress supports by default.

Support for AVIF in Browsers

AVIF is supported by all major browsers, so most websites can start using this format today.

If your site's audience uses browsers that do not support the AVIF format, you can add a polyfill script polyfill.

Using AVIF Images in WordPress

With WordPress 6.5, you can upload and use AVIF images in WordPress just like JPEG or PNG. The only requirement is that your server/hosting must be able to handle AVIF.

In WordPress, images are processed by one of the Imagick or GD libraries, so you need to ensure that you have sufficiently recent versions of these libraries installed on your server that can work with the AVIF format.

To check if the library used on the site can handle AVIF, go to the admin area and navigate to Tools > Site Health and on the "Info" tab, expand the "Media Handling" section, and look for "AVIF" in the list of supported formats:

Creating AVIF Images

Many image editing tools support export to AVIF.

For conversion, you can also use web tools (for example Squoosh) or CLI tools (for example https://github.com/lovell/avif-cli).

After saving images in AVIF, upload them to WordPress and use them just like any other image.

WordPress can also automatically create AVIF images (see FAQ below).

FAQ

How to set the compression level for AVIF images?

Use the Filter wp_editor_set_quality to set quality settings. The $mime_type parameter allows you to set settings by type, for example:

// Change the quality of AVIF images
add_filter( 'wp_editor_set_quality', 'filter_avif_quality', 10, 2 );
function filter_avif_quality( $quality, $mime_type ) {
	if ( 'image/avif' === $mime_type ) {
		return 75;
	}
	return $quality;
}

How to output a lossless AVIF image?

Using a compression level of 100 will set AVIF to lossless mode.

By default, the quality is set to 82.

Can WordPress create AVIF images when uploading JPEG?

Yes. Developers can use the filter image_editor_output_format to specify this type of transformation for uploads. Example:

// Convert JPEG to AVIF when uploading an image
add_filter( 'image_editor_output_format', 'filter_image_editor_output_format' );
function filter_image_editor_output_format( $formats ) {
	$formats['image/jpeg'] = 'image/avif';

	return $formats;
}

If I use WordPress multisite, will all my sites work with AVIF images?

No. In multisite, the file types that users can upload when creating a site are stored. We are still working on improving this with ticket #53167.

For now, to ensure that all existing sites in the network allow AVIF files, you can use the site_option filter in a mu-plugin, where you add avif to the allowed file types for all sites in the network:

// Enable AVIF support for all sites in the network.
add_filter( 'site_option_upload_filetypes', 'filter_site_option_upload_filetypes' );
function filter_site_option_upload_filetypes( $filetypes ) {
	$filetypes = explode( ' ', $filetypes );
	if ( ! in_array( 'avif', $filetypes, true ) ) {
		$filetypes[] = 'avif';
	}

	return implode( ' ', $filetypes );
}

--

Source: https://make.wordpress.org/core/2024/02/23/wordpress-6-5-adds-avif-support/