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.

SpritePad

CSS-Sprite per Drag&Drop


Was sind CSS-Sprite?
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:

(via)