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 Add-ons 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 Image Optimizer

Should WebP Compatibility 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 Compatibility 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 and BunnyCDN have options to enable WebP delivery. If you’re using their options, you don’t need to enable WebP Compatibility in WP Rocket.  

Also, some image optimization plugins such as Optimole, ShortPixel Adaptive Images and WebP Express include the option to serve WebP images from their CDN. You don't need to enable WebP Compatibility either in these cases.

- You are using another cache layer such as Cloudflare's Cache Everything, or Varnish/NGINX caching on your server.
If those other cache layers are not configured to detect WebP compatible vs non-WebP compatible browsers, they will end up serving the wrong cache file. Use the HTML <picture> element method in your WebP plugin instead.

DO enable WebP Compatibility 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 Compatibility option.

What does the WebP Compatibility 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. For example, image.jpg will become image.jpg.webp
  • The WebP cache files have -webp appended to the filename: 

  • If the WebP Compatibility 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 Compatibility 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:

Why are some images not served as WebP?

WP Rocket searches the HTML of the page for images (.jpg, jpeg, .jpe, .png, .gif) found in these attributes: 

  • href, src, srcset, content

If the image is not in one of these supported attributes, it won't be served as WebP. You may force WP Rocket to detect a particular attribute by using this helper plugin.

If images are added in a CSS file, or are not present in the HTML for any reason, they won't be detected and won't be served as WebP.

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/

Configuration for other WebP plugins

  • Optimole and  WebP Express: you shouldn't enable WP Rocket's WebP Compatibility if you've already enabled WebP serving in addition to WebP conversion
  • ShortPixel Adaptive Images:  this plugin automatically serves WebP version of your images, you don't need to enable WP Rocket's WebP Compatibility
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.