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

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Top