How to create and serve WebP files using ShortPixel Image Optimizer
Starting with version 4.1 of the ShortPixel Image Optimization plugin, we added the possibility to also create a WebP image alongside the existing images when optimizing them with our service.
WebP is a modern image format created by Google, that provides superior lossless and lossy compression for images on the web. According to Google, WebP lossless images are 26% smaller in size compared to PNGs.
Lossless WebP supports transparency (also known as alpha channel) at a cost of just 22% additional bytes. For cases when lossy RGB compression is acceptable, lossy WebP also supports transparency, typically providing 3 times smaller file sizes compared to PNG – that’s a huge improvement.
How to create WebP images?
Just enable the option "Also create WebP versions of the images" in the Advanced section of the ShortPixel settings on your WordPress dashboard, and the WebP images will be created after optimizing the images.
The WebP versions of the images are only generated when the images are being optimized. So if you need to create the WebP versions of the images after you optimized the images, the easiest way would be to:
- Restore the images to their originals
- Make sure you activate the option “Also create WebP versions of the images” located on Settings > ShortPixel > Advanced.
- Relaunch the bulk optimization.
How to serve the WebP images on the front-end?
Starting with version 4.12.2, you are also able to display WebP versions of the images on the pages of your WordPress website using one of this methods:
- Using the <PICTURE> tag syntax. This method alters the page code.
- Without altering the page code (via .htaccess). This option will insert a new block of code into the .htaccess file. This is the recommended option (but incompatible with your CDN).
Please have a look at this article to know more about which one you should use: Which WebP files delivery method is the best for me?
If neither of these options suit your needs, or you find issues with them, you should try an alternative solution for serving WebP images like:
- replacing ShortPixel Image Optimizer with ShortPixel Adaptive Images
- if you have an NGINX server, editing the NGINX config files
- using another plugin to deliver the WebP files created by ShortPixel, like Cache Enabler or WP Rocket. If you choose this way, remember to uncheck first the option "Deliver the WebP versions of the images in the front-end"!
How to make sure that the WebP images are served correctly
You can test it using the Developer Tools of the browser. First, go to your website and then press F12. A window on the bottom will appear, like this:
Then press CTRL + R on Mac or F5 on Windows into the window to reload the images on the website. It will look like this:
You should see all the images with type WebP, regardless of the extension of the file. There’s a chance you will also see some other irrelevant stuff, like svg+xml, or text/html. You can ignore it.
If you can see the WebP extension type, then you are now successfully serving WebP images to compatible web browsers.
How to check if the WebP files are on your server
Using the WP File Manager plugin, you could check inside the path wp-content/uploads/ if your images have a .webp counterpart.
You could also make the same test using cPanel File Manager, FTP or SSH.