CSS Image Sprites

CSS Image Sprites sind eine einfache Methode, um die HTTP-Aufrufe ihrer Webseite zu verringern. Hat man beispielsweise Grafiken mit einem MouseOver-Effekt von Bildern als Link, so brauchen diese meist lange Nachladezeiten mit oft unschönen Effekten. Im schlimmsten Fall erscheint sogar gar kein Bild für eine kurze Zeit.

Um das Laden dieser zweiten Bilder zu erleichtern, wird mit dem CSS-Sprites ein Bild daraus gemacht. Die beiden Grafiken werden dabei neben- oder übereinander gelegt und das zweite Bild schon vorgeladen. Beim Überfahren mit der Maus sieht der Besucher dann einen durch das CSS „verschobenen“ Bildausschnitt und es wird kein weiterer HTTP-Abruf benötigt.

CSS Sprites sind somit eine Technik im CSS der Webseite, bei der man mehrere Bilder in eine Datei speichert und immer nur den passenden Ausschnitt anzeigt. Dieser Effekt wird auch beim sogenannten Hovereffekt benötigt.

Viele Anleitung und Beispiele für den passenden CSS-Code haben wir im Grafik-Blog gesammelt.