Wenn ich meine Webseiten einer Page-Speed-Kontrolle unterziehe, bekomme ich immer wieder den Vorschlag angezeigt, CSS-Sprites zu nutzen. Sinnvoll ist deren Einsatz, wenn auf einer Seite mehrere Hintergrundbilder geladen werden. Jedes Bild bedeutet eine Anfrage an den Server und damit Performance-Verlust. Bilder, wie Icons, Buttons, Navigationsgrafiken, die sich in der Regel nicht ändern, sind besonders geeignete Grafiken für CSS-Sprites. Dadurch lassen sich die HTML-Requests erheblich reduzieren. Innerhalb von CMS heißt das, dass die “Mastergrafik” von jeder Seite geladen wird.
Aus vielen mache 1 Grafik
Aus vielen Einzelbildern einer Seite wird 1 Grafik erzeugt. Beim Laden der Seite wird also nicht für jede Grafik eine Serveranfrage geschickt, sondern nur für eine. Mithilfe eines Grafikprogramms baut man sich die Einzelbilder zusammen. Im Internet gibt es aber Tools (siehe unten) dafür, die sogar den benötigten CSS-Code gleich mit ausgeben, der dann aber noch angepasst werden muss.
Einzelgrafiken anzeigen
Die in der Gesamtgrafik enthaltenen Einzelbilder haben alle eine Position innerhalb dieser Grafik. Diese wird nun mit der CSS-Eigenschaft “background-position” für jedes Einzelbild an gewünschter Stelle innerhalb der Website angegeben. Auf diese Weise wird dort dann nur das jeweilige Bild mit eben dieser bestimmten Position angezeigt.
Wie bei “normalen” CSS-Angaben auch können hier weitere CSS-Eigenschaften, wie Active, Hover oder Focus gleich mit definiert werden. Frank Bültge zeigt das an einem Beispiel in seinem Blog. Die wohl größte Schwieigkeit besteht darin, die Koordinaten der Einzelgrafiken zu bestimmen. Die oben erwähnten Tools erledigen das.
Oder anders gesagt…
Wem das zu unverständlich erscheint, stelle sich einmal einen Adventskalender mit 24 Türchen vor. Denken Sie sich eine Lupe, mit der Sie über den Kalender fahren und jedes Türchen vergrößern. Die Stelle, an der sich Ihre Lupe gerade befindet, ist die Position. Sie sehen also nur gerade 1 Türchen vergrößert. Für das oben Gesagte heißt das: Ihre Lupe pickt sich gerade 1 Bild heraus. Ändern Sie die Position der Lupe, sehen Sie ein anderes Türchen.
Na gut, ein bisschen weit hergeholt, aber vielleicht hilft’s.
Beispiele
Natürlich haben bereits viele andere Autoren das Thema aufgegriffen. Beispiele mit Code und Grafik habe ich u. hier gefunden:
Sprites auf XING
Grafik und Code
http://www.w3schools.com
Auf dieser Seite können Besucher durch Modifizieren des Codes live erleben.
Animation mit Sprites
Wie sich Sprites auch als Animation verwenden lassen, zeigt die Seite http://mediavrog.net.
Ein eigenes Beispiel
Die “Mastergrafik” enthält die Icons mit einem Zwischenabstand von 5px.
sprite2.png
Die Einzelgrafiken werden in meinem Beispiel als Liste ausgegeben:
Der CSS-Code dafür steht in der CSS-Datei meines Themes:
Im Backend (Artikel, HTML-Ansicht) habe ich folgenden Code platziert:
Ein Praxisbeispiel für solch eine Darstellung mit ausgewählten Icons wäre eine Download-Liste. Im Beispiel sind natürlich keine URLs hinterlegt.
Wann ist der Einsatz von CSS-Sprites nicht sinnvoll?
- Wenn die gleichen Hintergrundbilder nur auf sehr wenigen Seiten auftauchen, braucht man sich die Mühe mit Sprites nicht zu machen.
- Ein sehr großes “Masterbild” kann trotz Komprimierung richtig groß sein. Beim Laden der Seite belegt es reichlich Arbeitsspeicher.
- Sind sich wiederholende Hintergrundbilder gewünscht (repeat-y bzw. repeat-x), kann das mit Sprites sehr schwierig werden.
Welche Bilder sind geeignet?
Eine variable Höhe, eine feste Breite wird von einigen erfahrenen Nutzern von CSS-Sprites empfohlen. Die Breite eines Einzelbildes sollte mindestens der des breitesten Bildes entsprechen. Dass die Bilder ordentlich in einem geeigneten Raster angeordnet werden, nehmen uns Tools ab. Doch nicht jedes der Hilfsmitttel liefert ein gutes Ergebnis. Hier muss man einfach ein wenig austesten.
Tools
Im obigen Beispiel habe ich den CSS-Sprite-Generator benutzt. Natürlich muss man dann die CSS- und HTML-Ausgabe seinen eigenen Bedürfnissen anpassen.
Bei meinen Recherchen bin ich noch auf diese Seiten gestoßen:
Ladezeiten von Internetseiten verbessern Hapke Media
Donnerstag, 10. November 2011 um 11:22 Uhr via pingback
[...] CSS-Sprites [...]