How to Enable WebP Images and How it Works
Prior to Imagify v2.2 the WebP versions could be enabled by 2 different aspects for use on your site via Imagify. The WebP images needed to be created by enabling the “Create WebP” option and they also needed to be displayed in a thoughtful manner, so fallback support to the optimized JPG or PNG versions of the images can be used if a visitor’s browser does not support WebP.
Now from Imagify v2.2 the “Create WebP” option is no longer available since the creation of WebP images will happen by default and if the “Create AVIF versions of images” option is not enabled through the Imagify Settings. So if you enable only the option “Display images on next-gen format on the site” (without enabling the “Create AVIF versions of images”) the WebP versions created will be displayed on your site.
Enabling WebP Image Creation
When Imagify optimizes one of your images, a WebP version will be created too as long as you have disabled the “Create AVIF versions of images” option in your Imagify plugin settings page:
The WebP files won’t be listed in your Media Library, but as long as they have been created, you should see this for each image in the Imagify column in your Media Library (change to list view):
You can also test for the existence of WebP images by adding a .webp to the end of the file name. Here is an example:
https://example.com/wp-content/uploads/2022/06/image01.jpg
https://example.com/wp-content/uploads/2022/06/image01.jpg.webp
WebP versions will also be created for all the thumbnail images your site and theme use as long as they are enabled in the Files Optimization section of your Imagify plugin settings page:
And you can test for the existence of the WebP versions of thumbnail images in the same way:
https://example.com/wp-content/uploads/2022/06/image01-1536×1536.jpg
https://example.com/wp-content/uploads/2022/06/image01-1536×1536.jpg.webp
Enabling WebP Image Display
Once the WebP versions are created you can then enable the “Display images in Next-Gen format on the site” and decide between using the Use <picture> tags option and Use rewrite rules option for WebP display on your site. Both of these options will provide fallback support, so if a visitor is using a browser that doesn’t support WebP images, the optimized JPG or PNG versions will be served instead. 
Use <picture> Tags Option For WebP Display
This is the default option and it works by searching the HTML of your site’s pages for <img> elements and replaces them with <picture> elements. For example, this <img> element:
Would be replaced with a <picture> element with a <source> element that has links to the WebP versions as follows:
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 WebP 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 WebP 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 (more on why below).
Use rewrite rules option
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-WebP versions of your images are still being served on the pages, but the rewrite rules work in the background to actually serve the WebP versions. You can use our guide for checking that images are displaying in WebP 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 WebP 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 WebP images.
Great! Glat we could help!
Thank's for your feedback
Your feedback has been sent to our team We value every bit of feedback we receive as it helps us to improve our products and services. Thank you for your time.