I installed ShortPixel Adaptive Images but it doesn’t seem to work
Enable WebP #
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 the URL would have required an additional request, and that is not optimal.
Take, for example: https://cdn.shortpixel.ai/spai/w_604+q_lossless+ret_img+to_webp/https://blog.shortpixel.com/wp-content/uploads/2019/04/Boost-Page-Speed-1024×685.jpg
If you look at the image details you’ll see that it is actually a WebP image as you can see below. You can also find another indicator of WebP: the URL contains the parameter to_webp.
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 “Deliver the next generation versions of the images in the front-end”. It should look like this:
-
WP Rocket: go to Settings > WP Rocket > Add-Ons and disable the WebP Compatibility add-on:
-
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:
New AI engine #
ShortPixel Adaptive Images can function with or without jQuery. Performance-wise, it is much better without jQuery, and that’s what the New AI engine offers you. In addition, the New AI engine allows to serve WebP more easily, with less dependencies that existed in the past.
Please update the plugin to the newest version, go to Settings > ShortPixel AI > Behaviour on your WordPress dashboard, and enable the option “New AI engine”. Flush your cache, and try again.
CSS files, JSON data or JS blocks #
Depending on your page, you might also need to enable the options “Replace in CSS files”, “Replace in the JS blocks” and/or “Replace in JSON data”, all of them located on Settings > ShortPixel AI > Areas:
External images #
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.