Motivation
Currently, if an image has more than one reference in the original CSS, SmartSprites will include it multiple times in the sprite image. Ideally, if one individual image is added many times to one sprite image, it should appear in it only once.
Implementation
Within each sprite image, there should be exactly one individual image per one sprite reference. Equal sprite references collected across different locations in a CSS file or different CSS files should point to the same sprite and individual image within the sprite. Sprite references should be considered equal if they refer to the same sprite (equal
sprite-ref) and have equal bitmap renderings. In particular, equal bitmaps will be produced for equal
sprite-alignment and
sprite-margin-* properties, but when further sprite reference properties are added, the same rendering may be achieved by different sets of properties.
Discussion
The reason I've not stumbled upon this limitation in my previous SmartSprites-based designs is that I'd usually remove the duplication on the CSS code level, i.e. collapse many rules that used the same image like this:
div#id1,
div.logo,
ul > li > div.x {
background-image: url("../img/logo.png"); /** sprite-ref: sprite */
}
Until this duplicate removal is implemented, the above should work as a workaround.