How to exclude images from optimization in the ShortPixel Adaptive Images plugin

In some circumstances, you'll want to exclude some images from optimization, either due to some incompatibility with another plugin, to be able to preload them, or just because you need the original images there.

ShortPixel Adaptive Images offers three ways to exclude images, both located on Settings > ShortPixel AI > Exclusions. Please note that you can also use the Image Checker tool to do the same but faster!

1. Exclusions based on CSS selectors
2. Exclusions based on URL
3. Excluded pages

Excluding CSS selectors

Excluding a CSS selector not only allows you to exclude several images at once (a CSS selector can target more than one image), but it also lets you exclude an image only from lazy-loading and/or resizing.

• Don't lazy-load: the images excluded in this field will not be lazy-loaded, and therefore they will not be properly resized. They will still be optimized, though.
• Don't resize: the images excluded in this field will not be properly resized. They will still be lazy-loaded and optimized.
• Leave out completely: the images will not be lazy-loaded, properly resized, or optimized.

Here's a table resuming the previous options:

To know what CSS selector you need, you need first to identify the element using the Inspector arrow in the Developer Tools of your browser.

1. Open your favorite browser and enter your site.
2. Press F12.
3. Click on the Inspector arrow.
4. Click on the image you want to exclude.

5. Inspect the code of the page for that image. In the example image below, you will notice that the image has a class called attachment_thumb_big .

   

   This image and all images having the same class can be excluded with this CSS selector: 

img.attachment_thumb_big

You can also exclude images based on the id attribute, for example:

img#id_of_the_image

Or you can exclude inline background images too. For example, if you had a div  with an inline background image under a section , you could use:

section.example div

You can define multiple exclusions, each on a separate line.

Performance notes on lazy loading

Please note that simple rules such as img#id_of_the_image are better than complex rules with parent selectors such as section.example div . This is because when using a parent element (like a div that contains the image under it), ShortPixel needs to use JavaScript to determine the exclusions and then decide what to do with the images. Until this JavaScript execution is complete, a placeholder is used instead of the image, which is effectively the same as lazy loading the image. For this reason, some web speed testers will recommend that you do not load the images, even if you have excluded them from lazy loading.

Simple rules allow ShortPixel Adaptive Images to exclude images from lazy-loading without any JavaScript processing before, therefore the performance of your website will not be impacted.

Excluding URLs

Excluding URLs is not a method as flexible as the previous one, but is easier to implement, as you just need to know the URL. But whatever you exclude here will be completely excluded from optimization.

For the URL exclusion method, you can either use the prefix path: and input a part of the URL,

path:/my/path/

path:www.someothersite.com

path:logo.jpg

or use a regular expression with the prefix regex: . For example, the next one excludes all GIF images from optimization.

regex:/.*\.gif$/i

And the next one excludes all the images from subdomains of gravatar.com. Pay attention that it is included by default on your settings because many sites use Gravatar and these images cannot be optimized, but if you're sure your site doesn't include gravatar URLs, feel free to remove it.

regex://\/\/([^\/]*\.|)gravatar.com\//

The prefix regex: is not part of the regular expression, but is flagging the next part as a regular expression. For more info about regular expressions, please read this howto. You can validate your regular expressions here: regex101.com.

Lastly, you can also exclude only the domain by using a domain: rule, for example domain:cdninstagram.com . This is useful for excluding external domains whose images should remain intact.

You can define multiple exclusions, each on a separate line.

The plugin will silently ignore the malformed exclusions, so make sure to input them correctly.

Performance notes

If you input multiple exclusions, please keep them as few as possible, as a huge number of them could impact site performance.

Excluding pages

Finally, if you want to exclude entire pages from optimization, you can use this option. All pages in the field will be ignored, and images will not be resized, delayed loading or optimized. The plugin is effectively disabled on these pages.

In Gravity Forms, for example, you can upload files to the forms. Then, when an administrator checks the files from the WordPress backend, those files open in a separate URL that looks like https://www.nu-heat.co.uk/index.php?gf-download=..... . You probably want to exclude this type of page, because no visitor will see it.

You can use the same kind of exclusion methods that you use to exclude URLs:

• Use the prefix path: and enter part of the URL,
• use a regular expression with the prefix regex: ,
• or enter a complete URL.