The WordPress Webp Express plugin (by Bjørn Rosell) is an incredible tool to both generate and serve .webp format images on your WordPress site and support webp on WP Engine. It automates both the conversion of .jpg and .png format images, and it offers multiple methods of implementing the logic to only serve .webp images to browsers that support it (ie, Chrome does, Safari does not at the time of writing).

Supporting .webp is a great way to pass Google Pagespeed Insights and Lighthouse’s Serve images in next-gen formats metric.

Up until recently there were compatibility issues with this plugins ability to fully handle webp on WP Engine, specifically the Enable redirection to converter feature (due to how WP Engine handles one of the headers). As of version 0.17.1 (released October 3rd ’19) – the plugin now checks to see if it’s on WP Engine and implements some new fancy tricks to ensure it functions to its full potential.

From version 0.17.1 on WebP Express works with WP engine and this combination will be tested before each release.You can use the plugin both in “Varied image responses” mode and in “CDN friendly mode”.

I am on WP Engine | Webp Express FAQ

While it does this fancy new stuff out-of-the-box, there are quite a few options in the plugin settings that may be a bit daunting at first, in this article I will show the best configuration for WP Engine (and Cloudflare if you happen to be using that too).

Step 1: Install the plugin & contact WP Engine support

Assuming you’ve already installed the plugin, pop into WP Engine’s 24/7 support chat and ask them to add this snippet to your install’s nginx configuration:

# WebP Express rules
# --------------------
location ~* ^/?wp-content/.*\.(png|jpe?g)$ {
  add_header Vary Accept;
  expires 365d;
  if ($http_accept !~* "webp"){
    break;
  }
  try_files
    /wp-content/webp-express/webp-images/doc-root/$uri.webp
    $uri.webp
    /wp-content/plugins/webp-express/wod/webp-on-demand.php?xsource=x$request_filename&wp-content=wp-content
    ;
}

# Route requests for non-existing webps to the converter
location ~* ^/?wp-content/.*\.(png|jpe?g)\.webp$ {
    try_files
      $uri
      /wp-content/plugins/webp-express/wod/webp-realizer.php?xdestination=x$request_filename&wp-content=wp-content
      ;
}
# ------------------- (WebP Express rules ends here)

FOR DEVELOPERS: If you want to play around with this nginx configuration, you can read more about the logic and different methods from the plugin developer here.

Step 2: Configure the plugin settings

There are an absolute ton of ways to configure this plugin, but I’ll save you some trouble if you want to get up and running nice and fast. Here are the settings I use for webp on WP Engine behind Cloudflare:

  • Operation mode: CDN friendly
    • Scope: All content
    • Image types to convert: Both jpegs and pngs
    • Destination folder: Mingled
    • File extension: Append “.webp”
    • Destination structure: Document root
  • Create webp files upon request? Checked
  • Jpeg Options
    • WebP encoding: Auto
    • Quality for lossy: Fixed quality, 100
    • Quality for lossless: 100% lossless
  • PNG options
    • Webp encoding: Lossless
    • Quality for lossless: 100% lossless
    • Metadata: No metadata in webp
    • Convert on upload: Checked
  • Alter HTML? Checked
    • What to replace: Replace <img> tags with <picture> tags, added the webp to srcset.
    • Dynamically load picturefill.js on older browsers: Checked
    • Reference webps that hasn’t been converted yet: Checked

Here’s a screenshot for good measure:

It’s worth noting that while these are the settings I use to ensure compatibility with Cloudflare, they should work fine if you’re using another CDN, or no CDN at all.

Optional: MaxCDN compatibility

If you’re using the CDN that comes bundled with WP Engine’s plans (MaxCDN), follow all the same settings as above, but make sure you enter the CDN url in the input box at the bottom of the Alter HTML section (CDN hostname(s) / hostname alias(es)):

Optional: Using Varied Image Reponses

If for some reason you need to use the Varied image responses instead of CDN friendly operation mode and are behind Cloudflare – you’ll just need to add a page rule (Cloudflare.com -> Page Rules page) to exclude .jpg from their cache:

Conclusion: Fully support webp on WP Engine

With this configuration, any browser request for a .jpg or .png will automatically try to load the .webp equivalent only in browsers that support that format. If the .webp equivalent doesn’t exist – the original image will be served to the browser but also sent to the plugin’s converter so it will be ready for the next request.

If you want to force all of your existing images to be converted manually, just click the Bulk Convert button on the plugin’s settings page. Keep in mind, the batch conversion can take a good deal of time depending on how many images you have.

This is the best method I’ve used for supporting webp on WP Engine (and it’s free). This should take care of the Serve images in next-gen format flag in Google Pagespeed Insights. Why not check out our 36 minute guide on hammering out some of the other metrics on Google Pagespeed Insights here.

Elementor Page Builder

Related Articles

Copyright © 2019 Nodeflame

HOW TO: Set up Webp image support with Webp Express, WP Engine & Cloudflare (or MaxCDN)

by nodeflame time to read: 4 min