Ladezeit optimieren – CSS Sprites

Egal ob Hintergründe, Verläufe oder auch nur einfache Buttons viele Webseiten verwenden für ihr Layout Bilder. Zwar können die meisten Effekte mittlerweile mit CSS3 umgesetzt werden, jedoch wird es noch eine ganze Weile dauern, bis das alle Browser unterstützen.

Bilder haben gegenüber CSS einen entscheidenden Nachteil: Sie müssen einzeln vom Server geladen werden.

Hat man zum Beispiel ein Menü mit 3 verschiedenen Zuständen (default, hover, active) benötigt man 3 Bilder. D. h. es wird 3 Mal eine Verbindung um Server aufgebaut und ein Bild geladen.
Wenn man nicht alle 3 Bilder initial im Hintergrund lädt, hat man außerdem noch das Problem, dass es Verzögerungen beim Wechseln der Bilder gibt (z.B. bei MausOver).

An dieser Stelle kommen CSS-Sprites zum Einsatz.

Was sind CSS-Sprites?

Ein CSS-Sprite ist nichts anderes, als ein Bild, dass mehrere andere Bilder enthält.
Dieses wird dann mit Hilfe von background-image an den gewünschten Stellen geladen und mit background-position das richtige Bild angezeigt.

Beispiel:

Statt der 3 einzelnen Menübilder erstellen wir ein Bild, in dem alle 3 Bilder untereinander dargestellt werden. Alle Menüpunkte bekommen die CSS-Eigenschaft background-image, mit der das Bild geladen wird. Je nach Zustand des Menüpunktes wird das Hintergrundbild mit der CSS-Eigenschaft background-position verschoben.

Daraus ergeben sich folgende Vorteile:

  • Es wird nur noch ein Bild geladen
  • Das Gesamtbild ist oft kleiner als die einzelnen Bilder zusammen
  • Es gibt keine Verzögerung beim Tauschen der Bilder

Leider hat das Ganze auch einen Haken. Das Erstellen der CSS-Sprites und der benötigten CSS-Eigenschaften ist im Vergleich zu den einzelnen Bildern relativ aufwändig.

Allerdings kann man sich mit dem Online-Tool Spritebox die CSS-Eigenschaften automatisch generieren lassen.

 

Dieser Beitrag wurde unter HTML / CSS veröffentlicht. Setze ein Lesezeichen auf den Permalink.

Hinterlasse eine Antwort