CSS-Sprites Generator

Das Problem

Das Thema Ladezeiten von Webseiten wird oft nur unter den Bandbreiten-Aspekt betrachtet, mit den Teilaspekten

  • schlechte Internetverbindung des Webseitenbesuchers
  • hohes Datenvolumen der Webseite (z.B. durch aufgeblähte Flash-Animationen)
  • langsame Auslieferung der Webseiten seitens des Servers.

Nicht so häufig wird beachtet, dass einfach durch eine Vielzahl von (möglicherweise sehr kleinen) Dateien hohe Ladezeiten dadurch entstehen, dass viele HTTP-Requests abgearbeitet werden müssen. In typisches Beispiel hierfür sind Webseiten mit vielen Icons und anderen Grafiken, z.B. für runde Ecken und andere Elemente zur optischen Aufwertung der Webseite.

Die Lösung

In sehr vielen Fällen kann man mit diesem Problem (also dem der hohen Anzahl von HTTP-Requests) dadurch begegnen, dass man viele der benötigten Grafiken in eine Datei packt und von dieser großen Datei nur den Teil einblendet, der gerade benötigt wird.

Hierbei unterstützt der Online-CSS-Sprite-Generator.

Screenshot vom CSS-Sprite-Generator

CSS Sprite Generator

Auf ähnliche Weise unterstützte der CSS-Sprite-Builder auf http://css-sprit.es/ das gleiche Anliegen, nämlich die Generierung von CSS-Sprite-Code. Leider ist die Website des CSS-Sprite-Builder nicht mehr online.

Screenshot vom CSS-Sprite-Builder

CSS Sprite Builder