Vergleich Image-Sprites und Klassisch

Demonstration, wie speicherintensiv Einzelbilder im Gegenzug zu Image-Sprites (Sliding-Doors-Technik) sind.
Im Beispiel sehen Sie die aktuelle Navigation der Technikwürze-Webseite: Fünf Menüpunkte zu jeweils drei Status (nicht aktiv, hover/focus und aktiv).

Die klassische Methode

15 Dateien, ~61 KB

Jeder Menüpunkt wird jeweils drei Mal als Bilddatei gespeichert. Diese Bilder dienen als Hintergrundgrafik für die jeweiligen Links.
Bei Mouseover oder Aktivzustand wird das benutze Bild gegen das entsprechende Ersatzbild getauscht.

Image-Sprites

1 Datei, ~37 KB

Jeder Link teit sich ein großes Bild, welches alle Zustände enthält. Bei Mouseover oder Aktivzustand wird dieses große Bild einfach innerhalb des Links verschoben.