With WebP becoming more and more prevalent (and rightly so), some users are running in to issues with popular WebP conversion plugins when using a hosting plan or third party service that utilises a HTTP proxy cache, such as a DreamPress or Cloudflare. The technical reason for this is usually due to the fact that these plugins use apache directives to redirect png, gif or jpg images to their webp counterparts on the hosting server and those redirections do not exist in the caching layer. Luckily, Bjørn Rosell has developed a great plugin called WebP Express which presents a solution to this problem!

Installing WebP Express

As with any WordPress plugin, you can install WebP Express directly from your /wp-admin page by navigating to Plugins > Add New and searching for “WebP Express” in the top right search bar:

Once installed, activate WebP Express and navigate to it’s settings’ menu. This can either be found in the Plugins page directly or in the WordPress Settings menu.

Configuring WebP Express

To configure WebP Express with a HTTP proxy cache, set the “Operation mode” to “CDN Friendly” and enable “Alter HTML”. For most hosting plans using a HTTP proxy cache, you will not need to edit the “CDN hostname(s) / hostname alias(es) but if you’re using a CDN to serve your images specifically, this will be necessary. I’d also recommend setting the “Cache-Control header” option to “Do not set”. Every service I’ve encountered which uses a proxy cache have their own caching rules in place and setting additional headers may conflict with this.

Making Sure your Website is Serving WebP Images

Now that WebP Express is configured, you can test the conversion process from the settings page using the “Live Test” button.

Personally, I also like to ensure the site is serving WebP images appropriately by loading it up in DevTools Network tab. It is important to note that the URL will still list the file in it’s original format but you should see a difference in file size between the jpg original and the webp redirect!