CSS-Sprites
CSS-Sprites bezeichnet eine einzelne Grafikdatei, die mehrere Symbole und Icons enthält. Diese zusammengefassten Grafiken fungieren als Sprites und dienen dazu, die Ladezeit von Webseiten zu minimieren. Die einzelnen Elemente dieser Gesamtgrafik werden mit der CSS-Eigenschaft background-image und background-position ein- beziehungsweise ausgeblendet.
Dokumentiert wurde diese Technik vermutlich das erste Mal 2004 im englischsprachigen Online-Magazin A List Apart, eine Website, die sich an Webdesigner richtet.[1][2] Bekannte Websites wie Google, XING, Amazon oder Facebook nutzen diese Technik.[3][2] Eine Alternative zu Sprites sind Icon-Fonts.
Vorteile
Verbesserung der Ladezeit
In den meisten Fällen kann durch eine konsequente Nutzung von Sprites eine Verringerung der Webseiten-Ladezeit erreicht werden: Der Webbrowser 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.
Vermeiden von Verzögerung bei Bildwechseln
Das dynamische Wechseln eines Bildes auf einer Internetseite ist im Rahmen des Webdesigns nicht unüblich – so wird eine Grafik beispielsweise gewechselt, sobald der Mauszeiger über ein bestimmtes Element fährt. Das Laden der einzuwechselnden Grafik erfordert ohne weitere Vorkehrungen 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 bereits geladenen 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 und kein erneuter HTTP-Aufruf notwendig ist.
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 CSS3 eine Grafik animiert darzustellen – ohne eine dafür sonst übliche GIF-Datei einzusetzen.[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 innerhalb der Gesamtgrafik angeben. Für die Zusammenstellung der Sprite-Dateien sowie die Erzeugung des Stylesheet-Codes existieren jedoch verschiedene Softwarelösungen, die das Erstellen der Sprites automatisieren.[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
- Webseiten, die bei der Sprite-Erstellung unterstützen
- CSS SPRITES GENERATOR mit grundlegender Funktionalität
- CSSsprites responsive für Sprites, deren Einzelbilder (Bestandteile) Größenveränderungen zulassen
- Dan’s Tools CSS Sprite Generator mit weiterführenden Funktionen (z. B. Unterstützung von Less)
- Instant Sprite mit sehr einfacher Bedienung und rudimentärer Funktionalität
- Sprite Cow mit vielen Erklärungen und einer Benutzerführung geeignet auch für Anfänger
- spriteMe kann als Bookmarklet eingebunden werden kann
- SpritePad von KISS mit kostenfreier Basisfunktionalität und kostenpflichtigen Zusatzfunktionen
- Beispiele für CSS-Sprites:
Einzelnachweise
- ↑ alistapart.com: CSS-Sprites (2004) (englisch)
- ↑ a b Einführung in CSS-Sprites auf der Website Smashing Magazine (englisch)
- ↑ webkrauts.de: Kürzere Ladezeiten durch CSS-Sprites
- ↑ Blogartikel: CSS-Sprites vs. Image-Maps (Memento vom 18. Februar 2013 im Internet Archive)
- ↑ Animationen mit CSS3 und Sprites (Seite nicht mehr abrufbar, Suche in Webarchiven) Info: Der Link wurde automatisch als defekt markiert. Bitte prüfe den Link gemäß Anleitung und entferne dann diesen Hinweis. (englisch)
- ↑ Archivlink (Memento des Originals vom 23. September 2011 im Internet Archive) Info: Der Archivlink wurde automatisch eingesetzt und noch nicht geprüft. Bitte prüfe Original- und Archivlink gemäß Anleitung und entferne dann diesen Hinweis.
