Die Erstellung von CSS-Sprites ohne entsprechende Tools ist ein mühseliger Prozess. Glücklicherweise stehen Web-Designern einige gute Werkzeuge zur Verfügung. Eines dieser Werkzeuge möchte ich heute kurz vorstellen.

Mit Hilfe des Online-Tools SpritePad lassen sich CSS  Sprites blitzschnell erzeugen. Die Grafiken werden einfach per Drag & Drop auf einem Feld abgelegt und schon erzeugt das Spritepad ein PNG Sprite plus des dazugehörenden CSS Code.

Zitat Wikipedia: „In den meisten Fällen kann durch eine konsequente Nutzung von Sprites eine Verringerung der Webseiten-Ladezeit erreicht werden: Der Browser lädt wesentlich schneller eine Datei mit einer Größe von 10kb als zehn Dateien mit jeweils 1kb, weil die HTTP-Spezifikation nur wenige parallele Download-Vorgänge vorsieht.“

CSS Sprites reduzieren die Ladezeiten einer Website und die Anzahl der Abfragen, da nur eine Datei geladen wird und die jeweiligen benötigten Ausschnitte per CSS angezeigt werden. Die Ladezeit einer Website ist einer der Ranking-Faktoren, die Google zur Bewertung einer Website heranzieht.

Auch Googles Ladezeiten-Check Pagespeed Online empfiehlt die Nutzung von CSS-Sprites zur Ladezeit-Optimierung.