CSS-Sprites sind eine tolle Sache um die Ladegeschwindigkeit von Websites zu erhöhen. Der Download eines großen Bildes dauert nicht so lang als der Download mehrerer kleiner Bilder. Durch CSS-Sprites bleiben auch mehrere HTTP-Verbindungen frei z.B. für andere Downloads wie Scripte oder Stylesheets.

CSS-Sprites sind also mehrere kleine Icons/Buttons in einer großen Grafik – per CSS wird aber immer nur der benötigte Ausschnitt der Grafik angezeigt.

Als Beispiel ein CSS-Sprite von Facebook, mit Logo, Gefällt mir Daumen, Kalender und weiteren Icons:

Doch wie sieht es aus, wenn die CSS-Sprites sehr groß sind und man aber nur ein Icons anzeigen will, das ganz am Ende der Grafik ist?
Muss die gesamte Grafik geladen werden, damit ein Icon angezeigt wird? Oder könnte das wie Streaming von Video im Web sein? Diesen Fragen wollte ich auf den Grund gehen und habe daher einen kleinen Test erstellt.

Ich habe ein Sprite erstellt indem oben einige Icons sind, in der Mitte ein sehr großes Foto und am Ende wieder Icons. Diese habe ich als JPG, PNG24 und PNG8 abgespeichert und in einer kleinen Testwebsite mit Firefox 4b11, Chrome 9 und Safari 6 ausprobiert.

Die Erkenntnisse:

1. Anzeigetyp hängt nicht vom Dateityp ab
2. Firefox zeigt erst alle Icons an, wenn die gesamte Grafik fertig geladen ist.
3. Chrome und Safari zeigen schon geladene Abschnitte früher an -  die oberen 2 Icons werden also früher angezeigt, obwohl die restliche Grafik noch geladen wird.

Sind wir wieder etwas klüger geworden ;)