AVIF files in WordPress: Optimisation and visual quality

The loading speed of a website and the quality of the images are crucial factors for the user experience and search engine ranking. AVIF files (AV1 Image File Format) represent a significant innovation in the field of web images, offering a combination of efficient compression and high visual quality. In this article, we will explore what AVIF files are, their benefits and how to integrate them into a WordPress website.

What is the AVIF format?

AVIF is an image format based on the AV1 video codec, developed by the Alliance for Open Media. This format offers superior compression compared to other popular formats such as JPEG and PNG, maintaining high image quality even at high compression rates.

Advantages of the AVIF format:

1. Efficient Compression: AVIF offers more efficient compression, resulting in smaller file sizes without sacrificing quality
2. High Visual Quality: Maintains excellent image quality, ideal for detailed photographs and complex graphics.
3. HDR Support: AVIF supports High Dynamic Range (HDR) images, enhancing the viewing experience with more vivid colours and superior contrast.
4. Transparency and Animation: Like PNG and GIF, AVIF supports transparency and can contain animations, similar to WebP files.

Integrating AVIF in WordPress

Implementing support for AVIF files on a WordPress website can significantly improve site performance. Here are the steps for integrating this format into WordPress:

Verify Browser Compatibility

Before implementing AVIF, it is crucial to check if the browsers used by your site visitors support this format. As of 2024, modern browsers such as Google Chrome, Firefox and Safari have already started to offer AVIF support.

Upgrade to the latest version of WordPress

Keep your WordPress installation up to date to take advantage of security and compatibility improvements. Newer versions may offer better support for modern image formats such as AVIF.

Manually Enabling AVIF

1. Add Support via the functions.php

file.
You can add support for AVIF files by editing your theme’s functions.php file. Follow these steps:

1. Access the functions.php file: You can do this from the theme editor in the WordPress admin panel or via FTP.
2. Add the Code: Add the following code to your theme’s functions.php file:

function add_avif_support_add($mimes) {
    $mimes[‘avif’] = ‘image/avif’;
    return $mimes;
}
add_filter(‘upload_mimes’, ‘add_avif_support’);

function check_avif($results, $mime, $type) {
    if ($type == ‘image’ && $mime == ‘image/avif’) {
        $results[‘ext’] = ‘avif’;
        $results[‘type’] = ‘image/avif’;
        $results[‘proper_filename’] = true;
    }
    return $results;
}
add_filter(‘wp_check_filetype_and_ext’, ‘check_avif’, 10, 3);

2. Upload and Test AVIF Images

After adding the code, try uploading an AVIF image to the WordPress media library to ensure that support has been added correctly.

Enabling AVIF using plugins

Option 1: WebP express plugin

WebP Express is a popular plugin that also offers AVIF support.

1. Install the Plugin:

• Go to the WordPress administration panel.
• Go to ‘Plugins’ > ‘Add new’
• Find ‘WebP Express’ and install it.

Configure the Plugin:

• Activate the plugin after installation
• Go to ‘Settings’ > ‘WebP Express’.
• In the settings, select the option to enable AVIF.

Option 2: Imagify plug-in

Imagify is another plugin that optimises images and supports AVIF.

1. Install the plugin:

• In the WordPress admin panel, go to ‘Plugins’ > ‘Add new.’
• Look for ‘Imagify’ and install it.

Configure the plugin:

• Activate the plugin
• Go to ‘Settings’ > ‘Imagify’
• In the optimization options, enable AVIF support.

Option 3: Optimole plugin

Optimole is an image optimisation plugin that also offers AVIF support.

Install the plugin:

• In the WordPress administration panel, go to ‘Plugins’ > ‘Add new’.
• Look for ‘Optimole’ and install it

Configure the plugin:

• Activate the plugin
• Go to ‘Optimole’ in the WordPress side menu.
• Register an account and follow the instructions to configure the plugin.
• Make sure to enable AVIF support in the configuration options.

Checking and optimisation

Regardless of the method you choose, it is important to verify that AVIF images display correctly in all supported browsers. Use tools such as Google’s PageSpeed Insights to measure load speed and ensure that AVIF images are contributing to improved performance.

Enabling AVIF in WordPress, either manually or via plugins, can offer significant improvements in the speed and quality of images on your website, providing a better user experience.

Conclusion

The AVIF format represents a great opportunity to improve the loading speed and visual quality of websites. By integrating it into WordPress, developers and site administrators can offer a superior user experience and optimise site performance. As more browsers and platforms adopt this format, AVIF is likely to become a standard for web images in the coming years. Leveraging this advanced technology today can give your site a significant competitive advantage in the digital world.

FAQs

What is AVIF format

AVIF is an image compression format that uses AV1 codec technology to deliver high visual quality at reduced file sizes.

Why should I use AVIF on my website?

Using AVIF can improve the loading speed of your website, which in turn can improve the user experience and your search engine ranking.

How do I convert my images to AVIF?

You can convert your images to AVIF using online tools or desktop software specialised in image conversion.

Do all browsers support AVIF?

No, not all browsers currently support AVIF. Browsers such as Chrome, Firefox and Opera do, while Safari and some older versions of Internet Explorer do not.

What do I do if an AVIF image does not display correctly?

If an AVIF image does not display correctly, consider using a fallback solution that serves an alternative version of the image in another supported format.