template

Index :: CSS :: Icons aus Spritesheets

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:
<button onclick='doEdit()'><img src='img/i16Edit.gif'> Bearbeiten</button>
Resultat:


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:
Die Anzeige eines Icons erfolgt unter Zuhilfenahme eines DIVs und dessen background-Eigenschaft. Wir verwenden hierzu zwei Klassen:
Der entsprechende Abschnitt in CSS:
//==== Allgemein Klasse für 16×16 Icon-DIVs
.i16 {
  width:16px; height:16px;
  background-image:url(img/ss16Demo.gif);
  display:inline-block;
  margin:0; padding:0; border:0; 
}
//==== Positionierung des Spritesheets
// Zeile 1
.iFldr {background-position:  0px   0px;}
.iHome {background-position:-16px   0px;}
.iDel  {background-position:-32px   0px;}
.iOk   {background-position:-48px   0px;}
// Zeile 2
.iPeop {background-position:  0px -16px;}
.iTel  {background-position:-16px -16px;}
.iPlan {background-position:-32px -16px;}
.iEye  {background-position:-48px -16px;}
// Zeile 3
.iInfo {background-position:  0px -32px;}
.iMail {background-position:-16px -32px;}
.iNew  {background-position:-32px -32px;}
.iWarn {background-position:-48px -32px;}
Um nun beispielsweise das Telefon-Icon anzuzeigen, verwenden wir statt des üblichen IMG-Elements einen passenden DIV:
<div class='i16 iTel'></div>
Resultat:



Beispiel für einen Button mit OK-Symbol:
<button onclick='doSave()'><div class='i16 iOk'></div> &Uuml;bernehmen</button>
Resultat:


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.

Index :: CSS


template