Einleitung

Dieser Artikel richtet sich an Webmaster, deren Website-Layout(s) mehrere Grafiken beinhalten, die optimiert eingebunden werden sollen, wodurch sich die Ladezeit reduziert.

Seit einiger Zeit wird die CSS-Sprites-Technik immer bekannter und auch durch größere Unternehmen, wie yahoo, angewendet und vorangetrieben.
Doch welche Vorteile bringt die Verwendung, wie benutze ich CSS-Sprites auf meiner Seite und welche Probleme können auftreten?
All das versuche ich euch in diesem Artikel näher zu bringen.

Was sind CSS-Sprites / Image-Sprites?

Mehrere kleine Grafiken zu einem großem Image-Sprite kombiniert.
Um nun die gewünschte Grafik anzuzeigen, wird, mittels CSS-Befehlen, nur dieser Bereich im Image-Sprite angezeigt.

Wozu?

Kurz und knapp: Ladezeitoptimierung.
Trotz der immer weiter sinkenden Anzahl an ISDN/Modem-Benutzern, sollte der moderne Webmaster einen Blick auf diese Technik werfen.

Hintergrund

Umsetzung eines Homepageentwurfs des Grafikers:
Man beginnt (zumindest geh ich nach diesem Prinzip vor) sich im Kopf oder auf Papier eine Grundstrukur aufzubauen, deren HTML-Code möglichst schlank und die endgültige Darstellung skalierbar ist.
Nach dieser Strukur wird das Design in Einzelteile zerlegt und der HTML- und CSS-Code geschrieben.

Warum nun also CSS-Sprites?

• Ladezeit bei Modem/ISDN-Nutzern verkürzen.
• Anzahl der HTTP-Requests verringern.

Was bitte? HTTP-Requests?

HTTP (Hypertext Transfer Protocol) ist ein zustandsloses Protokoll, das die Verbindung zwischen dem Server und dem Client regelt und über das z.B. Bilder, HTML-, CSS-und Javascript-Dateien geladen werden.

Es muss also für jedes noch so kleine Bild und jede Datei eine neue HTTP-Verbindung aufgebaut werden.

Anwendung

Der CSS-Code könnte also zum jetzigen Zeitpunkt folgendermaßen aussehen:

div#meinBildDiv1 {
    width:10px;height:10px;
    background:url(bild1.gif) no-repeat;
}

div#meinBildDiv2 {
    width:20px;height:20px;
    background:url(bild2.gif) no-repeat;
}

div#meinBildDiv3 {
    width:30px;height:30px;
    background:url(bild10.gif) no-repeat;
}

Bild1.gif:

Bild2.gif:
Bild3.gif

Das Problem dabei ist, dass nur eine bestimmte Anzahl an parallelen Requests vom Browser zugelassen werden (Firefox 2: Standardmäßig 2; siehe about:config – network.http.max-persistent-connections-per-server).
Demzufolge werden die vom HTML-Dokument eingebundenen Dateien nacheinander vom Server geladen.
Die logische Konsequenz ist die verlängerte Ladezeit.

Und an diesem Punkt kommen die CSS-Sprites zum tragen.

Anstatt nun, wie im Beispiel-Code, drei Bilder zu laden, von denen jedes einen HTTP-Request verursacht, werden sie zusammen in einem großen Image-Sprite gespeichert (Beispiel-Sprite von yahoo.com).

Nun ändert sich unser CSS-Code folgendermaßen:

div#meinBildDiv1,
div#meinBildDiv2,
div#meinBildDiv3 {
    background:url(sprite.gif) no-repeat;
}

div#meinBildDiv1 {
    width:10px;height:10px;
    background-position:0px 0px;
}
div#meinBildDiv2 {
    width:20px;height:20px;
    background-position:0px -20px;
}
div#meinBildDiv3 {
    width:30px;height:30px;
    background-position:0px -50px;
}

Sprite.gif:

Was passiert hier?

Im ersten Schritt weisen wir allen drei DIV-Boxen unser erstelltes sprite.gif als Hintergrundbild zu.
Aufgrund der unterschiedlichen Bildgrößen der einzelnen Boxen, müssen diese individuell angegeben werden.
Soweit nichts neues…

Nun zum Befehl background-position.

Ich werde die Funktionsweise von background-position: 0px -20px; beim zweiten DIV anhand eines Overhead-Projektors und 2 transparenten Folien erklären.
Auf der unteren Folie könnt ihr euch das sprite.gif vorstellen, das die drei vorher benutzten Bilder beinhaltet.
Die zweite, obere, Folie hat ein dünnen Rahmen um ein Quadrat der Größe 20px*20px und liegt standardmäßig in der oberen linken Ecke.
Anstatt des 20px*20px großen Bereichs oben links der unteren Folie, möchten wir einen Bereich weiter unten einblenden.
Wir müssen also die obere Folie verschieben.
Wird sie nach oben bzw. nach rechts verschoben, sind die background-position-Werte positiv.

Jedoch möchten wir unsere Folie nach unten verschieben, da das DIV2-Bild von der oberen Kante aus um 20px nach unten verschoben ist. Eine horizontale Verschiebung ist in unserem Fall nicht gegeben.
Demzufolge ergibt sich eine Verschiebung von 0px in der Horizontalen und -20px in der Vertikalen.
Diese Werte werden in der Reihenfolge background-position: Horizontal Vertikal;

background-position:0px -20px;

Nun haben wir also unser Quadrat auf der oberen Folie um 20px nach unten verschoben.

Bei den zwei weiteren DIV-Boxen verwenden wir auf der oberen Folie ein kleineres bzw. größeres Quadrat, ansonsten verändert sich nichts.

Was es zu beachten gibt

Der Browser Opera (bis 9.0) unterstützt beim Befehl background-position nur Werte bis zu (-)2042px.
Alle Werte kleiner -2042px, bzw. größer 2042px werden nicht angenommen und stattdessen wird auf diesen Wert auf- bzw. abgerundet.

Abschließende Worte

Ich hoffe euch hat mein Artikel geholfen und bitte um Nachsicht, da es ist mein erster Blogartikel ist.
Bei entsprechender Resonanz, oder Langeweile meinerseits, werde ich auf die Anwendung von transparenten PNG-Grafiken und den entstehenden Problemen eingehen.

Weiterführende Links

• http://spritegen.website-performance.org/