SpriteCow: CSS-Sprites intuitiv erstellt

Wenn eine Website viele kleine Grafiken enthält, zum Beispiel für Menüpunkte innerhalb einer Navigation, sollte man diese heutzutage nicht mehr als einzelne Dateien einbinden, sondern über einen sogenannten Sprite. Dieser aus der Frühzeit der Computerspiel-Entwicklung stammende Begriff bezeichnet im CSS-Kontext eine einzelne Bilddatei mit mehreren grafischen Elementen. Da die manuelle Erstellung der CSS-Klassen für jedes einzelne grafische Teilchen sehr aufwändig ist, konnten sich einige Onlinetools etablieren, die den Vorgang stark vereinfachen. Eine der fähigeren Webapps für diesen Zweck hört auf den Namen SpriteCow.

Sprites und CSS: HTTP-Requests minimiert, Website beschleunigt

Je mehr Grafikdateien bei einer Website geladen werden müssen, desto länger dauert der Seitenaufbau. Denn jede zu ladende Datei verursacht einen HTTP-Request, der vom Server abgearbeitet werden muss. Gerade bei vielen kleinen Grafikdateien kann man diese Requests minimieren, indem man alle Grafiken in einer Datei vereinigt und jeweils nur Ausschnitte der Gesamtdatei als CSS-Sprite darstellt. Der Workflow sähe im Grunde so aus, dass man im Bildbearbeitungsprogramm seiner Wahl die Grafiken nebeneinander platzierte und die jeweiligen Positionen dann an eine CSS-Klasse übergäbe, die jeweils nur den entsprechenden Bildausschnitt anzeigte. Einen Teil dieser Arbeit erledigt das Tool SpriteCow.

SpriteCow identifiziert zusammenhängende Bildteile

Die kostenlos und ohne Registrierung nutzbare Web-App SpriteCow übernimmt nicht den gesamten Workflow der Erstellung von CSS-Sprites. Vielmehr erwartet SpriteCow eine bereits fertige Datei, die alle grafischen Elemente beinhaltet. Diese sollte sinnvollerweise aus einem PNG mit Transparenz bestehen. So dies nicht erwünscht ist, können auch JPG verwendet werden. Wichtig ist ein erkennbarer Hintergrund. Über die Funktion Pick Background kann der SpriteCow die (zu ignorierende) Hintergrundfarbe übermittelt werden. So konnte ich beispielsweise das folgende Scribble aus dem Designprozess der iPad-App „Rivers & Seas“ spritefähig machen, indem ich der SpriteCow weiß als Hintergrundfarbe vorgab. Wie Sie sehen, identifiziert SpriteCow zusammenhängende Bildteile recht zuverlässig.

Sollte es einmal dazu kommen, dass sich ein Sprite aus mehreren Bildteilen zusammensetzen soll, so kann ein Rahmen um die entsprechenden grafischen Elemente gezogen werden. Das daraus resultierende Sprite ist dann entsprechend größer. Etwas umständlich an der Bedienung der SpriteCow ist die Tatsache, dass die App jedes Sprite einzeln mit der immer gleichen CSS-Klasse .sprite versieht. Hat man die Einzelteile aus- und in die CSS-Datei wieder einkopiert, steht man vor einem mehr oder weniger großen Änderungsaufwand, den man zweckmäßigerweise direkt nach jedem Kopiervorgang erledigen sollte. Ansonsten dürfte die Übersicht irgendwann verloren gehen.

SpriteCow vs. SpritePad: Eine Sache des Workflow

An diesem Punkt kann SpriteCow nicht mit dem Tool SpritePad mithalten, über das wir vor einigen Wochen hier bei Dr. Web berichteten. SpritePad erwartet nicht eine einzelne Datei. Vielmehr können mehrere grafische Elemente per Drag & Drop in die Oberfläche gezogen werden. Zudem erzeugt SpritePad direkt mehrere Klassen und bietet den Download sowohl der Sprite-Datei, wie auch des erzeugten CSS in einem Zip-Archiv an. Auf den ersten Blick scheint SpritePad damit weit besser geeignet als SpriteCow.

Der Haken an der Sache ist, dass grafische Elemente in SpritePad einzeln in die App gezogen werden müssen. SpritePad kann nicht wie SpriteCow Bildteile innerhalb einer einzelnen Datei erkennen und verfügbar machen. Insofern dürfte SpriteCow eher dem Workflow des Webentwicklers entsprechen, meinem jedenfalls.