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  two ways to exclude images, both located on Settings > ShortPixel AI > Exclusions:

  1. Exclusions based on CSS selectors
  2. Exclusions based on URL

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 nor served as WebP either. They will still be optimized.
  • 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 nor optimized.

Here's a table resuming the previous options:

Lazy loading Resizing WebP/AVIF serving Optimization
Don't lazy-load NO NO NO YES
Don't resize YES NO NO YES
Leave out completely NO NO NO NO

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

Please notice that simple rules like img#id_of_the_image are better than complex rules with parent selectors like section.example div. This is because when using an upper 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 done, a placeholder is used instead of the image, and this is the same as lazy-loading the image. For this reason, some web speed testers may recommend you to lazy-load the images.

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 regular expression. For more info about regular expressions, please read this howto. You can validate your regular expressions here: regex101.com.

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.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us