In diesem Artikel erfährt man was CSS Sprites sind, welche Vorteile und Nachteile eine Integration hat und wie man CSS Sprites richtig einsetzt.
Was sind Sprites?
Ein sogenanntes Sprite ist ein einzelnes, großes Bild, welches die am häufigsten verwendeten Bilder einer Webseite beinhaltet. Dieses wird als Hintergrundbild per CSS aufgerufen. In der Regel kommt es für kleine Icons, Auflistungssymbolen oder Navigationen zum Einsatz. All diese Komponenten werden in einer einzelnen Datei platziert und mittels CSS wird einfach nur deren Hintergrundposition festgelegt.
Vorteile durch die Integration von Sprites:
Dass es mittlerweile so cool ist Sprites einzusetzen liegt daran, dass<ul>
</ul>
Nachteile die durch CSS Sprites entstehen können:
Trotz der gravierenden Vorteile hat das Ganze natürlich auch ein paar Schattenseiten.
- Ein Nachteil ist zum einen der, dass es von Vorteil ist, wenn die Bilder einer Webseite nicht zu oft angepasst werden müssen. Dann nämlich kommt man in die Verlegenheit nicht nur das sprite-Image, sondern auch die Position im CSS zu aktualisieren. Bei manchen Webseitenprojekte kann es so schnell zu viel Zusatzarbeit kommen.
- Ein weiterer Nachteil ist der, dass ein PNG-Sprite mit transparenten Bereichen zu viele Leerräume enthält die unnötig Speicherplatz verwenden. Das wäre bei einzelnen Bildern nicht der Fall. Um dem vorzubeugen, sollte man sich überlegen, ob man mit mehreren Sprite-Images arbeitet, anstelle von einem großen.
Welche bekannten Webseiten arbeiten mit sogenannten CSS Sprites?
Die folgenden, größeren Webseiten lohnt es sich genauer anzusehen. Hier wird ebenfalls mit CSS Sprites gearbeitet. So hat man ein paar gute Anschauungsobjekte.
- Drupal.org
- Amazon.de
- Google.de
- ebay.de
- Youtube.com
Wie setzt man CSS Sprites ein?
Ein oder mehrere Sprite-Bilder einzusetzen ist relativ einfach. Wir zeigen in diesem Abschnitt wie es funktioniert.
Vorbereitungsarbeiten
Wichtig ist, dass man bereits das fertige, zu verwendende Bildmaterial der Webseite vorliegen hat. Anschließend werden die zu integrierenden Bilder sinnvoll gruppiert / arrangiert.
- Welche Icons / Symbole / Hintergründe werden häufig verwendet?
- In welcher Reihenfolge macht es Sinn diese in das Sprite-Image zu integrieren?
- Ist es sinnvoller anstelle eines einzelnen, großen Sprites mehrere Sprites mit gleichformatigen Bildern zu erstellen?
- Wie groß muss der Abstand um bestimmte Sprite-Bildchen sein, damit es später im CSS-Code zu keinem Darstellungskonflikt kommt?
Nachdem man sich einen Überblick der für das Sprite zu verwendenden Bilder / Icons gemacht hat, erstellt man ein einzelnes großes Bild, in welchem alle vorliegenden und am häufigsten zu verwendenden Bilder integriert werden.
Wichtig Achten Sie darauf, dass um jedes einzelne Bild bzw. auch um die einzelnen Bildergruppen wirklich ausreichend leerer Raum zur Verfügung steht. Bei manchen Bildern wird bei mangelndem Platz oft sonst das darüber oder darunter liegende Sprite eingeblendet, wenn es der CSS-Code zulässt. Dieses Phänomen tritt meist dann auf, wenn für das integrierte Bild keine feste Höhe und / oder Breite angegeben wurde.
Durchführungsarbeiten
In einem Beispiel Sprite-Image (Abbildung 1) zeigen wir kurz, wie man folgendes Bild, welches für den oberen und unteren Bereich einer Seite Rundungen hinzufügt, in den CSS-Code integriert. 
So sieht der zur Abbildung 1 passende CSS-Code aus: für div id=”top”
#top {
background-image: url("/sprite1.png") no-repeat;
background-position: -35px -15px;
height: 11px;
}
für div id=”bottom”
#bottom {
background-image: url("/sprite1.png") no-repeat;
background-position: -35px -30px;
height: 19px;
}
Die Position des Bildbereichs vom oberen und linken Rand aus gesehen lässt sich in jedem Grafikprogramm unter dem Einsatz von Hilfslinien relativ schön auslesen. Bei der hier verwendeten Abbildung kam das Opensource Grafikprogramm Gimp zum Einsatz. Wer dennoch nicht alles selbst per Hand erarbeiten möchte, dem stehen im Internet bereits mehrere nützliche Tools zur Erstellung von sprite-Bildern, sowie dem zu integrierenden CSS-Code bereit.
Verschiedene CSS-Sprites Tools
Im Netz gibt es wie bereits erwähnt einige CSS-Sprites Generatoren. Diese können für jemanden, der selbst Hand anlegen will, die Arbeit zumindest ein wenig erleichtern.
Fazit
CSS Sprites sind dann gut geeignet, wenn man viele Bilder für Hintergründe, Navigationen oder Links verwendet. Durch diese Lösung werden weniger Bilder geladen und aufgerufen und man erreicht schnellere Antwortzeiten.