How to deliver the WebP generated by ShortPixel with LiteSpeed Cache

If you want to use LiteSpeed Cache instead of ShortPixel Image Optimizer (SPIO), but still use SPIO to create the images, you need to do the following:

1. Add this line to your wp-config.php file. Please do this before you optimize your images.

define('SHORTPIXEL_USE_DOUBLE_WEBP_EXTENSION', true);

This constant makes ShortPixel Image Optimizer to generate WebP files with a double extension ( xxxxx.jpg.webp or xxxxx.png.webp), which is required by LiteSpeed Cache.

If you have already optimized images with ShortPixel, you will need to bulk restore your images, add the previous constant, and then run the bulk optimization again. Another solution in case you already have WebP files with a single extension is to rename your xxxxx.webp files, as described in this other article.

2. Go to the LiteSpeed Cache > Image Optimisation menu:

3. Click the "Image Optimization Settings" tab:

3. Enable " Image WebP Replacement" and "WebP For Extra srcset":

4. Set the rest of LiteSpeed's image optimization settings to OFF. They should be enabled only if you want to optimize your images with LiteSpeed instead of ShortPixel.

5. Go to Settings > ShortPixel > Advanced > Next Generation Images and disable the option " Deliver the WebP versions of the images in the front-end". Remember that LiteSpeed is now responsible for delivering WebP, not ShortPixel.

Alternatives

If you cannot use this method, you should try an alternative solution for WebP image delivery:

• Use one of the WebP delivery option built into SPIO: How to create and serve WebP files using ShortPixel Image Optimizer
• Replace ShortPixel Image Optimizer with ShortPixel Adaptive Images.
• Use another plugin to deliver the WebP files created by ShortPixel, such as Cache Enabler or WP Rocket.
• If you have an NGINX server, you can configure NGINX to transparently serve WebP files when supported.