WebP for Image Optimization
To get the most out of your fast WordPress hosting 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.
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.
These are the most common browsers, but you can find a full list of currently supported browsers and versions here.
- Internet Explorer
Supported file types:
Suggested WebP Configurations
Below are several options for using WebP on a WordPress website that we’ve tested with WP Engine services.
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.
On top of automatic WebP conversion, both networks includes many speed and security improvements.
Polish is a service offered by Cloudflare that will convert images to WebP on the fly. This is a paid service, and if you area 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
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.
2. Upload two versions of each image to the same directory.
One file will end in the original file extension:
The second (converted) file will have the .wepb file extension added:
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
- Support will place a NGINX rule on your site.
- When WebP is requested, this rule checks for available files and serves them.
There are a couple of different ways to test if WebP is working.
- Test the site in a tool such as Google PageSpeed Insights which will reflect WebP image support.
- 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"