{"id":734,"date":"2024-05-07T11:42:24","date_gmt":"2024-05-07T11:42:24","guid":{"rendered":"https:\/\/kb.shortpixel.com\/docs\/how-to-use-the-image-checker-tool\/"},"modified":"2025-08-27T08:44:39","modified_gmt":"2025-08-27T08:44:39","password":"","slug":"how-to-use-the-image-checker-tool","status":"publish","type":"docs","link":"https:\/\/kb.shortpixel.com\/knowledge-base\/article\/how-to-use-the-image-checker-tool\/","title":{"rendered":"How to use the Image Checker tool"},"content":{"rendered":"

\n\t ShortPixel Adaptive Images<\/a> offers a straightforward tool to check the status of the optimized images on a page of your site. Just log in to your WordPress admin panel and then visit any page. On the Toolbar you will notice a ShortPixel icon:<\/p>\n

\n\t Note<\/strong>: the Image Checker icon will only show up if the option <\/em>Logged-in users is enabled.<\/em><\/p>\n

\n\t Click on that icon and you will turn on the Image Checker<\/strong>. A tag will appear for each image: “CDN<\/strong>” or “ORIGIN<\/strong>“. “CDN” means that the image is served optimized from our CDN, and “ORIGIN” that it’s served from your server or, in other words, that ShortPixel Adaptive Images is not processing it.<\/p>\n

\n\t Also, the cursor will change to a cross (\u2316) and when you click on an image, you will get additional information and actions:<\/p>\n

\n\t The popup displays information about scaling and file size, and it offers the following actions as well:<\/p>\n

    \n
  1. Exclude images like this one from optimization<\/strong> – Allows you to exclude from optimization the images that are displayed in the same way\/place in all the pages, based on a CSS selector. The images won’t be served from ShortPixel’s CDN either. More details can be found below.<\/li>\n
  2. Exclude this image URL<\/strong> – Will exclude only<\/strong> this specific image from optimization, based on its URL. The image won’t be served from ShortPixel’s CDN either.<\/li>\n
  3. Do not resize images like this one<\/strong> – Same as action #1, but it will only <\/strong>prevent these images from being resized. The optimization and serving from ShortPixel’s CDN will still happen.<\/li>\n
  4. Do not lazy-load images like this one<\/strong> – Same as action #1, but it will only <\/strong>prevent these images from being lazy-loaded, resized and converted to WebP\/AVIF. The optimization and serving from ShortPixel’s CDN will still happen.<\/li>\n
  5. Refresh on CDN<\/strong> – This will send a request 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<\/a> plugin) so the URL did not change.<\/li>\n<\/ol>\n
    \n 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 Image Checker 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.
    \n\t\n<\/div>\n
    \n\tYou 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. \n<\/div>\n
    \n Try to keep the selectors
    \n\tas simple as possible<\/strong>, ideally like
    \n\timg.classname<\/code> only. The more complex they are, the more it will affect the performance of your site. 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.\n<\/div>\n
    \n\tImportant: after you do any change using the 1-5 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: <\/strong>
    \n\t    How to clear WordPress cache<\/strong><\/a>\n<\/div>\n
    \n\t<\/strong> If the image under the cursor is already excluded, you will be able to remove the exclusion rule:\n<\/div>\n
    \n\t\n<\/div>\n

    CSS selectors resources<\/h2>\n