Für jedes Bild, das für das Design einer Webseite geladen wird, startet der Server eine Anfrage (er öffnet einen http Request). Um diese Anfragen zu minimieren ist die Entwicklung der CSS Sprites Technik entstanden.
Was sind CSS Sprites?
Unter CSS Sprites versteht man eine CSS Technik für die Kombination von Bilder. Im Vorfeld werden die in dem Design der Webseite verwendeten kleine Bilder und grafische Elemente in einem großen Bild zusammengeführt. Mittels direkter CSS-Ansprache lassen sich diese dann gezielt einzeln wieder ansprechen und in das Design einbinden.
Vor allem bei großen Webseiten lassen sich mittels CSS Sprites Optimierungspotentiale finden.
Vorteile von CSS Sprites:
- kein Javascript oder PHP Code notwendig
- effektiverer Download (nur ein größeres Bild, statt vieler kleinere Bilder)
- Reduzierung der http Request´s
Bsp. für CSS Sprites
Das Design einer Webseite wird mittels CSS zusammengesetzt. Die CSS Datei verweist auch auf einige Bilder (wie z.B. Background, Navigationshintergrund, Linkeffekte, Header, Logo, Aufzählungspunkte, Footer, etc). Diese vielen kleinen Bilder werden in einem großen Bild zusammengefasst und dann über die CSS Datei einzeln angesprochen.
In diesem Fall müssen nicht mehr viele kleine und einzelne Bilder geladen werden, sondern nur noch ein einziges, großes Bild. Mittels Browser Caching erfolgt das Laden dieses Bildes durch den Browser nur ein einziges Mal! Das spart Traffic und verbessert so die Performance der Webseite.
