CSS-Sprites
Wie sehen Sprites eigentlich aus?
Auf der Startseite von www.spiegel.de seht ihr im großen Footer weitere Serviceangebote. Vor jedem dieser Service-Links steht ein kleines Icon. Alle Grafiken in einer einzigen Datei zusammengefasst ergeben ein Sprite. Im Falle vom Spiegel-Footer sieht das dann so aus: http://www.spiegel.de/static/sys/v10/bg/bg_footer-partner-sprite.png
Wie wird das Sprite dann positioniert?
Gehen wir davon aus, wir haben eine DIV-Box mit der Abmessung von 30px x 30px. Wenn wir nochmal einen Blick auf das Spiegel-Sprite werfen sehen wir, dass diese Grafik wesentlich größer ist 30x30 px. Die "überstehenden Teile" der Grafik sind also nicht sichtbar da die DIV-Box zu klein ist. Und genau darin liegt die Idee: Ich verschiebe über die CSS-Eigenschaft "background-position" meinen Hintergrund so, dass nur der Ausschnitt sichtbar ist den ich sehen möchte und der Rest "abgeschnitten" wird.
Kann ich die einzelnen Icons kreuz und quer auf der Grafik platzieren?
Mit Sprites zu arbeiten bedeutet, dass ihr ein wenig rechnen müsst. Wollt ihr z.B. das 3. Icon von oben sehen, und jedes Icon ist 30px hoch, dann muss die Hintergrundgrafik 60px nach unten verschoben werden.
Und wie sieht der Quellcode dazu aus?
<div style="width:25px; height:30px; background-image:url(bg_footer-partner-sprite.png); background-position:0 -60px; background-repeat:no-repeat "></div>
OK, was bringt das Ganze?
Der Haupt-Sinn liegt darin, eine geringere Anzahl an requests zu erzeugen. Jedes mal wenn euer Browser eine Datei abruft (ein Bild, eine html-Datei, ein PDF, ...) stellt er eine Anfrage (request) an den Webserver. Z.B.: "Gib mir bitte die Datei logo.jpg"
Der Server antwortet (response): Hier ist die Datei logo.jpg.
Das "Frage-und-Antwort-Spiel" benötigt Zeit. Jedes Bild, jede CSS-Datei, jede JavaScript-Datei - alles wird beim Laden einer Seite separat angefragt. Durch das Zusammenfassen von Grafiken (Sprite) verringert man die Anzahl der Anfragen. Dadurch wird ein Geschwindigkeitsvorteilt erzielt.
Ist die Dateigröße eine Sprites größer oder kleiner als die Summe aus den Einzelgrafiken?
Das Ganze ist halt die Summe seiner Teile. Demnach macht es erstmal keinen Unterschied.
Trotzdem kann man etwas an Größe einsparen, in dem man Sprites farblich zusammenfast und z.B. als gif abspeichert.
Die Idee dahinter ist, beispielsweise alle roten Piktogramme zusammen zu fassen, das Rot anzugleichen und einschließend ein .gif mit 2 Farben zu speichern, da ein gif mit wenigen Farben kleiner ist als eins mit mehr Farben. Das selbe wiederholt man mit Grau, Blau, etc.
Sollte ich Sprites auf jeder Webseite einsetzen?
Tja, das hängt sehr mit der Projekt-Art und -Größe ab. Muss wirklich beim ersten Laden der Seite das E-Mail-Symbol in der Sprite-Grafik geladen werden, obwohl die Mailadresse nur im Impressum auftaucht? Auf den restlichen 600 Unterseiten erscheint diese Grafik nirgendwo. Habe ich sowieso nur spärlich hier und da mal ein Icon auf der Seite, lohnt sich der Mehraufwand dann wirklich?
Wann empfiehlt sich der Einsatz unbedingt?
Beim Hovern. Früher sah man häufig, dass eine Grafik, die beim Mousover wechseln sollte, nachladen musste. Das war unschön. Durch den Einsatz eines Sprites wird die Grafik direkt geladen und beim Hovern per CSS nur verschoben. Dies geschieht sofort, ohne dass irgend etwas nachgeladen werden muss.