WebP Compatibility

WP Rocket does NOT create WebP images for you. You’ll need an additional plugin such as Imagify to handle image conversion.

If your site uses WebP images, WP Rocket can create a separate cache file to serve those if needed. This option is on the Media tab.

Most plugins that create WebP images can also serve the WebP versions for you. In that case you don’t need a separate cache file. 

In this Guide:

Plugins that WP Rocket automatically detects

WP Rocket aims to simplify the compatibility with WebP images by: 

  • Automatically detecting some of the common plugins you might be using for WebP
  • Automatically disabling our WebP option when we detect it's not needed for your configuration

These are the plugins we currently detect automatically:

  • Imagify (from WP Rocket's parent company, WP Media)
  • Optimus
  • EWWW 
  • Shortpixel

Should WebP caching be enabled or not?

When we detect the option isn't needed, according to the configuration on your site, the option will be grey-ed out, with explanatory text:

 But if you’re not using one of the above plugins, or have any doubts about whether or not to enable the option, here are the guidelines:

Do NOT Enable WebP caching if: 

- You are not using WebP images on your site

- Your WebP plugin is serving WebP with htaccess rules
There is no need for WP Rocket to create a separate cache file in this case. 

- Your WebP plugin is serving WebP with the <picture> element
If your WebP plugin can do this, there is no need for WP Rocket to create a separate cache file.

- Your WebP plugin is serving WebP with <picture> element and you are using a CDN
Enable the CDN option in WP Rocket and we will rewrite image references in the picture element to use your CDN URL.
There is no need for WP Rocket to create a cache file in this case. 

- Your CDN provider is handling the delivery of WebP images
Some CDN providers, such as KeyCDN, BunnyCDN and StackPath,  have options to enable WebP delivery. If you’re using their options, you don’t need to enable WebP caching in WP Rocket. 

DO enable WebP caching if: 

- Your site has WebP images and you are not using your WebP plugin to serve them

- You are using a CDN, and your WebP plugin does not have a compatible method to serve the images. 
In this case enable the CDN option in WP Rocket and enable the WebP caching option.

What does the WebP cache option do?

If you are not using another plugin to serve the WebP images, WP Rocket can do it by: 

  • Creating a separate WebP cache file
  • This file is created when a WebP compatible browser accesses your page, or if preloading is enabled
  • For all images on the page we check the uploads folder for a corresponding WebP version. If it exists we update the reference to the image in the code to use the WebP version.
  • The WebP cache files have -webp appended to the filename: 
  • If the WebP cache option is enabled, and preloading is enabled, the WebP cache file will be preloaded instead of the non-WebP cache file. 

  • If a page is accessed from a browser that does not support WebP, we will serve the standard cache file instead. 

  • When WebP caching is enabled, for any page where the images don't have  .webp versions available, we will add a .no-webp file to that cache folder and only create the standard cache file for that page. This saves resources by not unnecessarily duplicating the cache file:

How are WebP images served?

WebP plugins typically use one of the following 2 methods to serve WebP images: 

1. Rules in the htaccess file.

  • In this case, the markup (code) of your site doesn’t change. 
  • This method is not compatible with a CDN

~ OR ~

2. Using the <picture> element in the HTML to directly reference WebP files.

  • The code of your site will be changed to include references to WebP images in a <picture> element. 
  • This method is compatible with using a CDN

If you are using either one of these methods, you won’t need WP Rocket to create a separate WebP cache file. 

To check if your site is serving WebP images, please see this guide: 
https://imagify.io/documentation/how-to-check-if-webp-image-is-displayed-on-your-site/

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.