Webentwickler und Tüftler sind oftmals darin bedacht, ihre Seiten soweit an die Grenzen der Optimierung zu treiben, wie es nur geht. Ein Mittel um die Performance einer Seite (etwas) zu steigern, sind CSS-Sprites.
CSS-Sprites sind Grafikdateien, die alle erforderlichen Elemente eurer Webseite enthalten. Ihren Einzug erhielten diese Dateien, um den Nachladevorgang bei einem MouseOver-Effekt per CSS zu umgehen. Später kam man eben auf die Idee, dass man diese Vorgehensweise für alle Elemente benutzen kann.
CSS-Sprites verringern eure Anfragen an den Server. Denn es werden nicht mehr »Pfeil.png«, »Menue.png«, »neu.png«, »pn.png«, und »neu_over.png« aufgerufen, sondern nur noch eine Datei. Diese Datei enthält dann alle erforderlichen Grafiken als Gesamtbild. Als Beispiel dient uns eine Datei von Google.
Ich denke, es ist klar, was nun eine CSS Sprite ist. Stellt euch die Datei wie eine große Overhead-Folie vor. Ihr müsst jetzt nur noch für das richtige Fenster, die richtigen Koordinaten haben. Was nach Puzzlearbeit für den Grafiker und den Frontend-Entwickler (oder Personalunion) klingt, kann mit SpritePad relativ zackig erledigt werden.
SpritePad funktioniert per Drag&Drop. Einfach die Grafiken auf die Seite ziehen, ausrichten und sich die CSS-Sprite als auch den CSS-Code als Zip herunterladen.
Wer mehr über das Thema erfahren möchte und welchen Einsatz damit man noch bewerkstelligen kann, der schaut einfach mal bei Martin rum. Der hat erst kürzlich darüber geschrieben, welchen Einfluss Sprite-Images und CSS-Sprites auf die Seitengeschwindigkeit haben.
Nachtrag:
Hallo Kai, vielen Dank für deinen Blogpost! Mit unserem Premium Acc kann man sich übrigens selbst das von Hand ausrichten sparen! @KaiThrun
— We Are Kiss (@We_Are_Kiss) März 13, 2012
(via)
ganz automatisch geht das auch mit dem Tool von hier: http://de.spritegen.website-performance.org/ einfach Dateien raufladen und fertiges Sprite mit CSS bekommen… wobei das CSS bei meinen Versuchen nie wirklich gepasst hat Aber mit etwas Feintuning, oder wenn man sich den PHP-Code von hier: https://launchpad.net/css-sprite-generator zieht und es direkt im Code fixt kein Problem – ideal wenn man das automatisiert irgendwo einbauen möchte 😉