How To Use Images In AVIF Format In WordPress
June 28, 2021 / Code, Plugins, SEO, Tips / Guides, WordPress.org / 5 minutes of reading
If you want to offer a website as optimized as possible there are many ways to do it, but a basic one is to use image formats that offer the highest quality with the lowest possible file weight, as images are one of the heaviest elements of any website.
When choosing image formats we usually have several options at the moment, compatible with most browsers:
- JPG – Normally compressed format, does not support transparency.
- PNG – Uncompressed format, supports transparency.
- WebP – Compressed or uncompressed format, supports transparency.
And yes, we can optimize our web load quite a bit using these formats properly, but we can go even further, using what in the main web metrics (Core Web Vitals) is called new-generation image formats, and this is where AVIF comes in.
AVIF
In 2018 AVIF came out, or AV1 image format, an image format that uses the same compression algorithms as video files, offering high quality at minimum weights.
Companies such as Netflix are already using it for all the covers of their movies and series, for its advantages of adaptation to different types of devices, as well as for its excellent quality-weight ratio.
Why Is AVIF Better?
If we talk about new image formats, AVIF solves the major problems of WebP (which again has little, since it has been with us for 10 years).
We could consider AVIF an update of the WebP format, since both are based on video coding algorithms.
But if we talk about limitations, WebP is limited to a color depth of 8 bits, and can only store color at half the image resolution. This results in saturated, smeared or pixelated color edges.
In contrast, AVIF supports full 10-bit and 12-bit resolutions, with high dynamic range (HDR).
AVIF also uses a new compression method, called chroma-from-luma. To give you an idea of why it makes a difference, most image formats store brightness and color saturation separately, but AVIF uses the brightness channel to adjust the color channel, as they are usually related.
The result is smaller file sizes and sharper edges at all image sizes.
In this gallery the differences can be better appreciated:
AVIF Compatibility With Browsers
Currently the AVIF image format is only recognized by Chrome browsers (since version 85), also on Android, Firefox (since version 91) and Opera Mobile (since version 62), with support planned for Safari, but not yet known for Edge.
How To Save As AVIF Or Convert To AVIF Format
The next problem we are going to encounter is that many of the tools included in current operating systems do not allow saving as AVIF, so we will have to initially have the images in other formats and then convert the images to AVIF format.
I personally like the free web service Squoosh, which allows you to convert images to and from almost any format, including AVIF.
It also allows you to see the result of the conversion as you go along, both visually and in terms of the resulting size.
Another way to convert to AVIF is to use the converter included in the official website of the project.
In any case, AVIF support is being incorporated into modern operating systems. For example, Microsoft allows displaying AVIF files in Paint and the file manager since Windows 10.
For all other operating systems, we can open and export files as AVIF from the cross-platform editor GIMP.
How To Use AVIF In WordPress
The first stumbling block to be able to use the AVIF image format in WordPress is the supported MIME types.
WordPress Does Not Allow Uploading AVIF Files
In fact, currently even WordPress does not allow uploading SVG and WebP formats by default, and of course not even AVIF format files.
To bypass this limitation I recommend that you add the following function to your customizations plugin, or failing that to the functions.php file of the active child theme:
/* New generation image formats compatibility */
function wphelp_compatibility_new_image_formats( $mime_types ) {
$mime_types['webp'] = 'image/webp';
$mime_types['heic'] = 'image/heic';
$mime_types['heif'] = 'image/heif';
$mime_types['heics'] = 'image/heic-sequence';
$mime_types['heifs'] = 'image/heif-sequence';
$mime_types['avif'] = 'image/avif';
$mime_types['avis'] = 'image/avif-sequence';
return $mime_types;
}
add_filter( 'upload_mimes', 'wphelp_compatibility_new_image_formats', 1, 1 );Code language: PHP (php)You would only need the $mime_types [ 'avif' ] line to add AVIF compatibility but by the way I have added other formats that you might need soon, like webp, heic or heif, you’re welcome.
When you save the changes you will be able to upload these new file formats.
Upload AVIF Via FTP
Another way to bypass this WordPress restriction is to upload the files directly by FTP or from the file manager of the hosting and copy the URL to use it later, but it is too complicated, at least from my point of view.
Plugins For WordPress To Support AVIF Files
On the other hand, if you don’t feel comfortable adding codes you can use the Mime Types Plus plugin to add the new formats from a more visual interface.
CloudFlare, CDNs And AVIFs
The CloudFlare CDN supports AVIF files, so it will include them in the content caching and delivery strategy, no problem there.
Also ImageEngine’s CDN supports AVIF, and through its plugin allows the delivery of these formats.
Plugins For Serving AVIF Image Files
The easiest way to start using AVIF format image files is through plugins, although there is little to choose from at the moment.
One that does a good job is ShortPixel Image Optimizer, which allows you to convert to WebP and AVIF, as well as deliver these new formats to your website, albeit with paid credits.
Serving AVIF Images Via HTML
If you are comfortable with HTML it is easy to provide images in AVIF and other formats using the tag, for example:
<picture>
<source srcset="imagen.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<img src="imagen.jpg" alt="">
</picture>Code language: HTML, XML (xml)Why WordPress Should Support AVIF
WordPress, with a global deployment of more than 40% of the entire web, it is important that it adopts new technologies and formats that, like AVIF, contribute to making a faster and more accessible web for everyone.
The AVIF format allows to deliver high quality images and low weight, but above all with less bandwidth consumption than other formats, and this is especially important in countries where the available bandwidth is not as we are used to in the first world.
WordPress has a great potential, but also a great responsibility, to contribute to make a better web, more accessible to all, and this would be another small step.
Source :
https://wphelp.blog/how-to-use-images-in-avif-format-in-wordpress/