CSS Sprite - Geschwindigkeitsoptimierung beim Laden der Webseite

Eine Möglichkeit die Ladegeschwindigkeit von Webseiten zu verbessern, ist die Verwendung der CSS Sprite Methode. Dabei werden Designelemente wie z.B. Buttons in verschiedenen Zuständen in einer Grafik zusammengefasst. Mit Hilfe von CSS - "Background-position" wird die Grafik dann im Anzeigebereich ausgerichtet.

Der Vorteil der Methode ist, das nur noch ein Bild geladen wird muss, anstellen von vielen einzelnen Grafiken. Das reduziert die HTTP-Requests und die Seite wird schneller geladen.

Beispiel

Spritegrafik, einzelne Buttons und Designelemente sind in einer Grafik zusammengefasst.

background-image: url("/img/layout/crumbsNaviSprite.gif");
background-position: -5px -82px;

bsp. CSS-Code

mit dem CSS-Code wird die grüne Blume an der richtigen Stelle positioniert.
Wichtig ist, das das umgebene hrml-Element eine Höhe, Breite und ggf. ein overflow:hidden; besitzt.
Das sonst die anderen Grafikenelemente sichtbar werden können.  

Weitere Informationen und Tools

- Sprite Tutorial
- Spriteme

Über den Autor

Roland Heuberger, Web Producer

Telefon +49 (0) 30 609 82321 21
E-Mail: roland.heuberger@pixeltex.com