How to create and serve WebP files using ShortPixel Image Optimizer

Using ShortPixel Image Optimizer (SPIO), you can create WebP images alongside 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 beneficial 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 Images” option in the “WebP/AVIF & CDN” section of the ShortPixel settings in your WordPress dashboard.

WebP images are created only after your images have been optimized. In other words, for existing images in your Media Library, simply enabling the option is not enough—you need to optimize them again 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 versions newer than 4.X allow 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:

Go to Media > Bulk ShortPixel and click on “Start Optimization”.
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.
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.

Option 1 – Using the ShortPixel CDN #

The easiest way to deliver your WebP files is by using the ShortPixel CDN. First, on your WordPress dashboard, go to Settings > ShortPixel > WebP/AVIF & CDN, and enable the “Deliver the next generation images using the ShortPixel CDN” option.

When enabled, the plugin will replace every image URL on your site with CDN URLs that will automatically deliver the WebP format if the browser supports it. For example, if your image URL is https://example.com/wp-content/uploads/2025/02/image.jpg, the new URL will look similar to this: https://spcdn.shortpixel.ai/spio/ret_img,q_orig,to_webp,s_webp/example.com/wp-content/uploads/2025/02/image.jpg

To learn more about this delivery method, click here.

Option 2 – Without using a CDN #

If you don’t want to use the ShortPixel CDN to deliver the WebP files, you can simply deliver the locally generated files from your server. To do this, enable the “Serve WebP/AVIF images from locally hosted filed (without using a CDN)”.

Then choose one of the following methods:

Using the <PICTURE> tag syntax: This method alters the page code and changes each <img> tag with a <picture> tag.
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.

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

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

Only some of the images are served as WebP #

If, after checking whether your images are served as WebP, you find that only some (not all) are in WebP format, there are two possible reasons for this:

Our algorithms may have determined that the WebP version of an image is more than 5% larger than the original. In such cases, our plugin does not store the WebP file on your server to minimize credit consumption and, as a result, does not serve it to your website visitors. To learn more about this behavior, please check this article: Why is my image not converted to WebP or AVIF?
If you are using the ShortPixel CDN to deliver images (with the “Deliver the next generation images using the ShortPixel CDN” option enabled), the process works as follows: The first time an image is accessed, it is registered for storage in the ShortPixel CDN. However, to avoid making users wait a few seconds, the original image is immediately served via an HTTP 307 redirect. After a short delay—typically a few seconds, or a few minutes in rare cases—the image should be fully available on the CDN and will be displayed upon page refresh. Keep in mind that the time it takes for the WebP version to appear may also depend on your browser’s cache. In short, if you are using the ShortPixel CDN, we kindly ask you to wait a few minutes.

None of the images are served as WebP #

If the delivery method that you have chosen doesn’t seem to be working at all, and no image is served as WebP, 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; next-gen 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 selected “Deliver the next generation images using the ShortPixel CDN”, check this: Deliver images using the ShortPixel CDN in SPIO

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). 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 AVIF 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 uncheck both the “Deliver the next generation images using the ShortPixel CDN” and “Serve WebP/AVIF images from locally hosted files (without using a CDN)” options in your ShortPixel settings.

Still stuck? How can we help?