Why do my background images appear distorted after adding RequestReduce?

RequestReduce makes every effort to minimize any negative impacts it may potentially have on your web site. However, it is impossible for RequestReduce to account for the complexities and nuances of every site. In my experience there have been two main areas where implementing RequestReduce has resulted in initial rendering flaws of a web page.

The most predominant case is where you have already sprited images and use a single class to specify the image url, repeat property and dimensions. Then for each sprite, a separate class is used to simply specify the background position of each sprite. Unfortunately, while there are some techniques I intend to implement in the future to minimize these occurrences, it is impossible sometimes for RequestReduce to know that these classes are related. Currently, RequestReduce evaluates spriting capabilities on a class by class basis.

To fix this scenario, simply copy the image url, no-repeat and width/padding dimensions to each class containing the background position. Remember, RequestReduce must at least have a width property in order to safely generate a sprite.

UPDATE: This scenario should be fixed as of v1.7.0. You can now have your image in one css selector and the position in other selectors. Please file an issue if you have problems.

If you would like to disable image spriting alltogether, you can set the imageSpritingDisabled configuration setting to true. If you would like to keep it enabled, but continue to have problems with RequestReduce incorrectly creating the sprotes, please add an issue to the [issues page] (https://github.com/mwrock/RequestReduce/issues).

The second and far less common scenario is where the lossy color quantization process degrades the sprite images to unacceptably poor quality. The best thing to do in these cases is to reduce the spriteColorLimit (5000 is the default) or if that does not work, set imageQuantizationDisabled to true to completely disable lossy image optimization.