Icons sind dank ihre kompakten Ausmaße nicht nur platzsparend, sondern aufgrund der bildhaften Symbolwirkung auch sprachübergreifend. Sie können unmittelbar und intuitiv verstanden werden und eignen sich somit hervorragend zur Unterstützung von Benutzeroberflächen; typischerweise in Verbindung mit Navigationselementen wie Menüs, Toolbars oder Buttons.
Projektintern besitzen Icons meist eine einheitliche Form (quadratisch) und Größe - üblicherweise 16×16 px, wodurch sie auf Schaltflächen auch problemlos mit Text kombiniert werden können:
Bei der Entwicklung umfangreicherer Applikationen kann die Anzahl benötigter Icons allerdings schnell anwachsen und die Ladezeit einer Seite merklich erhöhen. Entscheidend ist hierbei nicht die Dateigröße der Grafiken sondern ihre Menge: für jedes Icon muss der Server eine HTTP-Anfrage beantworten, so dass es mitunter mehrere Sekunden dauern kann, bis alle Icons in der Seite angezeigt werden können.
Wir dürfen nicht vergessen, dass Browser nur eine begrenzte Anzahl paralleler Downloads durchführen (i.d.R. etwa vier). Da pro Seite von vornherein schon eine ganze Reihe von Dateien/Ressourcen neben der eigentlichen HTML-Datei geladen werden müssen, z.B. Stylesheets, Javascript-Module, große Grafiken, Fonts, etc., sollte man darauf achten, die Gesamtanzahl solcher Transferaktionen möglichst gering zu halten. Jede Sekunde, die der Benutzer auf den Seitenaufbau wartet, wirkt sich negativ auf die User Experience aus.
Als Lösung für dieses Problem haben sich Spritesheets durchgesetzt. Dies sind quasi Grafikcontainer im GIF- oder PNG-Format, in denen alle Icons (und oftmals auch andere kleine und mittelgroße Images) enthalten sind.
Spritesheets, wie z.B. dieses Exemplar (ss16Demo.gif), ...
... haben gegenüber Einzeldateien zwei entscheidende Vorteile:
Es ist nur eine einzige Serveranfrage notwendig.
Das Transfervolumen (hier: 995 Byte) ist signifikant kleiner als die Summe der 12 Einzeldateien (gesamt: 1698 Byte), weil Header und Palette lediglich ein einziges mal übertragen werden.
Die Anzeige eines Icons erfolgt unter Zuhilfenahme eines DIVs und dessen background-Eigenschaft. Wir verwenden hierzu zwei Klassen:
In .i16 werden die Größe (16×16 Pixel) und - als Hintergrundbild - das Stylesheet festgelegt.
Ausserdem setzen wir die display-Eigenschaft auf inline-block, damit sich der DIV genau wie ein IMG verhält, nämlich als Fließtext-Element.
In einer zweiten, individuellen Klasse wird pro Icon-Typ der Offset des Hintergrundes definiert - damit innerhalb des DIVs der gewünschte Ausschnitt des Stylesheets zur Anzeige kommt.
Solange sich ein Web-Projekt noch in der Entwicklungsphase befindet, ist der Einsatz von Einzelbildern (und somit IMG-Tags) wahrscheinlich vorteilhafter, besonders dann, wenn im Zuge des Design-Prozesses immer wieder einmal individuelle Icons neu erstellt oder geändert werden müssen. Die Zusammenfassung in ein zentrales Spritesheet - inklusive der Anpassungen im HMTL-Code - erfolgt dann ganz zuletzt, bevor das erste offizielle Release an den Start geht.
Als Alternative zur manuellen Erzeugung, die manchem zu aufwendig erscheint, stehen im Web eine Reihe von kostenlosen Spritesheet-Generatoren zur Auswahl, bei denen man online seine Spritesheets zusammenbasteln kann. Dabei wird i.d.R. auch gleich der entspechende CSS-Code generiert.