How does the "Replace in CSS files" feature work?
ShortPixel Adaptive Images 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
- Take the background images (CSS property background-image) and optimize them
- Serve both the CSS files and their background images from our CDN, which means that it will replace the URLs of the background images. For example, this - www.example.com/image.jpg - will be changed to - cdn.shortpixel.ai/spai/.../www.example.com/image.jpg -
This option 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.
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. There shouldn't be any problem, as technically SPAI should work correctly with other plugins doing CSS minification, therefore you could have SPAI's minification and the other plugin's minification enabled. However, since this is a new setting, if you see any conflict, we recommend you to deactivate any other CSS minification option disabled and leave only SPAI's enabled.