CSS-Image-Sprites

CSS-Image-Sprites können helfen die Ladezeiten einer Webseite zu reduzieren und tragen somit zu einer besseren Usability einer Homepage bei.

Was sind CSS-Image-Sprites?

Für CSS-Image-Sprites werden mehrere Bilder zu einem Bild zusammengefasst und über CSS-Formatierungen wird entscheiden, welcher Bildausschnitt des Gesamtbildes angezeigt wird. Aber wie spart das nun Bandbreite bzw. Traffic beim Laden einer Webseite? Man muss sich vorstellen, dass für jedes Element einer Webseite, also unter anderem jedes Bild, eine separate Server-Anfrage gestellt werden muss. Bei vielen Bildern kann das schnell zur merklichen Erhöhung der Ladezeit führen. Somit ist es besser, wenn nur eine Serveranfrage gestellt werden muss.

CSS-Image-Sprites erstellen und einbinden

Nehmen wir an, wir haben eine Webseite auf der verschiedene Getränke auswählbar sein sollen. Dafür haben wir beispielhaft diese vier Einzelbilder:

Dies vier Einzelbilder setzen wir mittels eines Bildbearbeitungsprogramms zu einem Gesamtbild zusammen, so dass vom Server schließlich nur dieses Gesamtbild geladen werden muss.

Nun benötigen wir noch den passenden CSS-Code, um aus dem Gesamtbild einen Ausschnitt als Einzelbild darstellen zu können:

<style>
#bier {
    width: 64px;
    height: 64px;
    background: url(drinks.png) 0 0;
}
#wein {
    width: 64px;
    height: 64px;
    background: url(drinks.png) -128px 0;
}

#longdrink{
    width: 64px;
    height: 64px;
    background: url(drinks.png) -192px 0;
}

#gin {
    width: 64px;
    height: 64px;
    background: url(drinks.png) -64px 0;
}
</style>

Es werden hier vier Bildausschnitte definiert mit der Höhe und Breite von 64 Pixeln sowie einen Hintergrundbild mit dem Namen drinks.png, welches das Gesamtbild ist. Dahinter wird die relative Position auf dem Gesamtbild angegeben. Man kann es sich auch so vorstellen, indem man sich fragt, um wie viele Pixel man das Bild nach links (oder oben) verschieben muss, damit der gewünschte Bildausschnitt sichtbar wird. So erklärt sich auch am besten, warum die Zahl negativ ist.

Nun muss man noch den passenden HTML-Code für die Anzeige des Bildes verwenden, welcher exemplarisch so aussieht:

<div><img id="bier" src=""></div>
<div><img id="wein" src=""></div>
<div><img id="longdrink" src=""></div>
<div><img id="gin" src=""></div>

Das Attribut src lässt man in diesem Fall leer. So wird nur der als Hintergrundbild definierte Bildausschnitt angezeigt. Trägt man bei src ein weiteres Bild ein, so würde dies dem Hintergrundausschnitt überlagert werden.

Fazit

Zugegebener Maßen ist die Erstellung von CSS-Image-Sprites etwas aufwendig und lohnt sich nicht in jedem Fall. Zum Beispiel wird man es nicht nutzen für eine Fotogallerie. Jedoch sollte man es in Erwägung ziehen bei vielen kleinen Bildern und Icons, wie sie zum Beispiel in Navigationsleisten benötigt werden. Oder zum Beispiel die Darstellung von Flaggen bei einer Sprachauswahl. Mit dem CSS-Sprite-Generator kann man sich aus vielen Bildern einfach ein Image-Sprite mit zugehörigen Code erstellen. Und auch das mächtige "Automatisierungssystem" Grunt kann hier mit einem entsprechenden Plugin Unterstützung leisten.

---