• Home
  • Bilder
  • Sprites zum Speichern von Icons verwenden

Sprites zum Speichern von Icons verwenden

Problem

Um das Laden Ihrer Seiten zu beschleunigen, sollen alle Icons als sogenannte Sprites in der gleichen Grafikdatei gespeichert werden.

Lösung

CSS Bilder - Sprites zum Speichern von Icons verwenden

Nach der Erstellung der Icons werden diese nicht in separaten Dateien gespeichert. Stattdessen ordnen Sie sie in einer gemeinsamen Bilddatei über- oder nebeneinander an (siehe Abbildung). Diese Datei wird als Hintergrundbild für das gewünschte Element eingebunden. Durch die Verwendung der Eigenschaft background-position können Sie steuern, welches Symbol angezeigt wird.

Info

Sorgen Sie dafür, dass die Symbole immer gleich groß sind und den gleichen Abstand zueinander haben (siehe Abbildung), ansonsten wird die Positionsangabe im Stylesheet schnell zu einem ungewollten Ratespiel.

Danach markieren Sie die gewünschten Elemente mit einem gemeinsamen class-Attribut sowie einem eigenen id-Attribut, wie hier gezeigt:

<h2 class="icon" id="warnung">Warnungen</h2>

Hierdurch können wir den linken Innenabstand und die Quelldatei für die Sprites für alle Überschriften gemeinsam definieren. Danach brauchen Sie nur noch die Positionen des jeweiligen Icons für die einzelnen Überschriften anzugeben (siehe Abbildung ):

h2.icon {
padding-left: 24px;
background-image: url("bilder/sprites.gif");
background-repeat: no-repeat;
}

h2#warnung {
background-position: -18px -12px;
}
h2#fragen {
background-position: -18px -48px;
}
h2#kommentar {
background-position: -18px -84px;
}
h2#dokument {
background-position: -18px -120px;
}
h2#druck {
background-position: -18px -154px;
}
h2#suche {
background-position: -18px -192px;
}

Da die Icons in der Grafikdatei untereinander stehen, müssen wir hier die vertikale Position mit negativen Werten angeben.

Diskussion

CSS Bilder - Sprites zum Speichern von Icons verwenden

Einige Entwickler verwenden das gleiche Bild in einer Website immer wieder. Auf diese Weise machen sie sich das lokale Zwischenspeichern der Datei durch den Browser (Caching) zunutze. Der Einsatz von Sprites treibt dieses Konzept noch ein wenig weiter. Durch das Speichern mehrerer Einzelbilder in einer gemeinsamen Datei können Webentwickler die Anfragen an den Webserver gering halten. Diese Lösung eignet sich besonders für Websites mit mittlerem bis hohem Traffic.

Typische Beispiele sind hier die "Platzhirsche" Google und Amazon. Beide Websites (und viele mehr) setzen Sprites ein, um die Ladegeschwindigkeit ihrer Seiten zu erhöhen.