How to optimise WordPress with AVIF

In the latest WordPress update to version 6.5 support for the AVIF image format has been added. AVIF has a number of potential benefits arising from its superior compression over other image formats (JPG, PNG and even WEBP). This can help speed up page loads, which in turn can boost SEO, and provide a better user experience.

In this guide, learn how to start using AVIF images in WordPress, from creation to serving them to your visitors. Ensure your website is ready to take full advantage of the performance bonuses in AVIF.

Key Benefits of AVIF:

• Up to 50% smaller file sizes compared to JPEG.
• Over 30% smaller file sizes compared to WebP.
• Support for transparency and HDR (high dynamic range) for professional-grade photos.
• Compatibility with most modern browsers and WordPress.

How to Create AVIF Images

Through image editing software

• GIMP supports AVIF export natively. Simply open your image in GIMP, and then save or export it as AVIF.
• Adobe Photoshop you’ll need to install a third-party plugin, such as the AVIF plugin from the AV1 image format project.

Online conversion tools

• Squoosh: This free, open-source tool allows you to convert images to AVIF directly in your browser.
• Other Conversion Tools: There are several other online tools (convertio, etc) that can help you convert images to AVIF without installing software.

Is Your WordPress Site Ready for AVIF?

As we mentioned earlier, WordPress 6.5 added support for AVIF. However, to use AVIF you need to ensure your server has the ImageMagick library, installed and updated.

To check if your server supports AVIF:

1. Log into your WordPress Dashboard.
2. Navigate to Tools > Site Health.
3. Click on the Info tab.
4. Expand the Media Handling section.
5. Look for AVIF in the list of supported formats.

If AVIF is listed, your server is ready to use it, and you can start optimising your site’s images.

How to add AVIF images to WordPress

If you server supports AVIF and you want to add it to your managed WordPress hosting. You’ll need to add some conditions to ensure that browsers that don’t support AVIF can view those images. The easiest way is via a WordPress plugin but it can also be achieved manually via srcset attributes.

AVIF on WordPress with Plugins

Many WordPress image optimisation plugins can handle the automatic conversion and serving of AVIF images. When users visit your site, the plugin will automatically serve the appropriate image format (AVIF, WebP, or JPEG) based on the browser’s capabilities.

• ShortPixel: Offers automatic conversion to AVIF with quality control settings
• Imagify: Recently added AVIF support with seamless integration
• EWWW Image Optimizer: Provides comprehensive AVIF conversion and delivery options
• Optimole: Cloud-based service that automatically delivers optimised AVIF images