Der Einsatz von CSS Sprites ist eine effektive, aber immer noch relativ unbekannte bzw. wenig genutzte Methode, um den Austausch von Hintergrundgrafiken zu realisieren. Dabei bieten Sprites doch bei einfacher Handhabung einige Vorteile, welche die Performance einer Website durchaus erhöhen können.

Das Problem

Eine typische Anwendung, bei der die Hintergrundbilder ausgetauscht werden, wäre zum Beispiel der beliebte und bekannte Mouseover-Effekt in Navigationselementen. Gewöhnlich sehen die entsprechenden Style Sheets so aus:

[sourcecode language=’css‘]
#menue a {
[…]
background: url(„button-normal.png“) top left no-repeat;
}
#menue a:hover {
[…]
background-image: url(„button-hover.png“);
}
#menue a:active {
[…]
background-image: url(„button-active.png“);
}
[/sourcecode]

Ändert sich der Status des Links, wird auch die Grafik getauscht. Das können pro Link im Extremfall bis zu vier Grafiken sein (a:link, a:visited, a:hover, a:active). Der Nachteil dieser Verfahrensweise ist, das es durch das Nachladen des getauschten Hintergrundbildes schon einmal – abhängig von Online-Anbindung und verwendetem Browser – zu Verzögerungen kommen kann, die sicher nicht gewünscht sind.

Für jedes Bild, aber auch ganz allgemein für jede externe Ergänzung (z.B. Javascripte) muss ein HTTP-Request gemacht werden. Das Problem ist nun, dass abhängig vom Browser nur eine bestimmte Anzahl an HTTP-Requests parallel ausgeführt werden können bzw. dürfen. Wenn eine Website also sehr viele Grafiken (Hintergrundbilder, Icons, Symbole, etc.) aufweist, kommt es grundsätzlich zu längeren Ladezeiten.

Die Lösung

CSS Sprites können dieser Problematik massiv entgegenwirken. Mehrere Grafik-Elemente werden in einem einzigen Bild zusammengefasst und bei Bedarf ausschnittsweise an der richtigen Position angezeigt.

Das entsprechende Element, hier unser Link, bekommt die Sprite-Grafik in gewohnter Weise als Hintergrund zugewiesen. Den verschiedenen Zuständen des Links, also :hover und :active, wird aber nur noch die Position mitgeteilt, ab der ein relevanter Auschnitt angezeigt werden soll. Der CSS-Code des oben erwähnten Beispiels würde dann so ausschauen:

[sourcecode language=’css‘]
#menue a {
[…]
background: url(„sprite.png“) top left no-repeat;
}
#menue a:hover {
[…]
background-position: -126px 0;
}
#menue a:active {
[…]
background-position: -251px 0;
}
[/sourcecode]

Das Prinzip der CSS Sprites ist also recht einfach. Aber wieso wird es immer noch so selten eingesetzt? Vielleicht liegt es an der Unbequemlichkeit, erst einmal die Position eines gewünschten Ausschnittes in einer Sprite-Grafik ermitteln zu müssen. Gerade bei einem umfangreichen Sprite mit vielen kleinen Bildteilen kann dieser Arbeitsschritt durchaus nerven. Doch ein sehr nettes Online-Tool kann uns diese Arbeit abnehmen.

Das Tool

Der CSS Sprite Generator erstellt nicht nur die gewünschte Sprite-Grafik, sondern liefert auch gleich den passenden CSS-Code dazu, was natürlich den weiteren Arbeitsschritt, nämlich die Einbindung, zu einem Kinderspiel macht.

Die Bedienung des Tools ist einfach, zumal es eine deutsche Version davon gibt. Man erstellt seine Grafiken wie gewohnt, packt diese in ein ZIP-File, lädt sie hoch und bekommt ein Sprite-Bild – wahlweise als PNG-, GIF- oder JPEG-Grafik – und CSS-Regeln zurück. Die Optionen sind grösstenteils selbsterklärend. Nähere Erläuterungen findet man unter dem Menüpunkt „Hilfe“.

Sehen Sie einen Unterschied zwischen den beiden vergrösserten Icons? Nein? Nun, es gibt auch keinen. Es spricht also nichts dagegen, das Sprite mit OptiPNG optimieren zu lassen und so ein paar Bytes zu sparen, denn OptiPNG – übrigens ein freies Programm – komprimiert PNG-Grafiken völlig verlustfrei.