Mit CSS Sprites Bandbreite sparen und Ladezeiten verkürzen
Als Websitebesitzer, die möglicherweise am schlimmsten Erfahrung für Ihre Besucher fängt mit einer frustrierenden Wartezeit an, während die Sanduhr sich dreht und die Seite langsam geladen wird. Viele Ihrer Besucher (und daher potentiellen Kunden) werden dann gleich abspringen d.h. die Seite sofort verlassen z.B. in dem sie den Zurück-Knopf verwenden.
Die Website-Geschwindigkeit wird auch schon in Googles Algorithmen berücksichtigt und wird weiter in der Zukunft eine Rolle spielen.
Wenn Ihre Website also benutzerfreundlich und bei den Suchmaschinen gut positioniert sein soll, dann werden Sie nach Möglichkeiten suchen, um die Ladezeiten Ihrer Webseite zu verbessern. Es gibt Vielzahl von Möglichkeiten eine Webseite schneller zu machen. Einer der einfachsten Techniken, um Webseiten zu beschleunigen, ist die Verwendung von CSS Bild-Sprites.
Diese Technik wird sowohl von Yahoo! als auch von Google empfohlen.
Wenn eine Webseite viele Bilder enthält, kann es dazu führen, dass die Seite eine lange Zeit zum Laden braucht und dabei mehrere Server-Abfragen erzeugt. Mit Bild-Sprites verringert sich die Anzahl der Server-Abfragen und Bandbreite wird gespart.
Wenn man zum Beispiel diese 4 Icons anzeigen will, damit die Besucher per Email, Facebook, Twitter oder Reddit die Seite sharen können:
Der Code würde so aussehen:
Um diese 4 Icons anzuzeigen, werden 4 Anfragen zum Server geschickt, um die einzelne Bilder zu laden. Es wäre effizienter alle Bilder mit einer Anfrage zu laden. Dafür muss man zuerst ein Bild erzeugen, das diese 4 Bilder enthält.
Unter Linux lässt es sich ganz einfach mit imagemagick aus der Kommandozeile machen:
cd mein_upload_verzeichnis convert mail_app.png facebook.png twitter.png reddit.png -append social-sprite.png
Das Ergebnis sieht so aus:
ImageMagik kann auch unter Mac OS X installiert werden:
- Mit MacPorts:
$ sudo port install ImageMagick
- Mit Homebrew:
$ brew install ImageMagick
- Ein Installer für Mac OS X gibt es auch bei Cactuslab
Eine Windows-Version gibt es ebenfalls hier.
Es gibt auch viele Online Sprite-Generatoren.
Jetzt gibt es nur noch ein Bild. Man muss nur die verschiedene Teile des Bildes mit CSS ansprechen:
Der Code dafür sieht so aus:
<div id="button-bar">
<div id="button-mail"></div>
<div id="button-facebook"></div>
<div id="button-twitter"></div>
<div id="button-reddit"></div>
</div>
<style type="text/css">
<!--
#button-bar {
width:140px;
}
#button-bar div {
display:inline-block;
}
#button-mail {
width:32px;
height:32px;
background:url(/wp-content/uploads/2012/12/social-sprite.png) 0 0;
}
#button-facebook {
width:32px;
height:32px;
background:url(/wp-content/uploads/2012/12/social-sprite.png) 0 -32px;
}
#button-twitter {
width:32px;
height:32px;
background:url(/wp-content/uploads/2012/12/social-sprite.png) 0 -64px;
}
#button-reddit {
width:32px;
height:32px;
background:url(/wp-content/uploads/2012/12/social-sprite.png) 0 -96px;
}
-->
</style>
Es wird also immer die selbe Datei referenziert und die CSS background-position -Eigenschaft wird dann verwendet um dem Browser mitzuteilen, wo das Bild im enthaltenden Elements zu positionieren ist.
Die Koordinaten sind also negative Zahlen, weil es nicht definiert wird, wo man auf dem Bild sich positioniert, vor man 32 x 32 Pixel lies, sondern es wird definiert, dass das Bild erst nach oben 32, 64 bzw. 96 Pixel rutschen soll, vor man auf Position (0, 0) 32 Pixel liest.
Es ist natürlich mehr Arbeit, die Bilder so zu definieren aber es lohnt sich, besonders wenn man viele Icons verwendet.
In diesem Beispiel hatten wir ohne Sprites: 4 HTTP-Aufrufe / 14 KB an Bilder geladen.
Mit Sprites: 1 HTTP-Aufruf (also -75%) / 8 KB geladen (also -42%).
Natürlich kann man auch meinen, dass es keine besonders elegante Lösung das Hintergrund-Bild von einem div Element zu verwenden (nach dem Motto: Ein Bild sollte als ein img Element kodiert werden). Es kommt auch dazu, dass die Verwendung von Hintergrundbilder oft schlecht für Accessability sind. Zum Glück kann man es auch mit einem img Tag tun:
<div class="button">
<img id="button-mail" src="/wp-content/uploads/2012/12/social-sprite.png"></img>
</div>
<div class="button">
<img id="button-facebook" src="/wp-content/uploads/2012/12/social-sprite.png"></img>
</div>
<div class="button">
<img id="button-twitter" src="/wp-content/uploads/2012/12/social-sprite.png"></img>
</div>
<div class="button">
<img id="button-reddit" src="/wp-content/uploads/2012/12/social-sprite.png"></img>
</div>
<style type="text/css">
<!--
.button {
width: 32px;
position: relative;
height: 32px;
overflow: hidden;
display: inline-block;
}
.button img {
position: absolute;
width: 32px;
height: 128px
}
#button-mail {
top: 0px;
left: 0;
}
#button-facebook {
top: -32px;
left: 0;
}
#button-twitter {
top: -64px;
left: 0;
}
#button-reddit {
top: -96px;
left: 0;
}
-->
</style>
CSS Sprites sollte nur für dekorative Elemente verwendet werden. Aus diesem Grund sollte man img Tags für Elemente, die spezifisch für eine Seite sind verwenden und Sprites für dekorative Elemente, die nicht kontextuell relevant verwenden. Es macht Sinn ein CSS-Sprite mit Bild als Hintergrund für einen Knopf im Navigationssystem zu haben (weil es auch redundant zur Bildinformation auch Textinhalt gibt).
Man sollte auch beachten, dass die Performance-Verbesserung mit Sprites nicht mehr so beeindruckend ist, wenn man bedenkt, dass Browsern die Bilder im Cache zwischenspeichern und sie nicht jedes Mal geladen werden müssen. Es ist natürlich nur für wiederkehrende Besucher der Fall.
Ein Problem bei der Verwendung von CSS-Sprites ist die Speichernutzung. Ein komprimiertes Bild, das 20 Kilobyte groß ist, kann schnell über 50 MB Gross werden. Wenn man große Sprites mit vielen Bilder verwendet, kann es ein Problem werden.
1. Januar 2013