ShortPixel Adaptive Images (SPAI) introduced in version 2.1 the Low-Quality Image Placeholders, also known as LQIPs.
What is an LQIP? #
LQIP stands for Low-Quality Image Placeholders. They are very low-quality images that will be loaded with the initial page load, and once the page is fully loaded, they are replaced with the full quality ones.
What are LQIPs good for? #
Since the LQIPs are low-quality images, they are very light. This means that by adding LQIPs to your page, you will actually speed up the loading speed in comparison to a normal loading with your regular images (without LQIP). This is especially useful on slow mobile connections, where the user experience is far better when seeing an LQIP instead of a blank space where an image will then be loaded. In this way, the site visitor will know that an image will be loaded where the LQIP is, thus improving the user experience and also the scores on slow connections.
How does SPAI include the LQIPs? #
src of the lazy-loaded image and then have it replaced with the actual image URL. This means two requests are made for each image.
data-image:base64 src’s. This keeps the number of requests low which is good for SEO.How to activate the LQIPs on ShortPixel AI? #
To activate the LQIPs feature on ShortPixel Adaptive Images, you need to go to Settings > ShortPixel AI > Behaviour and enable the option LQ image placeholders. ShortPixel AI will start generating a cache on your own server with the used LQIPs so they don’t need to be regenerated on each page load. This cache is located on /wp-content/uploads/spai/lqip
Difference between Cron and Instant #
Until the LQIPs are generated (with one of the two methods described below), SPAI will serve them directly from ShortPixel’s CDN (this feature was implemented in SPAI 3.0). After they are generated, SPAI will use the local files instead of the CDN links.
With the Cron method, the LQIPs to be generated are gathered and grouped into Cron jobs, which are then executed in the background. This is the recommended version and also the default one when activating this feature.
When using the Instant method, the LQIPs are sent for generation and processing instantly, when a page is visited, resulting in multiple JavaScript and AJAX requests. This is an experimental feature that is meant rather for testing purposes, or to be used when the Cron jobs aren’t working for any reason. Please keep in mind that this version will increase the number of requests, which can result in additional pressure on the server.
What caching plugins is SPAI integrated with? #
SPAI is currently integrated and tested with the following caching plugins: WP Rocket, Swift Performance (both Lite and Premium), WP Fastest Cache, WP-Optimize and W3 Total Cache. When using one of these caching solutions, the LQIP generation will work as expected.
How to clear the LQIP cache? #
You can do it via the ShortPixel settings or via WP-CLI
- ShortPixel settings: Go to Settings > ShortPixel AI > Behaviour and click on the Clear LQIP cache button.This will remove the entire
/wp-content/uploads/spai/lqipfolder, and as soon as there will be new visits on your site, the LQIP’s will be regenerated.
-
WP-CLI: if you want to do this through WP-CLI, this is the command that you should run:
wp shortpixel clear_lqips
When should the LQIP cache be cleared? #
If you have replaced some of the images but kept the same name, that’s when you should clear the LQIP cache. Otherwise, you will be showing the wrong LQIP, and you don’t want that!
Clearing the LQIP cache will not spend any additional credits because the LQIPs are offered for free by ShortPixel and their generation doesn’t consume any credits.