Anzeige
Smartes Cloud Hosting für anspruchsvolle Projekte.
↬ Loslegen und Spaces testen ↬ Jetzt testen!
Denis Potschien 30. Juli 2012

SpriteMe erstellt CSS-Sprites aus bestehenden Website-Grafiken

Hintergrundbilder in einer einzelnen, Sprite genannten Datei unterzubringen, und sie dann per CSS zu adressieren, macht eine Website schneller. Denn statt jedes Hintergrundbild einzeln zu laden, muss das Sprite nur einmal geladen werden. Das spart Server-Requests und somit Ladezeit. Es gibt eine ganze Reihe von Webdiensten, die einem bei der Erstellung von Sprites für eine neue Website behilflich sind. SpriteMe geht einen eigenen Weg: Es erstellt einen Sprite aus Hintergrundbildern einer bestehenden Website.

Wix Webseiten — echt superpraktisch. ↬ Mehr erfahren


SpriteMe

Anzeige

SpriteMe als Bookmarklet verwenden

Zunächst einmal muss SpriteMe als Bookmarklet den Favoriten des Browsers hinzugefügt werden. Der entsprechende Link wird auf der Website von SpriteMe zur Verfügung gestellt. Anschließend wird die Website geladen, für welche ein CSS-Sprite erstellt werden soll, und das SpriteMe-Bookmarklet aufgerufen. Es öffnet sich nun eine kleine Box im Browserfenster, die alle gefundenen Hintergrundgrafiken der Website auflistet. SpriteMe sortiert die Grafiken nach jenen, die zu einem Sprite zusammengefügt werden und können, und jenen, die nicht für einen Sprite in Frage kommen.


Durch Bookmarklet geöffnete SpriteMe-Box

Wird eine Hintergrundgrafik wiederholt (auf der X- oder Y-Achse), kann sie einem Sprite ebenso wenig hinzugefügt werden wie eine Hintergrundgrafik, deren HTML-Element größer ist als der dargestellte Hintergrund selbst. Allerdings besteht die Möglichkeit, solche Hintergrundgrafiken manuell zur Liste der Sprite-fähigen Hintergründe hinzuzufügen. Man sollte sich dabei bewusst sein, dass diese dann nicht mehr korrekt dargestellt werden könnten.

Sprite und CSS generieren

Sind alle Hintergrundgrafiken der Sprite-Liste hinzugefügt, wird über einen einzigen Mausklick das Sprite aus allen ausgewählten Grafiken erstellt. Ebenso schnell ist die dazugehörige CSS-Datei erstellt. Die Datei ersetzt alle bisherigen Hintergrundgrafiken durch das neu erstellte Sprite („background-image“) und ergänzt die Position der jeweiligen Grafik innerhalb des Sprites („background-position“).

Sprite-Bild und CSS-Datei können nun auf den eigenen Webserver kopiert werden.


Durch SpriteMe erstellter CSS-Quelltext

Wer möchte, kann das Ergebnis von SpriteMe auf deren Website veröffentlichen. Dort wird dann eine kleine Statistik der erstellten Sprites gelistet. Neben Anzahl der aus einzelnen Grafiken erstellten Sprites wird auch angegeben, wie viel Kilobyte durch das Sprite erspart wurden, beziehungsweise hinzugekommen sind. Denn wirklich lohnend ist das Erstellen von Sprites nur bei einer entsprechend hohen Anzahl von Hintergrundgrafiken, die zu einem einzigen Sprite zusammengefasst werden.

Fazit: SpriteMe ist wirklich einfach einzusetzen und bietet sich vor allem dann an, wenn bereits eine Website besteht und diese per SpriteMe optimiert werden soll.

(dpe)

Denis Potschien

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.