CSS sprites - Bilder kombinieren
Für jedes Bild, welches für das Design einer Webseite geladen wird, macht der Server eine Anfrage auf (http Request). Um diese Anfragen zu minimieren ist der Vorschlag der CSS Sprites entstanden.
- Combine images into CSS sprites – viele kleine Bilder zu einem Bild
Was sind CSS Sprites?
Unter CSS Sprites versteht man eine CSS Technik für Bilder. Im Vorfeld werden die in dem Design der Webseite verwendeten kleine Bilder in einem großen Bild zusammengeführt. Mittels CSS lassen sich diese dann direkt ansprechen.
Vorteile von CSS Sprites:
- kein Javascript oder PHP notwendig
- effektiverer Download (nur ein Bild, statt viele)
- weniger http Request´s
Bsp. für CSS Sprites
Das Design einer kleinen Webseite wird mittels CSS zusammengesetzt. Die CSS Datei verweist auch auf einige Bilder (Background, Navigationshintergrund, Linkeffekte, Header, Logo, Aufzählungspunkte, Footer, …). Diese vielen kleinen Bilder werden nun 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.
Bei der Erstellung eines neuen Designs für eine Webseite sollte schon auf den Einsatz von CSS Sprites geachtet werden (eventuell auch dem Design, der Agentur, etc. mitteilen).
Tipp 2:
Wenn das komplette Design weniger als 4 Bilder (JPG, GIF, PNG Dateien) benutzt, dann taucht dieser Punkt nicht als zu lösende Aufgabe bei der PageSpeed Analyse auf. Wer somit sein komplettes Design nur aus CSS-Elementen erstellt, der braucht auch keine CSS Sprites erstellen.
CSS Sprites Online Tools
CSS-Sprite-Generator
Mit einem CSS-Sprite-Generator lassen sich sehr schnell CSS Sprites (Bilder und CSS Code) erstellen. Dazu werden einfach alle kleinen und in dem Design verwendeten Bilder mittels des Tools hochgeladen und daraus ein großes Bild, sowie der entsprechende CSS Code erstellt.
+ CSS-Sprite-Generator
