WebP for Image Optimization

To get the most out of your enterprise-grade WP Engine server it is recommended to start offering WebP images. WebP is a type of encoding that compresses image files in order to help them load faster. Files will be up to 34% smaller once compressed and will download for the user more quickly, enhancing their experience. Images tend to be one of the largest additions to page weight so simply put, your WordPress site can perform better by offering WebP files.

There are two types of image compression that can occur with WebP:

• “Lossy” files will be smaller, but the quality will be reduced.
• “Lossless” files will maintain their quality but require a larger file size to do so.

---

WebP Support

Serving WebP is a two-part process; first the browser must be compatible and send the request for WebP images, then the site must be able to find and provide any WebP image files.

Supported Browsers

• Chrome
• Firefox
• Edge
• Opera

These are the most common browsers, but you can find a full list of currently supported browsers and versions here.

Unsupported Browsers

• Safari
• Internet Explorer

Supported file types:

•  .jpg
•  .jpeg
•  .png
•  .gif

---

Suggested WebP Configurations

Below are several options for using WebP on a WordPress website that we’ve tested with WP Engine services.

(Recommended) Advanced Network & Global Edge Security

WP Engine’s advanced network and Global Edge Security configurations automatically optimize images using Cloudflare Polish. This is done on the fly and without the use of additional plugins or code, meaning it’s zero configuration and will not impact your storage space. Simply point your DNS to the advanced network to Global Edge Security network to activate WebP.

On top of automatic WebP conversion, both networks includes many speed and security improvements.

Learn more about the advanced network here.

Learn about Global Edge Security here.

Cloudflare Polish

Polish is a service offered by Cloudflare that will convert images to WebP on the fly. This is a paid service, and if you are already pointing DNS through Cloudflare, the feature simply needs to be toggled on in Cloudflare.

You can find information on enabling WebP Polish through Cloudflare here.

Polish can be enabled independently of WP Engine if you are using Cloudflare services.

If you are using WP Engine’s Global Edge Security or advanced network, Cloudflare Polish is enabled by default. This means your site will use WebP images automatically, without any additional configuration steps.

However, be aware that WP Engine’s configuration will only convert images to WebP if the WebP version of an image is smaller than the original. This means not all images may show a WebP version when using this configuration. To see if the WebP versions of an image is larger than the original, look for the header cf-polished: status=webp_bigger

Disable Polish

Disabling Polish and WebP image optimization can be done using header rules in the Web Rules Engine.

Disable Polish Completely:

In Web Rules, add a Header Rule with the following settings, and purge Network Cache after:

• Action: Set
• Name: cdn-cache-control
• Value: no-transform

Note that this will disable Brotli compression, but GZIP should still be applied by the origin server at WP Engine.

Disable Polish on a single image:

In Web Rules, add a Header Rule with the following settings, and purge Network Cache after:

• Action: Set
• Name: cdn-cache-control
• Value: no-transform
• Conditions:
  • Type: URI
  • Operator: Regex matches (~)
  • Value: example.png

Remember to change example.png with the name of the image.

How to disable Polish for a file type:

In Web Rules, add a Header Rule with the following settings, and purge Network Cache after:

• Action: Set
• Name: cdn-cache-control
• Value: no-transform
• Conditions:
  • Type: URI
  • Operator: Regex matches (~)
  • Value: (\.png|\.jpg|\.jpeg|\.gif)

You can remove or add extensions as needed in the conditions.

---

Manual WebP Configuration

If you cannot use Advanced Network, Global Edge Security, or Cloudflare Polish, you can manually set up WebP using these steps. Be aware that any manual WebP conversion method that uses .htaccess rules will not function as WP Engine does not support the .htaccess file.

1. Convert images to WebP.

As WebP is a type of encoding, you must also first encode (or convert) the image to WebP.

Conversion Methods

• Online Converter
• Precompiled Utilities via Google Developers

2. Upload two versions of each image to the same directory.

One file will end in the original file extension:

• .jpg
• .jpeg
• .png
• .gif

The second (converted) file will have the .wepb file extension added:

• .jpg.webp
• .jpeg.webp
• .png.webp
• .gif.webp

Example: If the original file is located at /wp-content/uploads/2019/06/image.jpg Then ensure your newly converted file is uploaded to the exact same location: /wp-content/uploads/2019/06/image.jpg.webp

3. Contact WP Engine Support

• Support will place a NGINX rule on your site.
• When WebP is requested, this rule checks for available files and serves them.

---

Test WebP

There are a couple of different ways to test if WebP is working.

1. Test the site in a tool such as Google PageSpeed Insights which will reflect WebP image support.
2. You can also curl the file to test the headers, if you’re not seeing the extension added in the browser, like this:

   curl -H "Accept: image/webp"  -sIL "yourdomain.wpengine.com/wp-content/2019/07/myimage.jpg"

   

---

NEXT STEP: Optimize page cacheability to improve load times