Websites beschleunigen mit CSS Sprites

CSS Sprites haben sich schon lange als paraktikable Technologie erwiesen um noch etwas mehr Performance aus einer Website zu kitzeln.

CSS Sprites ist keine neue Idee. Und natürlich sind CSS Sprites nicht immer nützlich oder nötig. Es gibt aber einige Situationen bei den sie erhebliche Vorteile und Verbesserungen bringen, vor allem wenn es um das Laden von Dateien vom Server geht. Wenn du bis jetzt noch nie etwas von CSS Sprites gehört hast, ist dies nun der ideale Zeitpunkt um zu lernen, wie sie funktionieren und wie man sie erstellen kann.

Was sind CSS Sprites?

Ein Sprite (engl. für ein Geistwesen, Kobold u. a.) ist ursprünglich ein Grafikobjekt, das von der Grafikhardware über das Hintergrundbild bzw. den restlichen Inhalt der Bildschirmanzeige eingeblendet wird. Durch das Videospiele immer komplexer wurden, mussten gewisse Techniken benutzt werden um den Spielablauf flüssig zu halten. Eine von diesen Entwicklungen war das benutzen von einer Mastergrafik, auf der alle Sprites abgelegt wurden. Später wenn diese gebraucht wurden, wurde per Code wieder das einzelne Objekt herausgelöst und auf dem Spielfeld positioniert.

Circa um 2000 suchte man im Webdevelopment nach Alternativen für die damals schon üblichen JavaScript basierenden RollOver-Menüs. Und mit CSS und einer sehr einfachen Implementierung der alten Sprites-Idee, war auch diese gefunden. Wobei diese auch viel einfacher und sauberer war, als der JavaScript Vorgänger.
Diese Technik wurde dann noch weiter ausgebaut, in dem man im Prinzip nun die komplette Spritebearbeitung den Videospielen entlieh. Das heißt, eine Vielzahl von Bilddateien einer Website werden in eine große “Master”-Bilddatei kombiniert. Um auf der Website dann wieder ein einzelnes Bild dar zustellen, benutzt man die “background-position”-Eigenschaft in CSS, welches die genaue Position des besagten Bildes definiert. Auch alle möglichen Hover-, Active- oder Focus-Effekte können so direkt realisiert werden.
Bei dem Laden der Website, wird nun nicht jede einzelne Bilddatei mehr geladen (bzw. eine Hover-Datei per Request), sondern ein großes Masterbild mit einem Mal. Das klingt zwar nach keiner großen Sache, aber der Hauptnachteil von JavaScript basierenden MouseOver-Effekten ist, dass sie zwei HTTP Request pro Bild benötigen. Und da diese alle etwas Zeit benötigen, kommt es zu unschönen “Flicker” während des ersten Abrufens. Aber auch allgemein besteht ein Großteil der Gesamtladezeit für eine Seite aus zusätzlichen HTML Requests für alle enthaltenen Elemente. Und diese lassen sich durch diese Technik erheblich reduzieren.
Zusammenfassend kann man also sagen, dass CSS Sprites die Anzahl der HTTP Requests verringern und damit das Laden der Seiten beschleunigen. Aus diesem Grund werden CSS Sprites besondern gern auf stark frequentierten Websites genutzt. Und hauptsächlich für Teile der Navigation (inkl. deren Hover-Effekten), für Icons und natürlich Buttons. Also alles Elemente die sich selten verändern.

Ein einfaches Anwendungsmuster

Ok, fangen wir mit einer kleinen Navigation an, wie sie standardmäßig aufgebaut wäre:

#menu li a {background:none no-repeat left center}
#menu li a.elemnt1 {background-image:url('img/elemnt1.gif')}
#menu li a:hover.elemnt1 {background-image:url('img/elemnt1_over.gif')}
#menu li a.elemnt2 {background-image:url('img/elemnt2.gif')}
#menu li a:hover.elemnt2 {background-image:url('img/elemnt2_over.gif')}

Mit der CSS Sprites können wir dieses Beispiel erheblich beschleunigen. Anstatt 10 einzelne Bilder für die Buttons (5 Default, 5 MouseOver), kombinieren wir diese in eine einzelne Datei. Dieser Arbeitsschritt sollte nicht wirklich schwierig sein. Einfach eine neue Bilddatei öffnen und alle Icons darin von Links Oben beginnend einfügen.
Und nun der angepasste CSS Code. Wie du siehst ist das Hintergrundbild einmalig im Anker-Element definiert. Und in den einzelnen Klassen wird nur noch die Hintergrundposition auf der Y-Achse verschoben.

#menu li a {background-image:url('img/image_menu.gif')}
#menu li a.elemnt1 {background-position:0px 0px}
#menu li a:hover.elemnt1 {background-position:0px -72px}
#menu li a.elemnt {background-position:0px -143px;}
#menu li a:hover.elemnt2 {background-position:0px -215px;}

Durch diese kleine Sachen haben wir HTTP Request um 9 Stück verringert und auch die gesamten Datengröße ist durch weniger Overhead etwas verkleinert worden.
Für wen das zu viel ist, dem sei dieser Webservice an Herz gelegt: http://spritegen.website-performance.org/
Dort genügt es, einfach alle noch einzelnen Bilder in eine ZIP Datei zu packen und hochzuladen. Der Generator erstellt damit dann automatisch das Masterbild und den nötigen CSS Code dazu. Einfacher kann man es wirklich nicht mehr haben.

Zum Abschluss noch ein paar reale Beispiele

Amazon

Sehr kompakt gestaltetes Master-Image

Apple

Apple benutzt CSS Sprites für die verschiedenen Status seiner Hauptnavigation

YouTube

Youtube hat nahezu seine komplette grafische Gestaltung in ein Master-Bild gequetscht, so dass es 2800 Pixel hoch ist.