CSS Sprites – Webseiten Performance 1

CSS Sprites sind ein sehr gutes Mittel zur Verringerung der Ladezeiten von Webseiten. Dennoch scheuen viele Entwickler noch den Einsatz von CSS Sprites, da fehlende Erfahrung beim Erstellen viel Zeit kosten und den Performancegewinn zunichte machen kann. In diesem Artikel möchte ich gängige Verfahren und Ansätze darstellen, um übliche Fehler zu vermeiden. Ich möchte dem Leser damit die Fähigkeit vermitteln, die richtigen Entscheidungen zum Einsatz von CSS Sprites treffen zu können.

Was sind CSS Sprites?

Eine knappe Einführung noch vorweg, für alle die mit dem Begriff per se (noch) nichts anfangen können:
Sprites sind (Bild-)Dateien, in denen viele Bilder nebeneinander angeordnet sind. Bei der Darstellung eines Sprite wird aber immer nur ein Ausschnitt gezeigt, während die anderen Bilder verborgen bleiben (maskiert). Beim Verschieben der Grafik im Hintergrund wird ein weiterer Teil sichtbar. Animiert man die Position des Hintergrundbildes, kann so der Eindruck von Bewegung entstehen. Diese Technik entstammt der Computerspielindustrie, wo sie bereits seit Jahrzehnten eingesetzt wird. Genaueres zu Sprites im Allgemeinen findet sich in der Wikipedia.

Kirby Idle Animation by hextupleyoodot

Kirby Idle Animation by hextupleyoodot - Thanks

Die Einzelbilder der Kirby Idle Animation by hextupleyoodot

Die Einzelbilder der Kirby Idle Animation by hextupleyoodot

(thanks to hextupleyoodot)

CSS Sprites nutzen ebenfalls eine Bilddatei, in der mehrere Einzelbilder enthalten sind, aber meist nicht zum Zwecke der Animation. Vielmehr werden sie als Hintergrundbild vieler Elemente referenziert, wobei durch Angabe der Position das gewünschte Bild dargestellt wird.

CSS Sprites kommen vor allem für kleinere Grafiken und Hintergrundgrafiken zum Einsatz, welche auf einer Webseite zur Gestaltung eingesetzt werden. Diese Technik eignet sich für Designelemente und nicht für inhaltsbezogene Bilder wie Fotos.

Wie funktionieren CSS Sprites genau?

Das folgende Beispielbild enthält mehrere Zustände einer Auswahlbox. Anstatt per :hover, :focus etc. die Bilder auszutauschen, habe ich sie in ein Bild gepackt (>> CSS Sprite). Sie sollen nun als Hintergrundbilder eines HTML-Elements zum Einsatz kommen. Mittels CSS wird dabe das Sprite als background-image zugewiesen. Der Trick besteht nun darin, für jeden Status des Elements die passende background-position zu definieren. Damit wird das Sprite unter dem Element so positioniert, dass die gewünschte Teilgrafik sichtbar wird.

Beispiel für die Verwendung von CSS Sprites

Das passende CSS

.checkbox{
  background: url(checkboxes.png) no-repeat 0 0;
  height: 25px;
  width: 25px;
}

.checkbox.checked{
  background-position: 0 -40px;
}

.checkbox:focus{
  background-position: 0 -80px;
}

[...]

Demo (customformelements.net)


Auf der nächste Seite werden Vor- und Nachteile für den Einsatz von CSS Sprites dargestellt.

Pages: 1 2 3 4

2 Kommentare

  1. Paul April 3, 2010 4:41   Antworten

    Sehr interessanter Artikel.
    Ich bin gerade dabei meine private Internetpräsenz zu überarbeiten und versuche den Seitenaufbau zu beschleunigen. Ich persönlich arbeite wegen der Trägheit ungern mit JavaScript und bevorzuge alles über CSS zu realisieren. Mittlerweile gibt es Unmengen an JS-Bibliotheken die mit Kanonen auf Spatzen schießen. Deine Demonstrationsseite gefällt mir sehr gut. Ich hab die Seite abgespeichert. Sicherlich lässt sich darauf aufbauen.

Einen Kommentar hinterlassen