Quelltext der Seite CSS-Sprites

'''CSS-Sprites''' bezeichnet eine einzelne [[Computergrafik|Grafikdatei]], die mehrere Symbole und [[Icon (Computer)|Icons]] enthält. Diese zusammengefassten Grafiken fungieren als [[Sprite (Computergrafik)|Sprites]] und dienen dazu, die Ladezeit von Webseiten zu minimieren. Die einzelnen Elemente dieser Gesamtgrafik werden mit der [[Cascading Style Sheets|CSS]]-Eigenschaft <code>background-image</code> und <code>background-position</code> 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.<ref name="alistapart">{{Internetquelle|autor=Dave Shea|url=https://alistapart.com/article/sprites/|titel=CSS Sprites: Image Slicing’s Kiss of Death|werk=alistapart.com|datum=2004-03-05|sprache=en|abruf=2011-09-15}}</ref><ref name="smashing_mag">{{Internetquelle|autor=Sven Lennartz|url=https://www.smashingmagazine.com/2009/04/the-mystery-of-css-sprites-techniques-tools-and-tutorials/|titel=The Mystery Of CSS Sprites: Techniques, Tools And Tutorials|werk=smashingmagazine.com|datum=2009-04-28|sprache=en|abruf=2011-09-15}}</ref> Bekannte Websites wie [[Google]], [[XING]], [[Amazon]] oder [[Facebook]] nutzen diese Technik.<ref name="webkrauts">{{Internetquelle|autor=Tobias Otte|url=http://www.webkrauts.de/2009/12/15/kuerzere-ladezeiten-durch-css-sprites/|titel=Kürzere Ladezeiten durch CSS-Sprites|werk=webkrauts.de|datum=2009-12-15|sprache=de|abruf=2011-09-15}}</ref><ref name="smashing_mag" /> Eine Alternative zu Sprites sind [[Webtypografie#Icon-Fonts|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 10&nbsp;kB als zehn Dateien mit jeweils 1&nbsp;kB, weil die [[HTTP]]-Spezifikation nur wenige ''parallele'' Download-Vorgänge vorsieht.

[[Datei:CSS-Sprite Schema.gif|mini|Schema eines Bildwechsels, sobald der Mauszeiger ein Element überfährt]]
=== Vermeiden von Verzögerung bei Bildwechseln ===
Das dynamische Wechseln eines Bildes auf einer Internetseite ist im Rahmen des [[Webdesign]]s nicht unüblich&nbsp;– 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&nbsp;– 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 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 [[Cache|zwischengespeichert]] wurde und kein erneuter [[Hypertext Transfer Protocol|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.<ref name="oms">{{Internetquelle|autor=Christian Grzeschik|url=http://blog.online-marketing-solutions.com/google-page-speed-%E2%80%93-css-sprites-vs-image-maps-teil-2/|titel=Google Page Speed – CSS Sprites vs. Image-Maps (Teil 2)|werk=blog.online-marketing-solutions.com|datum=2011-03-04|sprache=de|archiv-url=https://web.archive.org/web/20110309051019/http://blog.online-marketing-solutions.com/google-page-speed-%E2%80%93-css-sprites-vs-image-maps-teil-2/|archiv-datum=2011-03-09|abruf=2011-09-15}}</ref> Außerdem ist es möglich, unter Zuhilfenahme von [[Cascading Style Sheets#CSS3|CSS3]] eine Grafik animiert darzustellen&nbsp;– ohne eine dafür sonst übliche [[Graphics Interchange Format|GIF]]-Datei einzusetzen.<ref name="medium">{{Internetquelle|autor=Uday Hiwarale|url=https://medium.com/jspoint/creating-css-animations-using-sprite-sheet-47e2b7a3793c|titel=Creating CSS animations using a sprite sheet|werk=medium.com|datum=2016-09-01|sprache=en|abruf=2022-10-30}}</ref>

[[Datei:Ballot-sprite.svg|miniatur|center|x24px|Beispiel eines bei der [[Wikimedia Commons]] Wahl zum Bild des Jahres genutzten Sprites. Die weißen Icons sind nur auf anders farbigem Hintergrund sichtbar. Beim Überfahren mit dem Mauszeiger oder Gedrückthalten eines Buttons wechselt aus Sicht des Besuchers die Farbe des Icons. Wurde bereits gewählt, so wird ein Icon durch ein Durchgestrichenes ausgetauscht.]]

== 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 [[Grafiksoftware|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.<ref name="csstricks">{{Internetquelle|autor=Chris Coyier, Volkan Görgülü|url=http://css-tricks.com/158-css-sprites/|titel=CSS Sprites: What They Are, Why They’re Cool, and How To Use Them|werk=css-tricks.com|datum=2007|sprache=en|archiv-url=https://web.archive.org/web/20110923144943/http://css-tricks.com/158-css-sprites/|archiv-datum=2011-09-23|abruf=2011-09-15}}</ref>

Sprites können sich auch negativ auf die Ladezeit der Webseite auswirken&nbsp;– 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 ==
* [https://css-tricks.com/css-sprites/ CSS-Tricks.com] Detaillierte Einführung in CSS-Sprites
* Webseiten, die bei der Sprite-Erstellung unterstützen
** [https://www.toptal.com/developers/css/sprite-generator CSS Sprites Generator] mit grundlegender Funktionalität
** [https://responsive-css.spritegen.com/ CSSsprites responsive] für Sprites, deren Einzelbilder (Bestandteile) Größenveränderungen zulassen
** [https://spritegen.website-performance.org/ Dan’s Tools CSS Sprite Generator] mit weiterführenden Funktionen (z.&nbsp;B. Unterstützung von [[Less (Stylesheet-Sprache)|Less]])
** [https://instantsprite.com/ Instant Sprite] mit sehr einfacher Bedienung und rudimentärer Funktionalität
** [http://www.spritecow.com/ Sprite Cow] mit vielen Erklärungen und einer Benutzerführung geeignet auch für Anfänger
* Beispiele für CSS-Sprites:
** [https://www.google.de/images/nav_logo3.png Google]
** [http://l.yimg.com/d/lib/eu/fp/img/blue16.gif Yahoo!]

== Einzelnachweise ==
<references />

[[Kategorie:Cascading Style Sheets]]
[[Kategorie:Computergrafik]]