Wer sich mit CSS ein bisschen auskennt wird die Styledefinitionen “background” und “background-image” sicher kennen. Sie dienen dazu, Elementen einer Webseite eine Hintergrundfarbe oder ein Hintergrundbild zuzuweisen. Das kann eine Schaltfläche oder ein Schlagschatten sein, oder ein einfacher Verlauf. Möchte man nun mehreren Elementen einer Webseite Hintergrundgrafiken zuweisen, kann man CSS Sprites nutzen, um die Ladegeschwindigkeit zu optimieren. Durch die Sprite-Technik werden Serverabfragen reduziert. In der Regel lädt der Browser beim ersten Aufruf einer Seite die Sprite-Datei und speichert so alle Grafikelemente im Cache. Der Trick dabei ist, mehrere Hintergrundgrafiken in einer Datei zusammenzufassen, um sie mithilfe der Definition “background-position” pixelgenau zu platzieren.
Ein gutes Anwendungsbeispiel dafür bietet Youtube.com. Diese Webanwendung greift das Prinzip der Sprites auf und nutzt sie auf der gesamten Seite.
Youtube.com nutzt Sprites um die Performance zu optimieren
Wie man sieht, befinden sich in der Datei sämtliche Grafikelemente (z.B. Logo, Email, Favoriten, Verläufe, Bewertungssymbole…), die unter Verwendung von CSS an den gewünschten Stellen positioniert werden. Zur Anwendung kommen Background-Images auch bei Image Replacement-Methoden, um zum Beispiel das Logo in der Corporate Identity anzeigen zu lassen, wobei die Webseite aus semantischer Sicht lesbar bleibt. Dabei geschieht folgendes:
Man definiert via HTML eine Überschrift “h1″. Dann rückt man den Text mit “text-indent” aus dem sichtbaren Bereich und fügt via CSS ein Hintergrundbild ein. Dieses Bild ersetzt dann den Text. Die ersetzte Überschrift sollte, den Richtlinien entsprechend, den selben Text aufweisen wie das sichtbare Bild. Ein Nachteil dieser Methode besteht darin, dass kein Text lesbar ist, falls der User die Darstellung von Bildern unterdrückt. Lesegeräte hingegen, haben damit kein Problem.
<div style="background: #FFF url('pfadZurDatei.png') left top no-repeat; height: 33px; width: 84px; text-indent: -999px">Youtube</div>
würde dann so aussehen (aus semantischen Gründen verzichte ich in diesem Beispiel auf die Verwendung von “h1″ und nutze stattdessen das bedeutungslose Element “div”: