How to create and serve WebP files using ShortPixel Image Optimizer
Using ShortPixel Image Optimization, you can create WebP images alongside the existing images when optimizing them.
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.
Read more about why WebP is good for your website here: How WebP images can speed up your (WordPress) site - ShortPixel Blog
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.
What to do if I want to create WebP but I already optimized my images?
The WebP versions of the images are only generated when the images are being optimized. In case you want to create the WebP versions of the images, but you already optimized your images, the easiest way would be to:
- Bulk restore all your original images.
- Make sure you activate the option “Also create WebP versions of the images” on Settings > ShortPixel > Advanced.
- Relaunch the bulk optimization via Media > Bulk ShortPixel.
How to serve the WebP images on the front-end?
You are also able to display WebP versions of the images on the pages of your WordPress website using one of the following 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 usually incompatible with your CDN or if you use NGINX).
Please have a look at this article to learn more about which delivery method you should use: Which WebP files delivery method is the best for me?
If neither delivery methods suit your needs, or you encounter issues with them, you should try an alternative solution for serving WebP images such as:
- replacing ShortPixel Image Optimizer with ShortPixel Adaptive Images
- if you have an NGINX server, configuring it to transparently serve WebP files
- using another plugin to deliver the WebP files created by ShortPixel, like Cache Enabler or WP Rocket. If you decide to serve your WebP files using another plugin, remember to uncheck the option "Deliver the WebP versions of the images in the front-end" in your ShortPixel settings.
How to check if your WebP images are served correctly
You can test if your images are served as WebP using the developer tools of the browser. First, go to your website and then press F12. A window should appear, similar to the one below. Next, click the Network tab and then the Img filter.
Press F5 on Windows or CTRL + R on Mac shortcut to reload the page, then scroll down so all your images can load.
You should see all the images with webp Type, regardless of the extension of the file. There’s a chance you will also see some other irrelevant stuff in this case, like
text/html. You can ignore that.
If you can see the WebP extension type, congratulations! You are now successfully serving WebP images to compatible web browsers.
How to check if the WebP files are physically on your server
Using FTP, SSH, cPanel File Manager, or by simply installing WP File Manager plugin, you can check inside the path
/wp-content/uploads/ if your images have a
.webp counterpart created.