Webseiten schneller machen mit CSS-Sprites

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.

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:

Tags: , , , ,

Nichts verpassen und neue Beiträge abonnieren

Privatsphäre garantiert! Jederzeit abbestellbar!

3 Enlightened Replies

Trackback  •  Comments RSS

  1. Alex sagt:

    Hallo,

    wenn aber die Texte in der Liste l├Ąnger werden, dann funktioniert die horizontale Anordnung der Grafiken leider nicht.

einen Kommentar schreiben

Bitte Einloggen , um einen Kommentar zu hinterlassen

Top