Bei der Gestaltung einer Website kommen neben den „großen“ Elementen wie Bildern, Texten, Videos usw. häufig eine Vielzahl von kleinen grafischen Zierelementen (Pfeile, Dreiecke, Kreise, kleine Briefumschläge etc.) zum Einsatz. Werden diese Grafiken als einzelne Bilder vom Server geladen, bedeutet das einen sehr hohen Aufwand (wenn man nicht SPDY verwendet). Eine Alternative hierzu ist die Bündelung dieser Elemente als so genanntes Sprite.
Sprites fassen mehrere Bilder in einer Bilddatei zusammen. Theoretisch kann man alle Bilder einer Webseite in einem großen Sprite abspeichern, es lohnt sich aber vor allem bei kleinen, statischen Grafiken. Die Elemente in einem Sprite können in CSS referenziert werden wie jedes andere Element auch.
Vorteile
Im Gegensatz zu Einzelgrafiken, bei denen für jedes Bild ein eigener Request gesendet wird, wird bei Verwendung eines Sprites nur die eine Bilddatei angefragt. Die reine Datenmenge ist in beiden Fällen nicht sehr unterschiedlich, es geht vor allem um die Verbindungen zum Server, die auf- und wieder abgebaut werden müssen.
Ein weiterer Vorteil von Sprites ergibt sich in Verbindung mit Pseudoklassen wie :hover oder :active. Bevor Sprites zum Einsatz kamen, wurden Bilder beim Überfahren mit der Maus mittels Javascript ausgetauscht. Hier entstanden oft kleine Verzögerungen, die ein unschönes Flackern zur Folge hatten, wenn das neue Bild nachgeladen wurde. Beim Einsatz von Sprites wird statt dessen der Ausschnitt auf dem Sammelbild verschoben. Da das Sprite immer vollständig geladen ist, tritt hier keine Verzögerung und damit kein Flackern mehr auf.
Ein Beispiel
Was kompliziert klingt ist eigentlich ganz einfach:
In der CSS Datei wird das Sprite mittels background-image: url(…); eingebunden. Der Ausschnitt des Sprites, der angezeigt werden soll, wird gewählt, indem das Sprite an die richtige Position verschoben wird. Dazu muss man natürlich die genauen Positionen der einzelnen Bilder kennen. Unser Beispiel besteht aus einem quadratischen <div> Element mit 60x60px. Im Sprite sind zwei Buttons mit verschiedenen Farben, beide auch quadratisch mit 60x60px, untereinander mit 1px Abstand.
HTML:
<div id="button"></div>
CSS:
#button {
background-image: url(sprites.png);
background-position: 0 0;
width: 60px;
height: 60px;
}
#button:hover {
background-position: 0 -61px;
}
Beim Hover (wenn die Maus über dem Button ist) wird das Sprite um 61px nach oben verschoben. Somit ist nun der zweite Button im sichtbaren Bereich des <div> Elements.
Will man ein Image an anderer Stelle positionieren muss natürlich wieder auf das Sprite referenziert werden. Hier wird dann direkt der zweite Button angezeigt.
#andererButton {
background-image: url(sprites.png);
background-position: 0 -61px;
width: 60px;
height: 60px;
}
Sprites erstellt man am besten nachdem die Webseite fertiggestellt ist. Bis alles steht kann man noch mit einzelnen Images arbeiten. Dadurch vermeidet man unnötiges Umschreiben der Positionen im CSS falls sich doch noch ein Element verändert.
Man sollte definitiv darauf achten die Sprites sinnvoll zu gruppieren. Es kann sehr unübersichtlich werden, wenn man die Images einfach irgendwo im Sprite positioniert. Auf der anderen Seite helfen die unten aufgeführten Werkzeuge beim Erstellen von Sprites und dem dazu gehörigen CSS.
Bei der Optimierung der Webseite für Mobilgeräte sollte man sich vor Augen halten, dass gerade auf Smartphones oft gar nicht alle Bilder der Desktop Version zu sehen sind. Es wäre also unsinnig ein riesiges Sprite mit allen Inhalten zu laden. Um Bandbreite zu sparen sollten statt dessen noch andere Sprites angelegt werden, die nur die passenden Images enthalten. Über CSS3 Media Queries werden dann die zur Bildschirmgröße passenden Sprites eingebunden.
Sprites generieren
Es gibt mittlerweile eine recht große Auswahl an Webdiensten, die dabei helfen Sprites zu erstellen.
SpritePad unterstützt Drag&Drop und generiert passendes CSS. Man kann das Ergebnis als Zip-Archiv herunterladen.
SpriteGen hat eine große Auswahl an Optionen. Bilder werden als Zip-Archiv hochgeladen. Es wird zwar auch CSS generiert aber nicht mit zum Download angeboten.
CSSSprites hat wenige Optionen. Bilder werden einzeln hochgeladen und CSS gibt es auch hier nur zum Kopieren und nicht zum Download.
ZeroSprites kann bis zu 500 Dateien abarbeiten. Als Optionen gibt es nur padding, png8 und automatische Optimierung. Als Ausgabe der einzelnen Positionen hat man dafür aber CSS, eine Tab separierte Liste und ein Summary.
