Settings - Replace in CSS files

ShortPixel Adaptive Images (SPAI) added in its version 1.4.0 a new feature called Replace in CSS files.

We added this feature so we can replace the background images on CSS files with an optimized version. If it's enabled, SPAI will do its job for such files, which is:

• Minify the CSS files
• Look for background images (CSS property background-image) and optimize them
• Serve both the CSS files and the background images from our CDN, which means that SPAI will replace the URLs of the background images. For example, the URL https://www.example.com/image.jpg will be changed to https://cdn.shortpixel.ai/spai/.../https://www.example.com/image.jpg

This option, if enabled, works by default for CSS files on your domain. If you have CSS files from other domains, you can add them on the text box, separated by commas.

It's also worth mentioning that SPAI will not change the structure of the CSS files, will not move CSS from the head to a file or back, nor will not merge files.

Clear CSS cache

You will also notice a "Clear CSS Cache" button on top of the ShortPixel AI Settings page.

And, if you enabled the option "Top bar menu", the same button appears on the WordPress Toolbar.

As explained earlier, in order to optimize images contained in CSS files, SPAI must store those CSS files in ShortPixel's CDN. So what happens if, for example, you are editing one of your pages and change a few images that are loaded from CSS files? As long as the CSS file does not change its filename, SPAI will continue to serve the old CSS file and therefore the old images. You will then need to clear the CSS cache.

In short, you should click the "Clear CSS Cache" button when one of your CSS files changes its content. If you don't know when this is happening, you can Clear CSS Cache whenever you make a change to one of your pages.

How does this option work with other optimization plugins?

You may be wondering what happens with other plugins like WP Rocket or Autoptimize, that also minify CSS files. SPAI should work correctly with other plugins minifying CSS files, therefore you could have the minification enabled on SPAI and on the other plugin. However, if you see any conflict, we recommend you to let only SPAI minify your CSS files.