CSS Sprites ist eine Technik, mir der man die Anzahl von HTTP Verbindungen der Seite herunterschrauben kann. Jede HTTP Verbindung die während des Ladens der Seite erstellt wird verlangsamt die Seite. Die Idee von CSS Sprites ist das man anstatt von vielen Bildern ein einziges verwendet und nur Teile dieses Bildes mittels der background-position Regel von CSS anzeigt.

Diese Technik kann sehr effektiv sein, besonders dann wenn man viele kleine Bilder wie Icons auf einer Seite verwendet. Zum Beispiel sind alle Bilder im linken Menu auf der Yahoo! Anfangsseite in einem einzigen File.

Probleme

Es gibt ein paar sehr nervige Browserfehler die man umgehen muß wenn man mit CSS Sprites arbeiten will.

Opera

Opera (bis zur Version 9.0) kann keine Hintergrundposition von über 2024 Pixel oder weniger als -2024 Pixel verarbeiten und rundet diese auf diesen Wert auf oder ab. Dieses Werkzeug umgeht das Problem indem es alle 2024 pixels eine neue Spalte erzeugt.

Safari

Safari hat ein Problem das Hintergrundbilder mehrfach angezeigt werden. Man kann das Problem umgehen indem man zwischen den Bildern ausreichend Freiraum beibehät. Dies kann im Werkzeug definiert werden.

Weitere Informationen

Bei A List Apart gibt es einen Artikel mit dem Titel "CSS Sprites: Image Slicing's Kiss of Death" der das Konzept von CSS Sprites im Detail erklärt. Falls dieser Trick was ganz Neues für Sie sein sollte, raten wir Ihnen den Artikel durchzulesen, damit Alles einfacher wird.