High-Performance Images in WordPress with AVIF

Featured image with text high-performance images with the AVIF format in wordpress
Featured image with text high-performance images with the AVIF format in wordpress

WordPress 6.5 introduced core support for the AVIF image format, which is now supported by all major browsers and in most cases is a much better compression format than JPEG, PNG, and even the modern WebP standard. You can start using AVIF images to improve your website’s Core Web Values scores and improve your user’s experience with faster, smaller, and high-quality images.

What is the AVIF Image Format?

Based on Google’s VP9 codec, the AV1 codec is a royalty-free standard developed by the Alliance for Open Media. The format can provide over 50% file size savings compared to JPEG and over 30% savings compared to WebP. It supports transparency, animation, and either lossy or lossless compression at significant file size savings over older formats.

What Types of Images are Best for AVIF?

AVIF is best at compressing photorealistic images. The format supports 8-bit, 10-bit, 12-bit, and 16-bit color depths. AVIF includes HDR support for high dynamic range photos, like professional photos and video.

What Types of Images aren’t Best for AVIF?

Illustrations with limited color pallets, vector graphics and simple animations will not have as much benefit with the AVIF format.

How Can I Create AVIF Images?

Many popular image editing programs now support AVIF. The popular free, open-source image editing suite GIMP (GNU Image Manipulation Program) can export images in AVIF format out-of-the-box.

Adobe Photoshop users will need to install a third-party plugin to support AVIF Exports.

There are also free and open-source conversion apps like Squoosh that you can use to convert your existing images to the new format. There are also numerous WordPress Plugins that you can use to convert your images directly from within your Dashboard.

How Can I Tell if My Website is Ready to Use AVIF?

While AVIF support is now in WordPress Core, you’ll also need a server that has a newer version of the ImageMagick Library that supports AVIF. Our high-performance WordPress managed VPS plans include support for AVIF out-of-the-box.

Here’s how to tell if your current server supports AVIF images.

  1. Log in to your WordPress Dashboard and Navigate to Tools -> Site Health.
  2. Click on the Info tab.
  3. Expand the Media Handling section.
  4. Look for AVIF among the list of ImageMagick supported file formats
    screenshot showing the media handling section of the site health info tool

Conclusion

The AVIF image format can give your site a significant boost in Core Web Vitals scores, overall speed, and save disk space and bandwidth. For a treat, check out this collection of AVIF-encoded animations that are all less than 500 kB in size!

Was this article helpful? Join the conversation!