According to Google, images can be compressed much better in both lossless and lossy quality with the WebP format.
👆 The compressed images are much smaller and this can give your site a big boost in performance, especially if it contains a lot of images.
With lossless compression, reductions of up to 26 percent are possible. For lossy compression, i.e. resulting in a loss of the image quality, a 34 percent size reduction can be made. At least, that's what Google claims in its developer blog.
WebP is natively supported at Raidboxes
What you need for WebP delivery: a WebP converter
The free alternative: WebP Express
WebP is natively supported by Raidboxes
Raidboxes supports WebP natively. Whenever your Box finds a WebP variant for an image, it will deliver that format instead of the original JPG or PNG.
What you need for WebP delivery: a WebP converter
In order to use WebP, you need to have WebP variants of your images available. If you already use an image optimization plugin, it's very likely the plugin can create WebP variants of your images and may well generate them automatically already.
Contact the developer of the plugin directly to find out if and how your plugin supports WebP.
The free alternative: WebP Express
The plugin WebP Express is a free tool you can use to create and actively integrate WebP variants of your images without much effort. Follow these steps to set it up:
Step 1: Install and activate WebP Express
Log in to your WordPress site
Navigate to the plugin overview of your Box
Search for WebP Express in the plugin directory
Click on Install
Then click on Activate
If the plugin is active, a message will appear in your WordPress dashboard prompting you to configure the plugin.
Step 2: Configure WebP Express and trigger bulk convert
The plugin is now almost ready to go, you simply need to change one final setting.
Set the Destination folder to Mingled.
If you've set the plugin up as described above, the WebP versions will be saved in the same folder as the original data. This is essential for WebP to work.
Lastly, hit the Bulk Convert button beneath the settings section. This will trigger WebP Express to create webp versions of all you png and jpg images.
Step 3: Test the WebP implementation
In the last step, you should now test whether your Box really delivers WebP images. Checking the image format is a bit tricky because WebP images that are loaded by browsers have the same file extension as the original images. The delivery, therefore, takes place in the background and can't be checked via the file name.
You need to work with the browser console to check the WebP delivery. This is particularly easy in Chrome:
Right-click anywhere on the page and select Inspect element to open the browser console.
Click on Network.
Now refresh the browser. This will load the image again and leave the browser console open.
In the so-called Network view, the loaded resources are displayed in chronological order. Click on the request that represents the test image.
You will now be shown a detailed view of the request. The areas of interest to you are the Request Header and the Response Header.
Check the Request Header by scrolling all the way down in the header area of your console to the Request Header section. In the first line under Accept, you are looking for the WebP format. Specifically, the text snippet is called image/webp.
If this snippet is present, it means a WebP image is actively requested here. The prerequisite for this is that a WebP image is also delivered.
In the second step, you can now look at the Response Header.
You need to scroll up in the header area of your console and look at the Response Header area.
If image/webp is displayed in the Content-Type area, you know that the image is a WebP image.
If the results are positive from both of these checks, it means the plugin is implemented correctly and from now on all images delivered are WebP images.
What to do if the test fails?
If the test is negative, i.e. no WebP image is delivered, it means caches are still interfering. Make sure that all test calls are uncached by emptying the browser and the Raidboxes cache.
WebP in Safari and Cloudflare?
The Safari browser does not support WebP by default. Instead, Apple uses a different image format. If you use Cloudflare, it will still deliver WebP to all browser formats by default - including Safari. This leads to an error in the delivery of the images. You can easily prevent this by excluding WebP images from Cloudflare's caching. Note: you may need to upgrade your Cloudflare subscription first.