How to use webp and avif images with WordPress

When it comes to these next gen image formats, webp was added as a supported format to WordPress 5.8 and similarly avif was added in version 6.5. However if you were to only upload webp and avif images directly to the media library, only some browsers would be able to view your images! Yet using webp and avif images can help shrink the size of your images by up to 36% thus speeding up every image download. So you probably want to get on that, eh?

The trouble is some browsers only support webp and some only support avif… and of course if you have someone visiting your site using a slightly older browser, it’s not going to support either one. That means the solution you choose must serve the next gen image format to the browsers that support it, and fall back to other image formats like jpg and png for the browsers that do not.

Convert Images to WebP and/or Avif

You’ll want to begin by installing a plugin that converts your images to webp or avif formats. To do that, do the usual plugin install process within WordPress: Plugins > Add New then search for an image conversion plugin and install it. Our optimizations have been found to work well with:

• WP Compress
• ShortPixel
• Imagify
• Converter for Media

There may be others! These are simply ones we’ve tested and users have reported as working. One that does not work well is CompressX as it fails to detect our optimized configurations.

Once you have an image conversion plugin installed, proceed to have it bulk optimize your images, then enable its option to serve those images. Here’s how:

How to serve webp and avif images with WP Compress

1. Simply install and activate WP Compress. It will automatically enable image optimization and its CDN that delivers AVIF and WEBP images.
2. That’s it!
3. Tip: if you want the best possible performance, disable page cache with WP Compress and install W3 Total Cache to handle only page caching, leaving WP Compress in charge of everything else!

How to serve webp and avif images with ShortPixel

1. Choose Settings > ShortPixel > WebP/AVIF & CDN
2. Enable “Create WebP Images” and “Create AVIF Images” or just enable AVIF – it does result in better file sizes over webp in most cases. If you have a *lot* of images, it is likely better to pick just AVIF as that will reduce the amount of duplication of images on disk.
3. Enable “Serve WebP/AVIF images from locally hosted files (without using a CDN)”
   • Then enable “Using the picture tag syntax”
   • And finally enable “Only via WordPress hooks (like the_content, the_excerpt, etc)”

Once you have optimized all images and cleared your cache plugin, you will find supported browsers using AVIF or WEBP!

How to serve web and avif images with Imagify

Please see the Imagify guide on using next-gen image formats. Make sure to use the picture tag display method.