Wer auf seiner Website jede Grafik einzeln laden lässt, riskiert, dass sich das Laden unangenehm verzögert. Besser ist es, die Bilder in einem Sprite zusammenzufassen, der dann nur einmal geladen werden muss.
Das spart eine Menge Zeit beim Seitenaufbau, da dieser Sprite nun nur einmal geladen werden muss, anstatt jedes Hintergrundbild einzeln zu laden. Bei der Erstellung von Sprites gibt es eine Reihe von Webdiensten, die dabei, natürlich gegen Gebühr, weiterhelfen. Mit SpriteMe gibt es aber eine kostenlose Software, die bei der Erstellung von Sprites und der zugehörigen CSS-Datei behilflich ist.
Als erstes muss man die Homepage SpriteMe aufrufen und ein Bookmarklet in den Favoriten setzen. Anschließend lädt man die Website, für die man die CSS-Sprites erstellen möchte und dann ruft man das Bookmarklet auf. In einem neuen Browserfenster werden alle gefundenen Grafiken aufgelistet. Hier werden die Bilder aufgelistet, die zu einem Sprite zusammengefügt werden können und welche nicht für eine solche Prozedur in Frage kommen. Dazu gehören zum Beispiel sich wiederholende Grafiken oder auch Bilder, deren HTML-Element größer ist als der eigentlich dargestellte Hintergrund. Diese Grafiken können natürlich per Hand zur Sprite-Liste hinzugefügt werden, allerdings werden sie dann anschließend auch nicht korrekt dargestellt.
Wenn alle Grafiken zur Sprite-Liste hinzugefügt sind, wird der Sprite dann per Mausklick erstellt. Die zugehörige CSS-Datei wird danach auch gleich mit erstellt. Diese ersetzt dann alle bisherigen Hintergrundbilder durch das neu erstellte Sprite („background-image“) und ergänzt dann die Position des jeweiligen Bildes innerhalb des Sprites („background-position“). Nun kann man das Sprite-Bild und die CSS-Datei auf den Webserver kopieren. Wer also auf seiner Webseite eine hohe Anzahl an Hintergrundbildern hat und diese Homepage durch einen Sprite optimieren will, für den lohnt sich ein Besuch auf der SpriteMe-Website.