I installed ShortPixel Adaptive Images but it doesn't seem to work.

General issues

If you installed ShortPixel Adaptive Images (SPAI) on your website and, after checking if it's working well, it doesn't seem to do it, then the usual reasons are:

  • Your domain is not associated to your account: How can I associate a domain to my account?
  • You don't have enough available optimization credits. If this is the case, please purchase a new plan, or in case you have a monthly quota, upgrade your plan.
  • The API URL (located on Settings > ShortPixel AI) is not correct. By default it should be "https://cdn.shortpixel.ai/spai" (see image below); only change it if you know what you're doing.

  • You entered a full URL under Settings > ShortPixel AI > Advanced > Excluded selectors. This field can contain only CSS selectors.

  • You use a caching plugin or your hosting provider uses a caching mechanism, and the cache has not been flushed after installing and configuring SPAI. The solution is to flush your cache to get rid of old image URLs being displayed. To do a proper cache flushing, please do it in the following order:
    1. SPAI's cache. Go to Settings > ShortPixel AI, and press the button "Clear CSS cache".
    2. Cache plugins (Autoptimize, SG Optimizer, WP Rocket, Cache Enabler...)
    3. Server cache (SiteGround, Bluehost...)
    4. CDN cache (Cloudflare, StackPath...). Please do it from your CDN's dashboard, not through your cache plugin or hosting dashboard.
    5. Browser cache (Chrome, Firefox, Edge, Safari...)
  • There is another plugin or theme that has a lazy loading feature activated and this conflicts with SPAI. The solution is to deactivate this functionality on the plugin or theme that use it. Please notice that you don't need to disable lazy loading on videos or other resources; only image lazy loading must be disabled.
  • Our Javascript files are being blocked or unregistered with another optimization plugin. For example, Asset CleanUp can stop such Javascript files if you tell it to do so. Please check all the optimization plugins to make sure that they don't block anything related to SPAI.
  • jQuery has been disabled either manually or by another plugin. In this case, SPAI will not work properly. Please make sure jQuery is enabled.
  • There is a conflict with another plugin (the known conflicts are listed below).

Only some images are not optimized

Sometimes SPAI is actually working correctly, but not all the images are being served from our CDN. This can happen because:

  • The images are background images ("background-image" CSS property) declared in .css files. Please activate the "Replace in CSS files" option.
  • The piece of content containing that image is built dynamically by Javascript (either the theme's or from a plugin). Please activate first the "Replace in JSON data" option (located on Settings > ShortPixel AI > Advanced), and if there still are images not optimized, activate the "Replace in the JS blocks" option too. If neither of these solve all the cases, it might be that the dynamical part is built by a different means and we might need to code a custom integration for this situation. Please contact us to check if this is possible in your case.

Known conflicts and solutions

LiteSpeed Cache

  • You need to disable the option "JS Combine". Go to LiteSpeed Cache > Page Optimization > JS Settings and there disable "JS Combine" or, possibly better, exclude "ai.min.js" from being combined. (thanks to Mads).

JetPack

  • You need to disable Jetpack's Site Accelerator. Go to Jetpack > Settings > Performance and disable the option "Enable site accelerator".

Hummingbird

  • In some cases, having the Hummingbird plugin active will disable jQuery's serving. Currently, ShortPixel Adaptive Images requires jQuery to function so the solution is to deactivate this plugin or use a better cache plugin.

Autoptimize

  • You need to have "Optimize Images" and "Lazy load" turned off. They are located on Settings > Autoptimize > Images.

  • If you are aggregating the JS files, you may need to exclude the script "ai.min.js" from optimization to prevent possible conflicts

WP Rocket

  • You need to deactivate lazy loading for images. Go to Settings > WP Rocket > Media > LazyLoad and disable "Enable for images".
  • If you combine your JS files using WP Rocket, you may also need to deactivate the "Combine JavaScript files" option. It's located on Settings > WP Rocket > File Optimization > JavaScript Files,

  • but sometimes you just need to exclude the "ai.min.js" file from being concatenated.

Swift Performance

  • There's a chance the styles merging is not compatible with SPAI, depending on your site. Please disable it under Settings > Swift Performance > Optimization > Styles > Merge Styles.

SG Optimizer

  • First, make sure you have disabled the lazy load option on SG Optimizer > Image Optimization > Lazy Load Images.

  • And also, to make sure that your images load as fast as possible, disable the option SG Optimizer > Frontend Optimization > Load Render-blocking JavaScript Files Asynchronously.

WP Fastest Cache

  • Make sure that "Lazy Load" and "Minify JS" are disabled from WP Fastest Cache's settings.

Perfmatters

  • Deactivate the Lazy Loading option in Perfmatters' settings to allow SPAI to work correctly. SPAI has already lazy load integrated.

Still need help? Contact Us Contact Us