ShortPixel Adaptive Images has an option called “Replace in JSON data”, which is located on Settings > ShortPixel AI > Areas. Although useful, it can be confusing. To explain what it is and to know if you should activate it, keep reading.
Some plugins make JSON AJAX calls. These are calls made by the JavaScript code of, say, a slider, to the WordPress back-end to get some data. Then, the requested data comes back in this special serialized form called JSON, which it’s called JSON metadata. This metadata can contain URLs of images, therefore the first option (“Also parse JSON AJAX calls to replace image URLs”) will replace such URLs without knowing where or how they will be displayed, hence ShortPixel won’t be able to resize them appropriately.
If the second option is activated (“Lazy-load JSON URLs”), the URLs will be replaced by lazy-loaded URLs which will then be caught by ShortPixel’s front-end JavaScript (when the JavaScript of the slider for example is modifying the DOM to put the new URLs in place) and scaled accordingly.
That’s a lot of technical info we reckon. 🙂 So it basically boils down to this:
- If your site uses JSON AJAX calls, activate both options and save the changes.
- Deactivate “Lazy-load JSON URLs” if images disappear, because maybe our JavaScript doesn’t properly catch the other JavaScript when it does its job.
- Deactivate “Also parse JSON AJAX calls to replace image URLs” as well if you still have missing images.
When testing, load the first page twice; in some cases the images could not display properly at first load (sitewide).
How to detect if your site uses JSON AJAX calls that need to be parsed: Open the Developer tools of your browser (by pressing F12 on Windows/Linux or Cmd+Alt+’ on MacOS), switch to Network tab, select the XHR sub-tab, then reload the page and look through each call in the list. If any of the answers start with “{” or with “[“, that’s an AJAX call. If then any of those contains URLs with your domain like “https://example.com/…”, then you can benefit from this JSON AJAX parsing.
