Bild: © Grey59 / Pixelio
Jedes Element, das auf einer Webseite geladen wird, erzeugt eine Anfrage an den Server, die den Seitenaufbau verlangsamt. Bei Webseiten mit vielen einzelnen Elementen wie zahlreichen JavaScript Dateien, verschiedene Frameworks und CCS Dateien sowie diversen Bildern kann der Seitenaufbau, je nach Antwortzeit des Servers, (zu) lange dauern. Deshalb bietet es sich an, so viele Dateien wie möglich zusammenzufassen.
Für CSS und JavaScript lassen sich Dateien relativ einfach zusammenfügen. Zahlreiche Tools erleichtern einem dabei die Arbeit und können die erzeugten Dateien außerdem noch komprimieren (z. B. Kommentare und Leerzeichen in den ausgelieferten Dateien entfernen), um Traffic zu sparen und an Geschwindigkeit beim Seitenaufbau zu gewinnen.
Neben der Optimierung / Komprimierung von einzelnen Bildern ist es aber auch möglich, viele Bilder in einer Datei, dem sogenannten Sprite, zusammenzufassen und trotzdem an verschiedenen Stellen auf der Webseite anzeigen zu lassen. Dadurch muss die Bilddatei nur 1x geladen werden. Neben der Einsparung vieler einzelner Serveranfragen sollte auch die Dateigröße des Sprites kleiner als alle Bilder einzeln ausfallen, da Farbinformationen nur 1x für alle Bilder gespeichert werden müssen.
Sprites werden meist im .png Format gespeichert, da um die einzelnen Grafiken herum transparente Zwischenräume benötigt werden. Die Nutzung von Sprites bietet sich daher besonders für Social Buttons, Navigationselemente oder viele kleine Grafiken wie Smileys oder ähnlichem an, da diese am besten für das .png Format geeignet sind und für SEO Zwecke uninteressant sind.
Aus Sicht der Suchmaschinenoptimierung macht es keinen Sinn auch normale Bilder zusammenzufassen. Hier ist es besser weiter mit einzelenen Bilddatein auf ein Ranking in den Universal Search Suchergebnissen hin zu arbeiten. Außerdem ist das .jpg Format besser für Bilder geeignet.
Wie funktionieren CSS Sprites für Bilder und Grafiken?
Eure .gif oder .png Bilder wie Buttons, Smileys, kleine Grafiken ect. werden nebeneinander oder untereinander auf einem Transpartenten Hintergrund angeordnet und in einer Datei zusammengefasst und gespeichert.
Per CSS wird das erzeugte Sprite als Hintergrundgrafik auf eurer Webseite eingebunden. Dank Browser Caching ist die Datei nun für alle Unterseiten eurer Domain verfügbar. Damit das richtige Bild an der richtigen Stelle gezeigt wird, muss das Sprite aber noch über ein <div>-Element aufgerufen und richtig positioniert werden. Für jede einzelne Grafik, die sich in eurem Sprite versteckt wird in der CSS Datei eine Klasse definiert. Diese gibt die ursprüngliche Größe eures Elementes an, lädt dann das Sprite Bild als Hintergrundgrafik und verschiebt das Bild an die richtige Stelle, so dass das passende Bild gezeigt wird.
Damit man sich nicht selbst die Arbeit machen muss die Bilder zusammen zu basteln und die CSS Klassen mit den richtigen Positionen und Maßen der Bilder im Sprite in die CSS Datei zu übertragen gibt es diverse Sprite-Generatoren. Ich nutze z. B. diesen CSS Sprite-Generator. Einfach eure Bilddateien hochladen, Name der CSS Klasse vergeben und die generierten Code-Snippets per Copy & Paste in euren Quellcode einfügen.
