CSS Sprites

Aus VMS1 Tutorial

Wechseln zu: Navigation, Suche

CSS Sprites fassen mehrere Grafiken in Einer zusammen, um HTTP Requests einzusparen und somit die Bandbreite der Besucher einer Webseite besser auszunutzen. Unter Umständen kann dabei auch Traffic gespart werden.

Anwendungsmöglichkeiten

Am einfachsten lässt sich diese Technik anwenden, wenn 2 oder mehr entweder in Höhe oder Breite gleich grossen Grafiken verwendet werden im CSS, die nicht wiederholt werden, also:

background-repeat: no-repeat;

Dies ist oft der Fall bei Grafiken für Hover Effekte, für abgerundete Ecken oder für Kopf- und Fußzeilen eines Elements. Aber auch bei Grafiken unterschiedlicher Größe oder auch bei sich in nur einer Richtung wiederholender Grafiken ist die Anwendung von CSS Sprites möglich.

Beispiel

In einem Menü soll vor jedem Link ein runder Punkt sein, der beim "Drüberfahren" mit der Maus (Hover) die Farbe wechselt (siehe: http://www.vms-tutorial.de/vms/).

Das kann man mit 2 Grafiken je 8x8 Pixel machen:

Originalgröße Vergrößert CSS Code Größe (Byte)
Original vergößert
.nbg ul li a{
background-image: url(../images/list_dot.png);
background-repeat: no-repeat;
background-position: 2px 5px;
237
Original vergößert
.nbg ul li a:hover {
background-image: url(../images/list_dot_hover.png);
246

Diese Lösung "kostet" also 2 Anfragen vom Besucher (Browser) an den Server und verursacht dabei 483 Bytes Traffic an Nutzdaten, dazu kommt noch der "Overhead" durch die HTTP Headerinformationen.

Man könnte aber auch beide Bilder in 1 Bild untereinander setzen, also mit 8x20px Größe, da man noch 4 Pixel Abstand lassen muss wegen der Verschiebung:

Originalgröße Vergrößert CSS Code Größe (Byte)
Original vergößert
.nbg ul li a{
background-image: url(../images/list_dot_sprite.png);
background-repeat: no-repeat;
background-position: 2px 5px;
}
.nbg ul li a:hover {
background-image: url(../images/list_dot_sprite.png);
background-position: 2px -7px;
375

Sobald das Hover Event eintritt, wird die Hintergrundgrafik durch Angabe von background-position im Vergleich zur "normalen" Position um 12 Pixel nach oben verschoben (5-12=-7).

Der Effekt für den Besucher bleibt genau der gleiche, aber nun ist nur noch eine Anfrage nötig, da nur eine Grafik verwendet wird, und die zusammengefasste Grafik ist sogar kleiner als die anderen Beiden zusammen, um 108 Byte.


Links zum Thema

Auf http://www.websiteoptimization.com/services/analyze/ kann man Webeiten analysieren lassen und bekommt Statistiken zum Trafficverbrauch und den HTTP Request sowie Tipps zur Optimierung.

Einen sehr ausführlichen Artikel auf Englisch mit umfangreichen Beispielen findet man unter: http://www.alistapart.com/articles/sprites/

Aus mehreren Einzelbildern kann man sich auch automatisch Sprites generieren lassen, bspw. auf: http://de.spritegen.website-performance.org/

Persönliche Werkzeuge