CSS-Sprites

Mit CSS-Sprites wird eine Technik benannt, die es dem Webdesigner erlaubt, eine Grafikdatei einzubinden, die aus vielen kleineren Grafiken besteht. Der Begriff setzt sich zusammen aus der Abkürzung für Cascading Stylesheets (CSS) sowie der Sprite-Technik, wie sie zum Beispiel in alten Videospielen benutzt wurde. Dokumentiert wurde diese Technik vermutlich das erste Mal 2004 auf A List Apart, einer englischsprachigen Website für Webdesigner^[1][2]. Bekannte Websites wie Google, Xing, Amazon oder Facebook nutzen diese Technik^[3][2].

Prinzip

Mehrere kleinere Grafiken werden zu einer Großen zusammengefasst. So können beispielsweise viele kleine Icons in einem Bild zusammengefügt sein. Mit Hilfe von CSS hat der Entwickler dann die Möglichkeit, nur einen kleinen Teil dieser Gesamtgrafik einzublenden. Dafür werden die CSS-Eigenschaften background-image und background-position verwendet.

Vorteile

Schema eines Bildwechsels, sobald der Mauszeiger ein Element überfährt

Vermeiden von Verzögerung bei Bildwechseln

Das Austauschen eines Bildes ist in der Webseitenentwicklung nicht unüblich - so wird eine Grafik beispielsweise gewechselt, sobald der Mauszeiger über einem bestimmten Element liegt (der sogenannte Hovereffekt). Das Laden der zweiten Grafik erfordert jedoch immer eine gewisse Ladezeit - selbst bei schnellen Internetverbindungen nimmt der Benutzer eine kurze Verzögerung oder ein kurzes Flackern wahr. Bei der Sprite-Technik dagegen ist das zweite Bild bereits Teil der Gesamtgrafik, die nur noch relativ zum sichtbaren Bereich verschoben werden muss. Ein Flackern nimmt der Betrachter nicht mehr wahr, da das Bild zuvor bereits vom Browser zwischengespeichert wurde.

Verbesserung der Ladezeit

In den meisten Fällen kann durch eine konsequente Nutzung von Sprites eine Verringerung der Webseiten-Ladezeit erreicht werden: Der Browser lädt wesentlich schneller eine Datei mit einer Größe von 10kb als zehn Dateien mit jeweils 1kb, weil die HTTP-Spezifikation nur wenige parallele Download-Vorgänge vorsieht.

Weitere Vorteile

Mit der Sprite-Technik können auch sogenannte Image-Maps ersetzt werden. Hierbei handelt es sich um ein HTML-Element, das kontextsensitiv wirkt, also etwa bestimmte Bereiche anklickbar macht^[4]. Außerdem ist es möglich, unter Zuhilfenahme von CSS 3 eine Grafik animiert darzustellen - ohne dafür eine sonst übliche GIF-Datei zu verwenden^[5].

Nachteile

Das Erstellen der CSS-Sprites ist recht aufwendig und der Aufwand steigt proportional mit der Anzahl der zu verwendenden Einzelgrafiken. Neben der Zusammenstellung mit Hilfe eines Bildbearbeitungsprogrammes muss der Entwickler auch in der Stylesheet-Datei für jedes Element die Hintergrundgrafik sowie die genaue Position angeben. Für die Zusammenstellung der Sprite-Dateien sowie die Erzeugung des Stylesheet-Codes existieren im Internet allerdings viele Generatoren, die dem Webdesigner das Erstellen der Sprites erleichtern^[6].

Sprites können sich auch negativ auf die Ladezeit der Webseite auswirken - beispielsweise, wenn die Webseite nur sehr wenige Grafiken anzeigen muss, dafür aber die gesamte Spritedatei geladen wird, die um ein Vielfaches größer ist.

Weblinks

• CSS-Tricks.com Detaillierte Einführung in CSS-Sprites
• spriteMe Ein Generator, der als Bookmarklet eingebunden werden kann
• Beispiele für CSS-Sprites:
  • Google
  • Youtube
  • Yahoo!
  • MySpace

Einzelnachweise

1. ↑ alistapart.com: CSS-Sprites (2004) (engl.)
2. ↑ ^{a b} Einführung in CSS-Sprites auf der Website Smashing Magazine (engl.)
3. ↑ webkrauts.de: Kürzere Ladezeiten durch CSS-Sprites
4. ↑ Blogartikel: CSS Sprites vs. Image-Maps
5. ↑ Animationen mit CSS3 und Sprites (engl.)
6. ↑ http://css-tricks.com/158-css-sprites/