How to exclude images from optimization in the ShortPixel Adaptive Images plugin
In some circumstances, you need to exclude from optimization some images, either due to some incompatibility with another plugin, 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:
- Based on CSS selectors
- Based on URL
For the CSS selectors method, you need first to identify the element using the Inspector arrow in the Developer Tools of your browser: select it and click on the image, then inspect the markup 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 rule:
You can also exclude images based on the id attribute, for example.
Or you can exclude inline background images. For example, if you had a <div> with an inline background image under a <section>, you could use:
For the URL exclusion method, you can either use the prefix "path:" and input a part of the URL,
or use a regular expression with the prefix "regex:". For example, the next one excludes all GIF images from optimization.
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.
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. Please keep them as few as possible though, as a huge number of them could impact site performance.
The plugin will silently ignore the malformed exclusions, so make sure to input them correctly.