How to create and serve WebP files using ShortPixel Image Optimizer

In this article

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.

The WebP images are created only after you have optimized your images. In other words, for already existing images in your Media Library, it is not enough to enable the previous option, you have to optimize them after enabling it. Keep reading if you have already optimized them.

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. In step 1, under "Optimize", uncheck "Media Library". 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).

Read this article to learn more about which delivery method you should use: Which WebP files delivery method is the best for me?

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 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...

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.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us