Neu ist die Technik nicht, es braucht sie aber auch nicht jeder. Und wer bisher nie von "CSS-Sprites" gehört hat, könnte sich die Sache ja einmal näher anschauen. Worum geht's? Sprites bedienen sich eines Tricks, um die Zahl der HTTP-Aufrufe beim Laden einer Webseite zu verringern. Mehrere Einzelgrafiken werden zu einer Tafel zusammengefasst. Via CSS wird dann nur der jeweils benötigte Teil des Bildes gezeigt, da wo er gebraucht wird.

Eingesetzt wird das vor allem auf abrufstarken Seiten. Der Surfer lädt statt vielleicht eines Dutzends kleiner Grafiken nur eine größere Datei. Diese Praxis entlastet den Server. Eingesetzt wird das zum Beispiel bei XING, Youtube, Amazon, Yahoo, AOL, Google oder auch bei der Deutsche Bahn - ein gutes Beispiel zum Studieren liefert diese kleine Website.

Sprite-Tafel bei XING (Ausschnitt)

CSS-Sprites werden dort benutzt, wo es um feste grafische Bestandteile geht. Also nicht im Content, das wäre zu viel Aufwand, sondern in der Navigation und bei sonstigen wiederkehrenden Seitenbestandteilen wie Logos, Linien, RSS-Icons und so weiter.

Einen weiteren Vorteil bieten CSS-Sprites, wenn Menüleisten mit dem so genannten Hover-Effekt ausgestattet wurden sollen. Damit der Effekt funktioniert, sind die Einzelbilder in zwei Zuständen vorhanden, je nachdem, ob die Maus das Bild berührt oder nicht. Das Problem dabei, die Zusatzbilder werden erst geladen, wenn sie gebraucht werden, sprich, die Maus auf dem Bild steht. Jeder hat solche Menüs schon gesehen, die erst verzögerungensfrei hovern, wenn die Dateien im Cache verfügbar sind. Abhelfen kann man mit Javascript. Sprites sind jedoch eleganter, da sowieso alle Bilder gleichzeitig mit einer Datei geladen werden, sind auch die Hover-Zustände sofort verfügbar.

Sprite-Tafel bei Youtube (Ausschnitt)

Und die Dateigrößen? Lädt die Tafel nicht viel länger als die Einzelbilder? Nicht unbedingt, die Tafel sollte nach allen Regeln der Kunst optimiert sein. Selbst, wenn die Datei größer wäre, spielte das kaum eine Rolle. Die oben abgebildete Tafel von XING, die im Original noch größer ist, "wiegt" lediglich 12 Kilobyte.

CSS-Sprites schränken den Bild-Klau etwas ein. Zum Einem muss man an die Tafeln erst einmal herankommen. Zum Anderen gibt es keine Einzelbilder mehr, die man mal eben speichern oder mit Drap&Drop entführen kann. Ein echter Schutz ist das selbstverständlich nicht, er macht es "Gelegenheitsdieben" aber nicht unbedingt einfach.

Vorteile:

• HTTP Abrufe werden verringert, Ladezeiten verkürzt.
• Schnellere Hover-Effekte in Menüleisten - und das ohne Javascript.
• Änderungen müssen nur noch an einer Datei vorgenommen werden.

Nachteile:

• Ältere Browser stellen ein Risiko dar. Sie zeigen unter Umständen nicht das, was gezeigt werden soll.

Artikel über CSS-Sprites (Auswahl)

CSS Sprites
Einsparung an HTTP-Requests durch Kombination von Hintergrund-Bildern (.de)

CSS Sprites: Image Slicing’s Kiss of Death
Ur-Artikel auf ALA (.en)

CSS Sprites: What They Are, Why They’re Cool, and How To Use Them
Illustriert erklärt von Chris Coyier (.en)

CSS Sprites
How Yahoo.com and AOL.com Improve Web Performance (.en)

CSS-Sprites
Die Technik, einsteigergerecht erklärt (.de)

What Are CSS Sprites?
Einführung von Jason Cranford Teague (.en)

Sprite Optimization
"Lohnt es sich?", fragt Dave Shea (.en)

Hovereffekte mit CSS-Sprites
Stefan David bei den Webkrauts (.de)

Creating easy and useful CSS Sprites
Einführung von Ignacio Ricci (.en)

Fast Rollovers Without Preload
Praxisbeispiel (.en)

CSS Sprites + Rounded corners
Ein weiteres Praxisbeispiel, hier geht es um abgerundete Ecken (.en)

CSS Image Sprites
How to Create CSS Sprites for Blog Icons, Web Site Icons (.en)

Optimize Your Web Site by Using CSS Image Sprites
Artikel in drei umfangreich bebilderten Teilen (.en)

Animated GIF For CSS Sprites
Auch animiert lassen sich die Sprites einsetzen (.en)

Image Sprite Navigation With CSS
Ein einfaches Menü mit Hover-Effekt wird erklärt (.en)

Advanced CSS Menu
Ein Tutorial der Webdesignerwall (.en)

How to use CSS Sprites (Screencast)
Wer 10 Minuten Zeit hat, kann sich dem Screencast mit Chris Spooner zuwenden (.en)

Exactly How to Use CSS Sprites (Screencast)
Noch ein Video, diesmal mit Andres Fernandez von NetTUTS (.en)

CSS-Sprites total (Podcast)
Sascha Postner und Daniel Jagszent erklären die Sache im Postcast bei Technikwürze. (.de)

CSS-Sprite Generatoren

Projekt Fondue CSS Sprite Generator
Arbeitet unter anderem auch in deutscher Sprache. Dieser Generator ist der bekannteste.

Chris Brainards Sprite Creator 1.0

SmartSprite 0.3.3
PHP-Version

CSS Sprite Generator
Drupal Modul

CSS Sprites Generator
Online-Version - alpha

SmartSprites
Java-Version (tm)

Verwandte Artikel

• Trickkiste - Farbwechsel bei Texteingabe (0)
• Spaß mit Listen - Teil 2 (0)
• Mouseover mit CSS - Teil II (0)
• Hovercraft (0)
• Grafisches MouseOver mit CSS (1)
• Die Pseudoklasse :focus (0)
• Das perfekte Menü: Image Rollover ohne JavaScript (0) €