SpriteMe erstellt CSS-Sprites aus bestehenden Website-Grafiken

Hintergrundbilder in einer einzelnen, Sprite genannten Datei unterzubringen, und sie dann per CSS zu adressieren, macht eine Website schneller. Denn statt jedes Hintergrundbild einzeln zu laden, muss das Sprite nur einmal geladen werden. Das spart Server-Requests und somit Ladezeit. Es gibt eine ganze Reihe von Webdiensten, die einem bei der Erstellung von Sprites für eine neue Website behilflich sind. SpriteMe geht einen eigenen Weg: Es erstellt einen Sprite aus Hintergrundbildern einer bestehenden Website.

SpriteMe

SpriteMe als Bookmarklet verwenden

Zunächst einmal muss SpriteMe als Bookmarklet den Favoriten des Browsers hinzugefügt werden. Der entsprechende Link wird auf der Website von SpriteMe zur Verfügung gestellt. Anschließend wird die Website geladen, für welche ein CSS-Sprite erstellt werden soll, und das SpriteMe-Bookmarklet aufgerufen. Es öffnet sich nun eine kleine Box im Browserfenster, die alle gefundenen Hintergrundgrafiken der Website auflistet. SpriteMe sortiert die Grafiken nach jenen, die zu einem Sprite zusammengefügt werden und können, und jenen, die nicht für einen Sprite in Frage kommen.

Durch Bookmarklet geöffnete SpriteMe-Box

Wird eine Hintergrundgrafik wiederholt (auf der X- oder Y-Achse), kann sie einem Sprite ebenso wenig hinzugefügt werden wie eine Hintergrundgrafik, deren HTML-Element größer ist als der dargestellte Hintergrund selbst. Allerdings besteht die Möglichkeit, solche Hintergrundgrafiken manuell zur Liste der Sprite-fähigen Hintergründe hinzuzufügen. Man sollte sich dabei bewusst sein, dass diese dann nicht mehr korrekt dargestellt werden könnten.

Sprite und CSS generieren

Sind alle Hintergrundgrafiken der Sprite-Liste hinzugefügt, wird über einen einzigen Mausklick das Sprite aus allen ausgewählten Grafiken erstellt. Ebenso schnell ist die dazugehörige CSS-Datei erstellt. Die Datei ersetzt alle bisherigen Hintergrundgrafiken durch das neu erstellte Sprite („background-image“) und ergänzt die Position der jeweiligen Grafik innerhalb des Sprites („background-position“).

Sprite-Bild und CSS-Datei können nun auf den eigenen Webserver kopiert werden.

Durch SpriteMe erstellter CSS-Quelltext

Wer möchte, kann das Ergebnis von SpriteMe auf deren Website veröffentlichen. Dort wird dann eine kleine Statistik der erstellten Sprites gelistet. Neben Anzahl der aus einzelnen Grafiken erstellten Sprites wird auch angegeben, wie viel Kilobyte durch das Sprite erspart wurden, beziehungsweise hinzugekommen sind. Denn wirklich lohnend ist das Erstellen von Sprites nur bei einer entsprechend hohen Anzahl von Hintergrundgrafiken, die zu einem einzigen Sprite zusammengefasst werden.

Fazit: SpriteMe ist wirklich einfach einzusetzen und bietet sich vor allem dann an, wenn bereits eine Website besteht und diese per SpriteMe optimiert werden soll.

(dpe)