CSS-Sprites ist eine Technik, mit der sich die Anzahl der HTTP-Anfragen für die Anzeige der Bilder einer Webseite reduzieren lässt. Die Einzelbilder werden dabei in ein größeres Bild mit definierten X- und Y-Koordinaten umgewandelt. Den jeweiligen Seitenelementen wird über die CSS-Regel background-position der entsprechende Bildausschnitt zugewiesen, so dass nur der Bereich des Bildes angezeigt wird.

Mit dieser Technik kann die Geschwindigkeit einer Webseite sehr effektiv erhöht werden, insbesondere dann, wenn viele kleine Bilder wie etwa in Menü-Icons verwendet werden. Zum Beispiel wird auf der Yahoo! Webseite genau diese Technik verwendet.

Probleme

Es gibt ein paar sehr nervige Browserfehler, die man umgehen muß, wenn man CSS-Sprites verwenden möchte.

Opera

Opera (mindestens bis zur Version 9.0) kann keine Hintergrundposition größer 2042 Pixel oder kleiner -2042 Pixel verarbeiten und rundet anstatt dessen auf diese Werte. Dieses Werkzeug umgeht das Problem, indem es eine neue Spalte erzeugt, wenn dieses vertikale Limit erreicht wird.

Safari

Safari hat ein Problem mit sich wiederholenden Hintergrundbildern. Glücklicherweise kann dieses Problem einfach behoben werden, indem man zwischen den Bildern ausreichend großen horizontalen Abstand lässt (kann im Werkzeug festgelegt werden).

Weitere Informationen

Bei A List Apart wurde unter der Überschrift "CSS Sprites: Image Slicing's Kiss of Death" ein Artikel veröffentlicht, der das Konzept von CSS-Sprites im Detail erklärt. Falls diese Technik neu für Sie sein sollte, empfehlen wir Ihnen, unbedingt den Artikel durchzulesen und die Technik auszuprobieren.