How to Enable WebP Images and How it Works
There are actually 2 different aspects to enabling WebP images for use on your site via Imagify. The WebP images need to be created and they also need 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. Below, we’ll discuss how Imagify achieves both of these.
Enabling WebP Image Creation
When Imagify optimizes one of your images, a WebP version will be created too as long as you have the Create WebP versions of images option enabled in your Imagify plugin settings page:
So you’ll want to be sure this is enabled before optimizing images. 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:
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:
Enabling WebP Image Display
Once you’ve ensured your images have their WebP versions created, you can next 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
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
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.
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.