ShortPixel Adaptive Images doesn't serve WebP images, why is that?
First of all, make sure that no plugin or lazy-load feature is conflicting with SPAI: I installed ShortPixel Adaptive Images but it doesn't seem to work
Now, make sure the option "WebP Support" is option is active on Settings > ShortPixel AI :
If you have this setting active, then WebP images should be served. Please note that the extension of the URLs of the images served by ShortPixel won't change, so your URLs will still have the original extension (e.g. .jpg), but the actual image will be WebP. The reason for this is that changing the image extension in URL would have required an additional request and this is not optimal.
If you look at the image details you'll see that it is actually a WebP image as you can see below:
Disable the WebP delivery everywhere else
If you are using another plugin or service that already delivers your WebP files, you must disable it, because ShortPixel Adaptive Images already converts your images to WebP on the fly. Here's the most common suspects:
- ShortPixel Image Optimizer: go to Settings > ShortPixel > Advanced and disable the option "Also create WebP versions of the images, for free". It should be like this:
WP Rocket: go to Settings > WP Rocket > Media and disable the option "Enable WebP caching":
Any other plugin that delivers WebP images should have such feature disabled.
If the URLs seem correct, and you have the previous settings well configured, and you still don't see the WebP files being served, try enabling the option "Lazy-load the backgrounds" on Settings > ShortPixel AI > Areas. WebP requires lazy-loading, so there's a chance some background images need to have this setting on to be able to be served in WebP format.
JSON data or JS blocks
Depending on your page, you might also need to enable the options "Lazy-load URLs in the JS blocks" and "Lazy-load JSON URLs", both of them located on Settings > ShortPixel AI > Areas:
Background images in CSS files
You should note that the background images defined in CSS files are not served as WebP for compatibility reasons.
When you activate the option "Replace in CSS files", your entire CSS files are hosted in ShortPixel's CDN so the images URLs in them can be replaced (see how does ShortPixel Adaptive Images work). If you had a caching system on your website, it could cache your entire CSS files, and if those contained image URLs in WebP format, your cache system would end up serving WebP images to browsers that don't support WebP.