CSS Sprites – mehr als nur „Performance freundlich“ mit dem jQuery Plugin spritely

CSS Sprites werden im „üblichen“ Webdesign dazu eingesetzt, verschiedene Bild- Sequenzen Performance- freundlich einzusetzen.

Typische Anwendung ist z.B. ein Grafik Wechsel bei „Mouse- Over“.

Eine Möglichkeit wäre dabei für jeden Status (Mouse-Out und Mouse- Over) jeweils eine Grafik- Datei zu erzeugen und den Wechsel via CSS Code zu definieren. Bei dieser Methode müssen via http- Request 2 physikalische Dateien vom Webserver geladen werden - also nicht so ideal für die Performance.

Bei der Verwendung von CSS Sprites werden beide Bild- Sequenzen in eine Datei nebeneinander oder untereinander positioniert und der Bild- Wechsel wiederum über CSS definiert (background-image).  Welcher Ausschnitt der Bildfolge angezeigt wird, wird über das CSS Attribut „background-position“ bestimmt. Bei dieser Variante wird nur eine physikalische Datei via http- Request geladen und ist somit Performance freundlich.

In dem oben genannten Beispiel ging es nur um 2 Bildfolgen. Richtig effektiv werden Sprites dann, wenn es sich um eine ganze Sequenz von Bildern – ähnlich eines Daumenkinos - handelt (z.B. ein flatternder Vogel, eine laufende Person etc.) .

Das jQuery Plugin spritely

Welche weiterführenden Möglichkeiten CSS Sprites bergen, zeigt Ihnen das jQuery Plugin spritely. Mit einfachen Konfigurationsmöglichkeiten lassen sich fantastische Animationen simulieren. Eine klasse Lösung für alle diejenigen die auf Flash verzichten möchten.

Schauen Sie sich die Plugin- Webseite unbedingt an! Dort werden die Möglichkietn eindrucksvoll präsentiert.

Weiterführende Links zum Thema CSS Sprites:

• jQuery & CSS Sprite Animation Explained In Under 5 Minutes
• CSS Sprites einfach erklärt
• CSS Sprites – Webseiten Performance 1
• CSS Sprites: What They Are, Why They’re Cool, and How To Use Them
• CSS Sprites w/out Using Background Images
• Display icons using a single image and CSS “Sprites”
• Saving Bandwidth and Improving Site Speed Using CSS Sprites