Webseiten-Infos.de

CSS-Sprites mit Generator erstellen

Eine Technik um die Anzahl von HTTP-Anfragen (HTTP-Requests) klein zu halten, ist es kleine Hintergrundgrafiken wie beispielsweise Icons zusammen in eine einzige Grafikdatei zu packen.

Der Vorteil: Die Grafik braucht nur einmal geladen zu werden und erfordert bestenfalls nur eine HTTP-Anfrage.

Der jeweils erforderliche Bildausschnitt wird dann mittels Cascading Style Sheets (CSS) passend positioniert.

Eine Arbeitserleichterung hierfür ist der Webdienst CSS Sprites Generator. Er hat zwar noch Alpha-Status, befindet sich also noch in der Entwicklung, aber war mir schon eine große Hilfe. Zum einem konnte ich damit – ohne ein Grafikprogramm zu bemühen – die Icons der Bookmark Dienste automatisch zu einer einzigen Hintergrundgrafik generiert bekommen. Zum anderen bekam ich auch noch gleich die erforderlichen Positionierungsangaben für die CSS-Datei mitgeliefert. Sehr praktisch!

Das Ergebnis kannst konntest Du bei den Icons unter Seite bookmarken bewundern (Nachtrag: Zwischenzeitlich habe ich das in “Seite sichern bei” umbenannt und die Hintergrundgrafiken durch Textlinks ersetzt, damit auch bei deaktiviertem CSS die Links zugänglich sind). Die dortigen Icons sind alle in der einen Datei sprite.png enthalten.

Der Transparenzeffekt beim Bewegen des Mauszeigers (Cursors) über die Icons ist war übrigens auch mittels CSS realisiert. Hier kommt kam die CSS-Eigenschaft opacity zum Einsatz.

Einen weiteren Generator für CSS-Sprites gibt es übrigens unter de.spritegen.website-performance.org/.

Nachtrag vom 31. August 2009

Heute wurde ich über einen Tweet vom Smashing Magazine bei Twitter auf einen weiteren Generator für CSS-Sprites aufmerksam: http://css-sprit.es/