How to create and serve WebP files using ShortPixel Image Optimizer

Using ShortPixel Image Optimizer (SPIO), 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 "Create WebP versions of the images" option in the "Advanced" section of the ShortPixel settings in your WordPress dashboard.

What to do if I want to create WebP but I already optimized my images? #

First of all, make sure you update SPIO to the latest version. This is very important because version 5.0 allows you to create WebP files for images that have already been optimized. With older versions, you'll have to restore your images and optimize them again, spending credits unnecessarily.

Once SPIO is updated to the latest version, follow these three steps:

1. Go to Media > Bulk ShortPixel and click on "Start optimizing".
2. On step 1, under "Optimize", make sure the toggle for "Media Library" is turned on. Then, under "Options", select the option to create WebP files.
3. Follow the further instructions.

For more information, please read this article.

How to deliver the WebP images on the front-end? #

Creating WebP images is only the first step! You also need to make them available to all your users. Fortunately, SPIO provides two different methods for doing this. First, enable the "Deliver the next generation versions of the images in the front-end" option.

Then choose one of the following methods:

1. Using the <PICTURE> tag syntax: This method alters the page code.
2. Without altering the page code (via .htaccess): With this method, a new block of code is inserted into the .htaccess file. This is the recommended option (but usually not compatible with your CDN or if you use NGINX).

Troubleshooting the WebP delivery #

How to check if your WebP images are served correctly #

You can use the browser's developer tools to test if your images are served as WebP. First, go to your website and then press F12. A window similar to the one below should appear. Next, click the Network tab and then click the Img filter.

Press F5 on Windows or CTRL + R on Mac to reload the page, then scroll down to load all images.

You should see all images with the Type webp , regardless of the extension of the file. There is a possibility that in this case you will also see some other irrelevant things, like  svg+xml  or text/html . You can ignore that.

If you can see the Type webp , congratulations! You are now successfully serving WebP images to compatible web browsers.

What to do if WebP images are not served correctly #

If you have problems with SPIO's delivery methods, take a look at these articles first:

• If you selected "Using the <PICTURE> tag syntax", check this: The "Using the <PICTURE> tag syntax" option doesn't work; WebP images won't show up.
• If you selected "Without altering the page code (via .htaccess)", check this: Caveats of delivering WebP or AVIF images via .htaccess

If you still cannot solve the problem, or if our delivery methods do not meet your needs, you should try an alternative solution for serving WebP images, such as…

• replacing ShortPixel Image Optimizer with ShortPixel Adaptive Images (SPAI). SPAI uses a different method to optimize your images and does not make WebP delivery dependent on your server. If you want to learn more about SPAI, read this article.
• configuring your NGINX server (if relevant) to transparently serve WebP files: Configure NGINX to transparently serve WebP files when supported.
• configuring LiteSpeed Cache (if relevant) to deliver the WebP files: How to deliver the WebP generated by ShortPixel with LiteSpeed Cache.
• using another plugin to deliver the WebP files generated by ShortPixel, such as Cache Enabler or WP Rocket. If you choose this option, remember to disable the "Deliver the WebP versions of the images in the front-end" option in your ShortPixel settings.
• if you use Cloudways, enable the WebP Redirection as per the instructions here (step #2). If you choose this option, remember to disable the "Deliver the WebP versions of the images in the front-end" option in your ShortPixel settings.

How to check if the WebP files are physically on your server #

Using FTP, SSH, the cPanel File Manager or by simply installing the WP File Manager plugin, you can check in the /wp-content/uploads/  path to see if a .webp counterpart has been created for your images.