What is WebP?
WebP is a new image format that has been developed by Google to enable enhanced compression of photos and images. WebP has been able to achieve 80% improvements in image compression over JPEG.
WebP is supported by most modern browsers, and the chart below is valid as of the date of this article:
Red means that the browser is incompatible, while green is compatible.
Configuring EWWW Optimiser and BunnyCDN
EWWW Optimiser is a WordPress plugin that enables dynamic delivery of your images, either as their original files, or as WebP. The plugin ensures that the right file format is served out, depending on what type of client is requesting the file. For example, if an Internet Explorer client browsed your page, they would be served the original image file, while an Opera client would get a WebP served and get the performance benefits.
Installing EWWW Optimiser
The first stage to using EWWW Optimiser to optimise WebP on your WordPress website is to install the plugin. In order to do this, if you go to Plugins > Add New (1), search for EWWW Image Optimiser (2) and then click Install on the plugin (3):
Once you've clicked Install, select Activate when prompted.
Configuring EWWW Image Optimiser
The next thing to do is to navigate to the Settings tab for your WordPress site, and select the new EWWW Image Optimiser that we just installed (1), and then click on the WebP tab (2), enable the checkbox for WebP conversion (3) and then click Save (5). You do not need to enable (4), but you may wish to do it if you are having WebP issues elsewhere.
Once this is done, scroll down and click "Insert Rewrite Rules" so that your webserver is updated with the new configuration.
You may see the error I have on the screenshot above, where my mod_headers are missing. In this case, either ask your web host to enable the Apache extension, or SSH into your host and do the following pair of commands:
harry@WordPress ~# a2enmod headers
Enabling module headers.
To activate the new configuration, you need to run:
systemctl restart apache2
harry@WordPress ~# systemctl restart apache2
Once you've restarted apache2, you should then be able to upload images to your Media Library and see the plugin convert them to WebP ready for use.
Configuring BunnyCDN
Once you've done this, you can go ahead and configure your Pull Zone with our WordPress plugin. We've got instructions on how to do this here. Once you've done that, there is one change we need to make on the CDN Dashboard. Log into BunnyCDN and select the Pull Zone you are using.
Navigate to the Pull Zone you are using, and select the Cache submenu. Ensure that you Dynamic WebP caching enabled, as this means that the CDN will check if the client is able to receive a WebP file, and then serve them one if it is available on your origin:
Once you've done that, the CDN will automatically work out what image file format your client needs. If you reload your site now, you will now see that the files are being served from the CDN, in WebP format if your browser supports it. You will see that the WebP versions of images are a lot smaller, while keeping their quality.
You can validate this by checking one of your pages with images on it in 2 different browsers and using their Developer Modes in order to check a WebP supportive browser is getting a WebP image, and an incompatible browser is getting a standard image. The screenshot below is taken from Opera and shows the WebP image being delivered:
Meanwhile, navigating to the same page in Internet Explorer, and checking the Developer Mode shows me that the image is coming in via a PNG, not via WebP:
This proves that the CDN is correctly detecting weather or not a browser can support WebP, and then is serving out the right file.
