How to use the Image Checker tool

Starting with version 2, ShortPixel Adaptive Images offers a straightforward tool to check the status of the optimized images on a page of your site. Just log in to your admin panel of your website and then visit your front-page. On the top bar you will notice a ShortPixel icon:

Click on that icon and you will turn on the Image Checker. A tag will appear for each image: "CDN" or "ORIGIN". "CDN" means that the image is served from our CDN and "ORIGIN" that it's served from the original URL, or in other words, that ShortPixel Adaptive Images is not processing it.

Also, the cursor will change to a cross (⌖) and when you click on an image, you will get additional information and actions:

The popup displays info about scaling and byte size and also offers the following actions:

  1. "Exclude images like this one from optimization." - Enables you to exclude from optimization the images that are displayed in the same way/place in all the pages, based on a CSS selector. More details below.
  2. "Exclude this image URL." - Will exclude only this specific image, based on its URL.
  3. "Do not resize images like this one." - Same as action #1, but it will only prevent these images from being resized. The optimization, lazy-loading and serve from CDN will still happen.
  4. "Do not lazy-load images like this one." - Same as action #1, but it will only prevent these images from being lazy-loaded. The optimization and serve from CDN will still happen.
  5. "Refresh on CDN." - Will send a request to our API to refresh the image on our CDN. This is useful if you edited the image and replaced it keeping the same file name (for example using the Enable Media Replace plugin) so the URL did not change.
If you press on actions 1, 3 or 4, you will need to define the CSS selector in the next step. Please note that the tool tries to make this task easier but it's a pretty technical thing. You need to have at least a basic understanding of CSS selectors and for this we provide some links below.
You can click on the blue tags on top to toggle them or you can write your own selector, just take into account that if you click again on the tags, your manual changes in the input box below will be overwritten. You can at any time click on the "Show" button to see which images from your page are affected by the selector. Try to keep the selectors as simple as possible, ideally like "img.classname" only. When you're done, click on "Yes" and the selector will be saved to the list of excluded selectors on the settings page. You can see it by going to the "Exclusions" tab on Settings > ShortPixel AI, on your WordPress admin panel.
Important: after you do any change using the 1-4 actions, you will need to properly clear all levels of cache and reload the page (sometimes twice) in order to see the changes on the page.
If the image under cursor is already excluded, you will be able to remove the exclusion rule:

CSS selectors resources

Still need help? Contact Us Contact Us

Related Articles