CSS-Sprites erstellen: Info, Anleitung, Tipps

Sie sind hier: Blog: CSS-Sprites erstellen: Info, Anleitung, Tipps

CSS-Sprites erstellen: Info, Anleitung, Tipps

12.08.2016

CSS-Sprites sind eine Webdesign-Technik mit dem Ziel, die Zahl der Anfragen an den Server zu verringern und damit Webseiten schneller zu machen: Mehrere Bilder gleichen Typs werden in einer Sprite-Datei zusammengefaßt, können vom Browser aber einzeln als Hintergrundbilder angezeigt werden. Die in der Sprite-Datei enthaltenen Einzelbilder werden über Positions-Angaben angesprochen (CSS-Eigenschaft background-position). In meinem Workshop erhalten Sie die nötigen Infos, eine Anleitung und Tipps, um CSS-Sprites zu erstellen.

⇓ Sprites-Technik: Was sind CSS-Sprites-Dateien?
⇓ Mit CSS-Sprites die Zahl der Server-Anfragen verringern
⇓ Mit CSS-Sprites die Menge gesendeter Kopfdaten verringern
⇓ Anleitung: Wie erstellt man CSS-Sprites-Dateien?
⇓ CSS-Positions-Angaben für die Einzel-Bilder
⇓ CSS-Sprites: Tipps zu Wiederholungen: repeat-x oder y
⇓ CSS-Sprites-Generatoren im Netz (Auswahl)
⇓ CSS-Sprites für Farbverläufe (Anwendungsbeispiel)
⇓ CSS-Sprites: Geschichte und Gegenwart

Sprites-Technik: Was sind CSS-Sprites-Dateien?

CSS-Sprites-Dateien sind Sammel-Grafikdateien in den Formaten GIF, JPG oder PNG. In einer Sprite-Datei können mehrere Bilddateien gleichen Formats (also einheitlich entweder im GIF- oder JPG- oder PNG-Format) platziert und gespeichert werden. Zur Auslieferung der CSS-Sprite-Datei ist nur eine Anfrage an den Webserver (HTTP-Request) erforderlich, so daß sich mehrere Anfragen für die enthaltenen Einzelgrafiken erübrigen. Die Sprites-Technik kann nur für Hintergrundbilder angewendet werden und eignet sich besonders für Symbol- oder Farbverlaufs-Grafiken, die Bestandteil der Website-Vorlage (also des Layouts) sind. Ggf. müssen hierfür geeignete (bisher über das img-Element in die HTML-Seite eingebundene) Vordergrundbilder zuvor über eine CSS-Zuordnung als Hintergrundbilder eingebettet werden.

Mit CSS-Sprites die Zahl der Server-Anfragen verringern

Abhängig vom jeweils verwendeten Browser kann gleichzeitig nur eine begrenzte Zahl von Anfragen (HTTP-Requests) an den gleichen Server gestellt werden. Ist diese Zahl erreicht, müssen die nächsten Anfragen warten, bis die vorherigen Anfragen abgearbeitet wurden, wodurch sich der Seitenaufbau durch den Browser verzögert. Es liegt also nahe, um beim Beispiel der Layout-Grafiken zu bleiben, mehrere solcher Grafiken zusammen in einer CSS-Sprites-Datei zu speichern, um die Zahl der Serveranfragen und damit den Aufwand der Client-Server-Kommunikation zu verringern.

Früher konnten Browser nur zwei HTTP-Requests gleichzeitig an den gleichen Server stellen. Damals wurde oft empfohlen, ein Content Delivery Network (CDN) aus mehreren Subdomains (jede davon ist für die Browser ein anderer Server) zu verwenden und die für eine Seite benötigten Elemente auf diese Subdomains zu verteilen. Amerikanische Konzerne haben sich diese Idee zunutze gemacht und bieten auf ihren Servern allerhand Schnickschnack an, den Webmaster leicht auf ihren Seiten einbauen können. Beispiele hierfür sind die Google Webfonts, verschiedene JQuery-Elemente und sogar Code-Strecken mit CSS-Regeln, die von Google-Servern abgerufen werden. Analytics zur Auswertung der Besucherdaten wird sogar auf Google-Servern ausgeführt ... Wie praktisch, daß Google mit alledem zugleich die Webseiten-Betreiber und ihre Besucher ausspionieren kann ;-(

In einigen Browsern kann man die Anzahl gleichzeitiger Anfragen an den gleichen Server zwar erhöhen (meist auf verschlungenen Pfaden und in kryptisch benannten Einstellungen). Aber kein Webmaster sollte sich darauf verlassen, daß seine Besucher diese Möglichkeiten kennen und dann auch nutzen. Im klassischen Opera (bis Version 12) geht das übrigens ganz bequem über Extras -> Einstellungen -> Erweitert -> Netzwerk -> Max. Verbindungen pro Server (sieben Werte von 1 bis 128 sind dort einstellbar).

Eine weitere Möglichkeit, Anfragen an den Server einzusparen, besteht darin, base64-kodierte Bilder über data url in die Stylesheet-Datei einzubetten (diese Technik ist für Hintergrund- und Vordergrundbilder nutzbar).

Mit CSS-Sprites die Menge gesendeter Kopfdaten verringern

Bei einer Anfrage des Browsers an den Server (HTTP-Request) werden bis zu 800 Bytes Kopfdaten gesendet, bei einer Antwort des Servers an den Browser (HTTP-Response) ebenfalls bis zu 800 Bytes. Datenversand in dieser Höhe fällt für jede einzelne Server-Anfrage an, egal ob es sich um ein 40 Kilobytes schweres HTML-Dokument oder um eine 300 Bytes leichte Layout-Grafik handelt. Die Nutzdaten, die der Server an den Browser sendet, und die der Browser dann aufbereitet und anzeigt, kommen noch hinzu.

Für das Beispiel mit den Layout-Grafiken gilt: Wer zehn solcher Grafiken hat und sie zusammen in einer CSS-Sprite-Datei speichert, erspart seinen Besuchern überflüssigen Datenversand in Höhe von bis zu 14.400 Bytes (9 mal 2 mal 800 Bytes = 14.400 Bytes). Einmal müssen die Kopfdaten jeweils für HTTP-Request und HTTP-Response natürlich auch für die Sprite-Datei mit den enthaltenen zehn Grafiken versendet werden (das sind dann aber nur bis zu 1.600 Bytes).

Jetzt sage niemand, im DSL-Zeitalter käme es auf 14.400 Bytes mehr oder weniger nicht an. Schließlich ist die Verwendung von CSS-Sprites nur eine Maßnahme von insgesamt etwa ein Dutzend Maßnahmen, die ineinander greifen mit dem Ziel, die Website-Geschwindigkeit und damit die Benutzerfreundlichkeit zu erhöhen.

Anleitung: Wie erstellt man CSS-Sprites-Dateien?

CSS-Sprites-Dateien können mit jedem Bildbearbeitungs-Programm erstellt werden, das mehrere einzelne Bilddateien über die Zwischenablage in die Zieldatei kopieren und dort möglichst platzsparend anordnen kann. Hierfür sind auch uralte Versionen des beliebten Bildbearbeitungs-Klassikers Ulead Photo Impact geeignet (das Windows-Programm war früher oft auf Webhoster-CD oder PC-Zeitschriften-CD enthalten). Im Idealfall sind die Quell-Grafiken hinsichtlich der Auflösung gleich groß, womit größere Zwischenräume vermieden werden können.

Grundsätzlich sollten Browser die in einer Sprite-Grafik enthalten einzelnen Bilder auch ohne Zwischenräume richtig darstellen. Wenn die Einzel-Grafiken jedoch mit waagerechter oder senkrechter Wiederholung (etwa als Farbverläufe) verwendet werden sollen, müssen sie aber mit Abständen angeordnet werden. Denn angeblich kann das Fehlen von Zwischenräumen in einigen Versionen des Safari-Browsers zu Darstellungs-Fehlern führen (nicht von mir getestet, weil ich als Windows-Nutzer keinen Safari habe).

Der Speicherplatz einer Sprite-Datei sollte (auch mit ggf. erforderlichen Abständen) nicht größer sein als die Summe des Speicherplatzes der originären Bild-Quelldateien. Die Größe der Sprite-Datei hängt auch von der Verschiedenartigkeit der vorkommenden Farben ab. Bei Dateien im PNG- oder GIF-Format kommt man gelegentlich sogar mit 70% der Summe der Größe der Ursprungs-Dateien aus, selbst dann, wenn man als Anzahl der Farben 256 angibt (ein höherer Wert wäre bei diesen Formaten ohnehin sinnlos).

Es gibt im Netz auch CSS-Sprites-Generatoren, die aus mehreren einzelnen Bildern eine Sprite-Datei erstellen und sogar die erforderlichen CSS-Regeln generieren. Sprites-Generatoren, deren erzeugte Dateien doppelt so groß sind wie die Summe der Einzelbilder, sollten Sie nicht verwenden.

CSS-Positions-Angaben für die Einzel-Bilder

Die in einer CSS-Sprite-Datei enthaltenen Einzelbilder werden in den CSS-Regeln über die Positions-Angaben ihrer linken oberen Ecke (1. Angabe: waagerecht: x-Achse / 2. Angabe: senkrecht: y-Achse, mit vorangestelltem Minuszeichen) und über ihre Auflösung (Breite und Höhe) angesprochen. Beispiel für die erste enthaltene Einzelgrafik, wenn diese in der Sprite-Datei ganz oben und ganz links angeordnet ist (platzsparender Normalfall). Diese Grafik ist 2px breit und 80px hoch:

selektor1{background-position:0 0;width:2px;height:80px;}

Beispiel für die zweite enthaltene Einzelgrafik, wenn diese in der Sprite-Datei unterhalb der ersten Grafik angeordnet ist und der Abstand zwischen beiden 10px beträgt (80px + 10px = 90px). Diese Grafik ist ebenfalls 2px breit, jedoch 120px hoch:

selektor2{background-position:0 -90px;width:2px;height:120px;}

Für Einsteiger ins Thema CSS: Cascading Style Sheets (abgekürzt CSS) sind eine bei der Erstellung von Webseiten verbreitete Ergänzungssprache, mit der die Darstellungs-Eigenschaften der verwendeten HTML-Elemente festgelegt werden. Eine CSS-Referenz für Hintergrundbilder gibt es auf CSS4You und den verlinkten Unterseiten. CSS4You ist nicht mehr ganz neu, aber als Referenz für (und Einstieg in) die CSS-Version 2 gut geeignet (trotz des englischen Namens auf Deutsch ). Wer sich für die englische Sprache begeistert, kann sich bei w3schools.com über CSS Backgrounds informieren. W3schools bietet übersichtliche und leicht verständliche Referenzen zu CSS (Versionen 2 und 3), HTML, Javascript, PHP und SQL. Beachten Sie auch, daß es für manche CSS-Eigenschaften Bezeichnungen in Lang- und in Kurzform gibt.

CSS-Sprites: Tipps zu Wiederholungen: repeat-x oder y

Wenn die Einzel-Grafiken als sich waagerecht wiederholende (repeat-x) Hintergrundbilder (etwa Farbverläufe) verwendet werden sollen, müssen sie in der Sprite-Datei untereinander (vertikal) mit Abständen angeordnet werden. Bei sich senkrecht (repeat-y) wiederholenden Bildern ist eine Anordnung nebeneinander (horizontal) erforderlich, auch hier mit Zwischenräumen.
Einzel-Grafiken zur Verwendung mit waagerechter und senkrechter Wiederholung sollten nicht in einer Sprite-Datei gemischt werden. Und eine solche Sprite-Datei sollte nicht zugleich Einzel-Bilder enthalten, die ohne Wiederholung (no-repeat) verwendet werden.
Alle Einzel-Grafiken in einer Sprite-Datei, die sich waagerecht wiederholen (repeat-x), sollten die gleiche Breite haben, also zum Beispiel 1 px oder 2 px. Sonst werden auch schmalere Bilder in Abständen wiederholt, die der Breite des breitesten Einzel-Bildes entsprechen.
Alle Einzel-Grafiken in einer Sprite-Datei, die sich senkrecht wiederholen (repeat-y), sollten die gleiche Höhe haben, also zum Beispiel 300 px oder 400 px. Sonst werden auch weniger hohe Bilder in Abständen wiederholt, die der Höhe des höchsten Einzel-Bildes entsprechen.

Im Bild rechts (auf mobilen Sichtgeräten irgendwo weiter oben) die Sprite-Datei mit den Farbverläufen, die ich hier auf meinen Seiten verwende. Der hellblaue Rand gehört nicht zur Grafik; den zeige ich nur an, damit die schmale Grafik nicht ganz so verloren wirkt.

CSS-Sprites-Generatoren im Netz (Auswahl)

Die drei hier kurz beschriebenen Sprites-Generatoren können nach heutigem Stand kostenlos, ohne Anmeldung und ohne Cookies genutzt werden. Sie erzeugen aus den einzelnen Bildern eine Sprites-Datei und die CSS-Regeln mit den Positionsangaben:

Spritegen v1 von website-performance.org

Mein persönlicher Favorit Spritegen v1 ist ein CSS-Sprites-Generator, den es eigentlich gar nicht mehr gibt. Jedenfalls ist er auf website-performance.org nicht mehr verlinkt. Aber verfügbar ist er für alle, die seine Adresse kennen, jetzt also auch für Sie. Spritegen v1 ist mit fast allen Browsern nutzbar und bietet sehr viele Optionen. Die Quellbilder müssen gepackt als ZIP-Datei hochgeladen werden (bei der Benennung beachten: sie werden in der generierten Sprite-Datei alfanumerisch sortiert angeordnet). Die Angabe von Horizontal- und Vertikalabständen ist erforderlich (jeweils 10px reichen aus).

Aktuelle Version von website-performance.org

Die aktuelle Version des CSS-Sprites-Generators vom gleichen Entwickler hat eine modernere Benutzeroberfläche mit weniger Einstellmöglichkeiten. Die Übermittlung der einzelnen Bilddateien erfolgt wahlweise über die Open-Schaltfläche oder per Drag & Drop vom Datei-Manager auf die leere Fläche der Generator-Seite. Dieser Sprites-Generator ist nicht mit allen Browsern bedienbar, Firefox sowie Webkit- und Blink-Browser werden aber unterstützt. Bei meinem Test habe ich den unter About dokumentierten Knopf Generate vergeblich gesucht und stattdessen die Schaltfläche Downloads betätigt (das funktioniert auch).

Sprites-Generator von css.spritegen.com

Der Sprites-Generator von css.spritegen.com funktioniert mit nahezu allen Browsern (auch mit Opera 12) und bietet eine leicht verständliche Oberfläche mit nur wenigen Optionen. Die Ursprungs-Bilddateien werden über ein Formular hinzugefügt. Wer einen transparenten Hintergrund braucht, sollte auch bei vorhandenen GIF-Bildern als Zielformat PNG wählen. Zusätzlicher Vorteil: die generierte Sprite-Datei im PNG-Format ist erheblich kleiner als die Summe der Quelldateien im GIF-Format.

Weitere CSS-Sprites-Generatoren ...

... sind csssprites.com, spriteme.org, spritecow.com, spritepad.wearekiss.com und css-sprit.es (letzterer schon länger nicht mehr erreichbar, deshalb kein Link). Meine Liste ist ohne Anspruch auf Vollständigkeit. Wenn Sie noch einen Sprites-Generator kennen, schreiben Sie doch bitte einen Kommentar.

CSS-Sprites für Farbverläufe (Anwendungsbeispiel)

Ein Anwendungsbeispiel für CSS-Sprites sind die Farbverläufe, die ich hier auf meinen Seiten in Menü-Elementen, für Suchen- und Senden-Schaltflächen sowie in der Fußzeile verwende. Etwas weiter oben rechts sehen Sie Sprite-Datei mit den fünf enthaltenen Einzel-Grafiken (das erste und das vierte Bild verwende ich zur Zeit nicht).

vom CSS-Sprites-Generator Spritegen v1 generierte CSS-Regeln:

.1_fvblau80 {background-position:0 0;width:2px;height:80px;}
.2_fvbla120 {background-position:0 -90px;width:2px;height:120px;}
.3_fvsilber {background-position:0 -220px;width:2px;height:50px;}
.4_fvgold1  {background-position:0 -280px;width:2px;height:50px;}
.5_fvgold2  {background-position:0 -340px;width:2px;height:50px;}

Don't forget to add a background rule to reference the sprite image. Something like this, for example:

#container li{background:url(csg-551f049377445.gif) no-repeat top left;}

Die Positions-Angaben in den erzeugten CSS-Regeln sind richtig (wie bei den meisten Generatoren), als Selektoren werden die ursprünglichen Bildnamen verwendet. In der Regel zur Bildzuweisung ist die Eigenschaft no-repeat nicht in jedem Fall angebracht, für meinen Zweck (sich wiederholender Farbverlauf) ist sie falsch. Der Selektor #container li ist ohnehin nur ein Beispiel, und der Name der generierten Sprite-Datei ist auch änderbar. Bei mir heißt sie nicht csg-551f049377445.gif, sondern s1fv.gif (schon wieder 13 Bytes gespart :-)).

stylesheet.css: die richtigen Selektoren mit von mir angepaßten CSS-Regeln:

allen Selektoren mit Farbverläufen die Sprite-Datei s1fv.gif zuweisen: stylesheet.css #15:

.menue1 li,.menue1 a:visited,.menue1 a:link,.menue1 li:hover,
  .menue1 li:hover a,.menue1 li:hover a:visited,.menue1 li:hover a:hover,
  .menue1 li a:hover,.menue1 ul.menulevel1 li.sdoc,
  form div#searchbox input.submit,.fuss,#cmsimple_mailform input.submit,
  .sucheing2 input.schalter,#comments_form_submit input
  {background:url("./images/s1fv.gif") repeat-x;}

benötigte Farbverläufe aus der Sprite-Datei zuweisen an die ...
(1) Menü-Elemente: stylesheet.css #37, #39:

.menue1 li,.menue1 a:visited,.menue1 a:link{background-color:#eee;
  background-position:0 -220px;}
.menue1 li:hover,.menue1 li:hover a,.menue1 li:hover a:visited,
  .menue1 li:hover a:hover,.menue1 li a:hover,.menue1 ul.menulevel1 li.sdoc
  {background-color:#fe7;background-position:0 -340px;}

(2) Suchen-Schaltflächen CMS/Blog: stylesheet.css #85, #112:

form div#searchbox input.submit{background-color:#364886;
  background-position:0 -90px;}
.sucheing2 input.schalter{background-color:#364886;
  background-position:0 -90px;}

(3) Fußzeile: stylesheet.css #94:

.fuss{background-color:#364886;background-position:0 -90px;}

(4) Senden-Schaltfläche Kontakt-Formular: stylesheet.css #102:

#cmsimple_mailform input.submit{background-color:#364886;
  background-position:0 -90px;}

(5) Veröffentlichen-Schaltfläche Kommentar-Formular: stylesheet.css #183:

#comments_form_submit input{background-color:#364886;
  background-position:0 -90px;}

Hinweise: Die weiteren den Selektoren zugewiesenen Eigenschaften habe ich hier aus Platzgründen entfernt. Zeilenangaben hinter # in meiner stylesheet.css nach Stand von heute (können sich künftig ändern). Die stylesheet.css kann am schnellsten mit den Entwicklerwerkzeugen des Browsers angezeigt werden (in den meisten Browsern mit den Tasten F12 oder Strg+Umschalt+I erreichbar).

Weitere eigene Anwendungsbeispiele für CSS-Sprites sind die Bewertungs-Sterne hier und dort (und dort auch die zur Bewertung genutzten Biergläser :-)).

SEO-Tipp: zusätzlich geeignete Ersatzfarbe angeben:

Für den Fall, daß ein Hintergrundbild ausfällt, sollte immer zusätzlich eine passende Ersatzfarbe mit ausreichendem Kontrast zur Vordergrund-Schrift angegeben werden: background-color: #irgendwas;. Weiße Schrift auf weißem Hintergrund ist nicht lesbar und könnte von Google als versteckter Text gewertet werden.

CSS-Sprites: Geschichte und Gegenwart

Neu ist die Sprites-Technik nicht. Die nötigen Hintergrund-Eigenschaften background-position, background-repeat, repeat-x und repeat-y gehörten schon zum Umfang der CSS-Version 1 vom 17. Dezember 1996. Einer der beiden Verfasser war Håkon Wium Lie, später zugleich langjähriger leitender Entwickler (CTO) bei Opera ASA.

Die ersten Versionen heute noch gebräuchlicher Browser, die diese Eigenschaften darstellen konnten, waren der IE 4.0 (September 1997), Opera 3.5 (November 1998), Firefox 1.0 (November 2004) und Chrome 1.0 (Dezember 2008).

Größere Aufmerksamkeit erfuhren CSS-Sprites im Jahr 2004 durch den legendären Artikel von Dave Shea in AListApart (auf Englisch). Dort beschrieb er hover-Bildwechsel bei Schaltflächen und größeren, in Listenelemente aufgeteilten Hintergrundbildern. Die Verbesserung der Website Performance durch Sprites-Technik rückte im Jahr 2007 in den Mittelpunkt des Interesses, als websiteoptimization.com die Seite CSS-Sprites How Yahoo.com and AOL.com Improve Web Performance veröffentlichte (der Klassiker zum Thema):

Learn how AOL and Yahoo! use CSS sprites to improve performance for their busy home pages. CSS sprites save HTTP requests by using CSS positioning to selectively display composite background images. To maximize accessibility and usability, CSS sprites are best used for icons or decorative effects.

Ende des Jahres 2009 schrieben auch die Webkrauts mit dem Artikel Kürzere Ladezeiten durch CSS-Sprites eine leicht verständliche Einführung auf Deutsch.

Und heute? Wer sich im Netz umschaut, stellt fest, daß CSS-Sprites eher selten verwendet werden. In kaum einem CMS-Template oder -Theme wird die Sprites-Technik eingesetzt. Auch bei Webmastern, die ihre Seiten selber bauen, sind CSS-Sprites nahezu unbekannt. Manche Seiten stellen mehr als 200 Anfragen an den Server, liefern ein Datenvolumen von über 20 MB und benötigen trotz schneller DSL-Verbindungen über 30 Sekunden zur Anzeige aller Elemente. Es wäre ein Gebot der Stunde, Ladezeiten zu verringern und Bandbreite einzusparen, um Webseiten schneller zu machen und damit die Nutzererfahrung zu verbessern. Wenn eine Seite nach einer, höchstens zwei Sekunden nicht aufgebaut ist, brechen die meisten Besucher ab und rufen in der Suchmaschine den nächsten Treffer auf. Und zumindest bei Google ist die Website-Geschwindigkeit auch eines der über 200 Ranking-Kriterien.

Aktualisierung am 25.11.2020: Mittlerweile beherrschen alle gängigen Browser CSS3-Farbverläufe, so daß für mehrere Farbverläufe keine Sprite-Datei mehr erforderlich ist. Auch ich habe diese Website inzwischen auf CSS3-Farbverläufe umgestellt (und damit noch eine Anfrage an den Server eingespart). Beispiel: Hintergrund der Fußzeile: .fuss {background: linear-gradient (to bottom, #3C4F8E, #5165A8, #647BC1);}