How AVIF Works and How it Can Be Enabled

AVIF support is now introduced on Imagify v2.2. You can choose to convert your images to the AVIF version and display them on your website by selecting between 2 different options.

It is important to note that the WebP conversion on Imagify v2.2 will be enabled by default. This means that if the AVIF creation option is not enabled then Imagify will still convert your images during the optimization procedure to Next-Gen formats which will be WebP.

Enable AVIF image conversion

You can enable the AVIF conversion through the Imagify plugin’s settings page. Once the AVIF creation is enabled then when an image gets optimized by Imagify an AVIF version of the image will be created.

The AVIF file version once created won’t be listed on your Media Library but you should be able to see that it was created on the Imagify column through Media Library(List View) as there will be the line:

Next-Gen generated: Yes

Display Next-Gen images option

When you enable the option “Display images in Next-Gen formats on the site” and the “Create AVIF versions of images” is enabled then:

a. AVIF is tried to be displayed if the browser handles it and there is an AVIF image created

b. If the browser doesn’t accept AVIF or AVIF is not present, then it tries to display the WebP version

c. If a browser doesn’t accept WebP or WebP doesn’t exist, the optimized image will be displayed

You can choose between 2 ways for the Next-Gen image formats to be displayed on your site which are:

• Use rewrite rules
• Use <picture> tags

Both of these options will provide fallback support, so if a visitor is using a browser that doesn’t support Next-Gen images, the optimized JPG or PNG versions will be served instead.

Use rewrite rules

The Use rewrite rules option can be used in cases where the Use <picture> tags option is not working well. It works by adding rewrite rules to your .htacess file if you’re site is using an Apache or Litespeed server.

This option will not change the HTML of your pages, so it may appear as though the non-Next-Gen versions of your images are still being served on the pages, but the rewrite rules work in the background to actually serve the Next-Gen versions. You can use our guide for checking that images are displaying in Next-Gen format to be sure it’s working properly.

There are some limitations of this option that should be mentioned as well:

• If you’re using Cloudflare, it will often cache and incorrectly serve Next-Gen images to browsers that don’t support them yet (mostly older versions of Safari). When this happens, there will be blank space where the images are supposed to be displayed, so that’s why we don’t recommend them to be used together.
• If your images are served from an external CDN rather than from your own server, there is no way rewrite rules on your server can be applied to those images. Alternatively, you may check with your CDN provider to see if they have an option for serving Next-Gen images.

Use <picture> tags

This option works by searching the HTML of your site’s pages for <img> elements and replaces them with <picture> elements. 

It should be noted that there are a couple of limitations of this option, including:

• Layout issues can be caused with your images in some cases, so be careful to check for these on your pages. These issues can often be corrected with some custom CSS styles.
• Background images defined in CSS code cannot be swapped out for HTML <picture> tags, so Next-Gen versions will not be displayed for those when using this option.
• If a Theme, plugin, or script loads <img> elements on the page after Imagify has already crawled your HTML source code, it won’t be possible for Imagify to apply Next-Gen markup using <picture> elements.

The easiest solution if any of these apply to your site is to use the Use rewrite rules option instead, as long as you don’t use a CDN or Cloudflare.