CSS Sprites: Mehr als nur link-hover Effekte

// 10072008 / Webdesign / Noch keine Kommentare

Was sind CSS Sprites?

Mit CSS Sprites wird man als Webentwicklerin im wahrsten Sinne des Wortes zum echten Pixelschubser. Das zu Grunde liegende Prinzip ist einfach: Der CSS-Background-Style für z.B. einen Absenden-Knopf enthält ein zusammengesetztes Bild, welches jeweils das Einzelbild für den normalen Zustand und für den hover-Zustand enthält. Beim hovern wird dann über background-position das sichtbare Stück Bild einfach um ein paar Pixel verschoben und  - ohne dass das ein neues Bild vom Server angefordert und geladen werden musste - wird das hover-Bild direkt dargestellt.

Beispielbild: Verschiedene Einzelbilder für normal, hover und active State eines Buttons in einem Bild kombiniert

Mit CSS Sprites komplette Webseiten beschleunigen

CSS Sprites erweitern oben genanntes Konzept, indem nicht nur zwei oder drei Einzelbilder in einem Bild kombiniert werden, sondern "unbegrenzt" viele.  Man kann auch sagen, dass die oben genannte Technik ein ganz simples CSS Sprite darstellt, d.h. viele von Euch arbeiten wahrscheinlich schon mit "CSS Sprites" ohne es bisher gewusst zu haben.

Kürzere Ladezeiten und Image-Preloading

Der Hauptvorteil ist zum einen eine kürzere Ladezeit, da die Anzahl der Server-Anfragen drastisch reduziert werden kann, denn diese Anfragen kosten nunmal einfach Zeit. Anstatt z.B. zwanzig Mal ein kleines Bild zu laden, wird einmal ein großes Bild geladen, dass alle kleinen Bilder enthält, und das spart definitiv Zeit. Zum anderen sind alle benötigten Bilder - auch die noch nicht sichtbaren - schon geladen und werden nicht erst vom Server angefordert, wenn sie gebraucht werden (sogenanntes Image-Preloading), was für hover-Effekte eben sehr vorteilhaft ist. (Man kann das natürlich auch mit Javascript realisieren, aber ich persönlich vermeide Javascript natürlich, wenn ich den gleichen Effekt mit CSS erzielen kann, da nicht extra ein Skript geladen werden muss.)

Warum ich nun auf dieses Thema gekommen bin, ist die Website des Real Players, wo die Basiselemente als ein einziges großes Bild hinterlegt werden. Für jeden, der sich dafür interessiert, lohnt es sich wirklich, das CSS dieser Website zu studieren.

Der Artikel CSS Sprites: What They Are, Why They’re Cool, and How To Use Them beschreibt nochmal ganz gut, was es mit den CSS Sprites auf sich hat, welche CSS Techniken relevant sind und was die Ladezeiten damit zu tun haben. Lesenswert!

CSS Sprite erstellen

Wie erstellt man nun das zusammengesetzte Bild aus allen Einzelbildern mit den entsprechenden CSS Background-Positionen?

Lösung 1: selber machen

Lösung 2: Einen CSS Sprite Generator benutzen

Viel Spaß beim Basteln!

Read other interesting articles:

Be Sociable, Share!
Cartoon 'Kommentararmut' von iqatrophie.wordpress.comBild von IQ-Athrophie

Kommentieren




  • www.goneo.de