Bei der Entwicklung von Websites gilt ja bekanntlich: Je weniger Dateien geladen werden müssen, desto besser ist das für die Ladegeschwindigkeit und den Seitenaufbau. Daher werden gerade Icons und andere vor allem kleine Grafiken oftmals nicht als Einzeldateien angelegt, sondern als Sprite. Dabei werden mehrere Grafiken in einer Bilddatei zusammengefasst. Die Erstellung eines Sprites per Hand erfordert etwas Arbeit. Die Grafiken werden in einer Bilddatei angeordnet. Außerdem müssen die Positionen sowie Breiten- und Höhenangaben für jede Grafik in einem Stylesheet hinterlegt werden. Der Sprite-Generator „Stitches“ nimmt einem einen Großteil dieser Arbeit ab.
Einfach Grafiken hochladen
Einfacher als mit „Stitches“ lassen sich Sprites eigentlich gar nicht erstellen. Über eine Weboberfläche lädt man alle Grafiken, die man in einer Sprite-Datei zusammenfassen möchte, hoch. Der Generator kann JPEG-, PNG- und GIF-Dateien verarbeiten. Nach dem Hochladen wird die Grafik automatisch auf einer Arbeitsfläche platziert. Wer will, kann festlegen, ob die Grafiken als kompakter Block oder ausschließlich neben- beziehungsweise untereinander angeordnet werden sollen. Außerdem lässt sich ein Abstand für die einzelnen Grafiken zueinander angeben. Jeder Grafik muss zudem ein eindeutiger Name zugewiesen werden. Über diesen Name kann man die Grafik später einem HTML-Element zuweisen. Zusätzlich erhält das Sprite einen Präfix, der allen Klassen, die generiert werden, vorangestellt wird.
Sind alle Grafikdateien hochgeladen und benannt, kann man sich die Sprite-Datei als PNG-Grafik sowie das dazugehörige Stylesheet herunterladen. Die Stylesheet-Datei enthält eine allgemeine Klasse mit dem Namen des Präfixes, in der die Sprite-Datei als Hintergrundgrafik eingebunden wird. Darüber hinaus wird für jede Grafik eine eigene Klasse definiert, in der per „background-position“ die Position der jeweiligen Grafik innerhalb des Sprites angegeben ist. Zudem sind die Breiten- und Höhenangaben für die Grafik hinterlegt. Der Klassenname für jede Grafik setzt sich zusammen aus dem Präfix und dem eindeutigen Namen, den man beim Generator für jede Grafik angegeben hat.
Bindet man das Stylesheet in ein HTML-Dokument ein, lassen sich die einzelnen Grafiken des Sprites einfach über die jeweilige Klasse einem HTML-Element zuordnen.
<div class="sprite sprite-facebook"></div>
Im Beispiel wird angenommen, dass das Präfix für den Sprite „sprite“ lautet. Das entspricht der Standardbenennung. Neben der Klasse „sprite“ wird auch die Klasse „sprite-facebook“ dem „<div>“-Element zugewiesen. Es würde also die Grafik mit dem Namen „facebook“ dargestellt. Dem „<div>“-Element wird zudem die Höhe und Breite der Grafik zugewiesen.
Noch kompakter mit Data-URIs
Wem eine PNG- und eine Stylesheet-Datei immer noch zu viele Requests sind, kann den gesamten Sprite inklusive Bilddaten innerhalb des Stylesheets unterbringen. Dazu wird die Grafikdatei als Data-URI innerhalb der Stylesheet-Datei platziert. Die Dateigröße wird dadurch zwar insgesamt etwas größer, da Data-URIs immer eine größere Datenmenge darstellen als „normale“ Dateien. Dafür hat man anschließend nur noch eine Datei, in der alles untergebracht ist.
Je nach Anzahl der Grafiken, die im Sprite platziert sind, kann man auf diese Weise mehrere einzelne Requests in einem Request unterbringen. Wenn man auf Data-URIs verzichtet, sind es zwei Requests.
Wer LESS verwendet, kann statt einer CSS-Datei das Stylesheet auch in der LESS-Syntax wählen.
Einstellungen speichern
Wer sich mit „Stitches“ ein komplexes Sprite zusammengestellt hat und später Grafiken ergänzen oder entfernen möchte, kann sich alle Einstellungen des Sprites als Textdatei speichern. In dieser Textdatei sind die Positionen, Bezeichnungen und auch alle Grafiken des Sprites enthalten. Fügt man den Inhalt der Textdatei ins Importfeld des Sprite-Generators ein, werden die Einstellungen geladen.
Anschließend kann man seinen Sprite bearbeiten und erneut generieren lassen. Man spart sich auf diese Weise die Mühe, alle Grafiken erneut hochzuladen. Die geänderten Einstellungen stehen danach wieder als Textdatei zur Verfügung.
„Stitches“ selber hosten
Wer „Stitches“ nicht über die Projektseite des Entwicklers nutzen möchte, kann den Generator auch einfach selbst hosten. Er steht unter der MIT-Lizenz und ist schnell selbst installiert. Die Bibliothek setzt jQuery, Bootstrap und Modernizr voraus. Da „Stitches“ keine serverseitige Programmiersprache nutzt, kann man den Generator auch offline betreiben. Im Downloadpaket sind alle benötigten Dateien – inklusive der externen Bibliotheken – enthalten. Hat man alle JavaScript- und Stylesheet-Dateien im HTML-Head platziert, muss nur noch ein Container ausgezeichnet werden.
<div class="stitches"></div>
Mehr ist ist nicht zu machen, als einem Element die Klasse „stitches“ zuzordnen. Wer will, kann noch eine Standardkonfiguration übergeben, die bei jedem Start automatisch geladen werden soll. Dazu werden Grafiken und ihre Benennung für den Sprite per HTML ausgezeichnet.
<div class="stitches">
<img src="facebook.png"data-name="facebook" />
</div>
Im Beispiel wird eine PNG-Datei eingebunden. Über das Data-Attribut „data-name“ geben wir den Namen für die Grafik vor.
Eine ausführliche Dokumentation, die bei der Anpassung der Installation von „Stitches“ hilft, steht auf der Projektseite bereit. Darin wird der Quelltext aller JavaScript-Dateien, ordentlich durchkommentiert, dargestellt.
Fazit
„Stitches“ ist ein hilfreiches Werkzeug, mit dem Sprites schnell und einfach generiert werden können. Die Möglichkeit, den Generator auch unabhängig der Projektseite nutzen und anpassen zu können, macht dieses Werkzeug noch interessanter. Da „Stitches“ einige HTML5-APIs einsetzt, läuft es nur in modernen Browsern, die HTML5 unterstützen.
(dpe)
