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.
Is the image not always WebP?
It is normal to have the images served sometimes from our CDN (thus in WebP format) and sometimes not. Generating a WebP requires more CPU time and our system approach is to first display the original JPG (or PNG) image served from your server while the WebP isn't yet generated. Then, after a few seconds, when the WebP is ready, your WebP CDN-image will be displayed at page reload. This happens the first time a certain image size needs to be generated. Then it is cached and subsequent requests will display the WebP version at once. That's also the behaviour you see from PageSpeed Insights; their algorithm uses a different screen size, so a new WebP size needs to be generated the first time the page is checked.
In short, this is an expected behaviour, and actually it is there to not harm your user experience, otherwise your users would have to wait too much to see an image.
For more information, please take a look at these articles:
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.
ShortPixel Adaptive Images can only optimize images displayed on your website that are hosted on domains associated to your account. This means that if a plugin or your theme is displaying an image from another domain, it will not be optimized, and therefore not served as WebP.