CSS Sprites mit SmartSprites

CSS Sprites sind eine Möglichkeit um die Ladezeit einer Webseite zu verkürzen. Wenn ein Browser eine Webseite aufruft, dann lädt er zuerst die HTML Seite herunter, analysiert diese und muss dann für jedes referenzierte Bild einen weiteren Request zum Server senden.
Ein CSS Sprite ist eine Sammlung von vielen Bildern in einem einzigen Bild. Im CSS wird mit Hilfe des Attributes background-position die Position angegeben in der sich das gewünsche Image im grossen Bild befindet. Der Browser muss, anstatt vieler kleiner Bilder, nur dieses grosse Bild herunterladen. CSS Sprites reduzieren also die Anzahl Requests und verkürzen dadurch die Ladezeit einer Webseite.

Das folgende Beispiel zeigt wie in einer bestehenden Applikation die Icons durch CSS Sprites, mit Hilfe von SmartSprites, ersetzt wurden.

Die Applikation verwendet viele kleine Icons für Buttons. Im CSS finden wir folgenden Code:

Um SmartSprites anzuweisen diese vielen kleinen Bilder in ein Bild zusammenzufügen, müssen spezielle Kommentare eingefügt werden. Das abgeänderte CSS File sieht danach folgendermassen aus:

Der erste Kommentar (/** sprite:…) gibt den Namen (sprites), den Pfad für das Masterbild (../images/sprites.png) sowie das Layout (vertical) an. Mit dieser Konfiguration wird ein Masterbild mit Namen sprites.png angelegt und die einzelnen Icons werden darin vertikal abgelegt. Anstatt vertikal können die Bilder auch horizontal angeordnet werden.

Bei jedem Bild wird mit /** sprite-ref: sprites; */ konfiguriert in welches Masterbild dieses Icon eingefügt werden soll.
Damit ist es möglich mehrere Masterbilder anzulegen, zum Beispiel eins für alle PNG und eins für alle GIF.

Nun benötigen wir eine Möglichkeit um den SmartSprites Prozessor zu starten. Man kann SmartSprites von der Kommandozeile starten und für Ant Projekte wird ein entsprechender Task mitgeliefert. Für Maven gibt es kein Plugin, aber mit dem maven-antrun-plugin lässt sich SmartSprites trotzdem relativ einfach integrieren.

Gesteuert wird SmartSprites mit dem <smartsprites> Tag. SmartSprites sucht nach Dateien mit der Endung *.css im angegebenen rootdir Verzeichnis und in allen Unterverzeichnissen. Das Programm überschreibt nicht die Original css Datei sondern erstellt eine Datei mit dem gleichen Namen und dem Suffix das unter cssfilesuffix angegeben ist. Wenn die Original Datei app.css heisst wird das verarbeitete File app-sprite.css heissen und im gleichen Verzeichnis wie das Original abgespeichert. Eine genaue Beschreibung aller Optionen findet man auf der Homepage des Projektes.

Im Beispiel ist das Plugin der generate-resources Phase angehängt und kann mit dem Aufruf von mvn generate-resources ausgeführt werden. SmartSprites sucht nach den CSS Files, analysiert die Kommentare und erstellt das Masterbild sowie das neue css File.

Nach dem Ausführen des Programms und wenn keine Fehler aufgetreten ist finden wir im gleichen Verzeichnis wie das Original eine *-sprite.css Datei. Das Masterbild befindet sich im konfigurierten Pfad. In diesem Beispiel unter (./src/main/webapp/resources/images/sprites.png).

In der *-sprite.css Datei sehen wir die Änderungen die SmartSprites vorgenommen hat. Alle Kommentare wurden entfernt, background-image referenziert neu das Masterbild und background-position gibt die Position des ursprünglichen Bildes innerhalb des Masterbildes an.

Zum Schluss müssen die HTML Seiten angepasst werden, damit sie nicht mehr das Original css sondern das *-sprite.css File referenzieren.

Das hier beschriebene Projekt befindet sich auf Github: Changelog
Dort konnten 32 Bilder in ein Bild zusammengefasst werden.

Weitere Links zu CSS Sprites:
http://www.w3schools.com/css/css_image_sprites.asp
http://www.tutorial9.net/tutorials/web-tutorials/building-faster-websites-with-css-sprites/
http://coding.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials/

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">