Kevin Papst

SpriteMe lokal installieren und CSS-Sprites erstellen

von Kevin Papst am

Gerade habe ich in meinem Feedreader einen schönen Artikel bei Chris Coyer gefunden, der sehr gut erklärt was CSS Sprites sind und warum man diese nutzen sollte. Wer nicht weiß worum es dabei geht, der sollte sich einfach einen der verlinkten Artikel vornehmen, dort wird die Technik vorgestellt und erläutert.

Grob gesagt vereinen CSS-Sprites viele Layout Grafiken in einem einzigen großen Bild, wodurch die Anzahl an HTTP-Requests sinkt und die Ladegeschwindigkeit der Webseite steigt. Es wird dann via CSS der richtige Ausschnitt angezeigt, anstatt einer einzelnen Grafik.

Es gibt verschiedene Wege solche Sprites zu erstellen, einer der einfachsten dürfte es sein, die Webseite wie gewohnt zu erstellen und dann am Ende das Bookmarklet SpriteMe zu verwenden. SpriteMe nimmt einem den größten Teil der Arbeit ab, manuelle Nachjustierungen am Spritebild sind empfehlenswert, um am Ende noch größere Einsparungen zu erzielen. Wenn Ihr es nich nicht kennt, einfach mal testen um das Vorgehen zu verstehen!

Aber darum soll es hier gar nicht gehen. Für uns Webentwickler ist es ja wichtig, nicht nur auf die Rendergeschwindigkeit des Servers zu achten, sondern auch die Zeit im Auge zu behalten, die ein Client benötigt um die Seite komplett zu laden und darzustellen. Das sollten wir tun, bevor wir die Webseite beim Client deployen und nicht erst danach. Leider – und jetzt kommen wir zum Herz des Artikels – kann SpriteMe nicht mit Grafiken umgehen, die nur lokal vorliegen bzw. nicht über das Netz zugänglich sind.

Wie arbeitet SpriteMe eigentlich?

Nun, es handelt sich hier eigentlich um 3 zusammenarbeitende OpenSource Komponenten:

  • Das Bookmarklet, welches das eigentlich SpriteMe Javascript nachlädt
  • Das spriteme.js welches die Client Logik enthält, Bilder zusammensucht und die Kommunikation mit dem Server übernimmt
  • Der PHP Anwendung coolRunnings, die mit Hilfe von ImageMagick das Sprite aus den einzelnen Grafiken erstellt

SpriteMe ist also nur der Client Teil der u.a. die URLs der einzelnen Bilder als JSON Aufruf an den Server sendet, welcher seinerseits die Bilder vom Server lädt. Nun arbeiten wir ja während der Entwicklung oft in einem geschlossenen Netz bzw. über http://localhost/. Klar das da der öffentliche coolRunnings Server (der übrigens unter http://jaredhirsch.com/ läuft) nicht rankommt.

SpriteMe für lokale Entwicklungen nutzen

Die Lösung ist eigentlich recht einfach, wir installieren die Komponenten bei uns lokal bzw. im internen Netz. Ich arbeite ab hier nur noch mit localhost, ihr könnt aber natürlich auch eine interne URL oder noch einfacher die IP des Servers nutzen!

Mein Arbeitsrechner läuft zudem mit Ubuntu, die Software wird unter /var/www/spriteme/ gespeichert, so das die folgenden Aufrufe, Pfade und URLs für andere Systeme eventuell angepasst werden müssen.

  • Installationsort: /var/www/spriteme/
  • Installations URL: http://localhost/spriteme/

Installation und Setup von SpriteMe und coolRunnings

Ab hier gehts jetzt ganz schnell und ohne viele Worte. Ich vermute die Erläuterung kann ich mir sparen, denn wer bis hierhin gelesen hat weiß sicher was er tut… wenn doch Fragen aufkommen, bitte die Kommentarfunktion nutzen! Also los gehts:

Download des coolRunnings Packages von http://bitbucket.org/jared/coolrunnings/downloads/ und entpacken nach /var/www/spriteme/. Noch einfacher gehts aber mit Mercurial, dazu einfach das Repository clonen:

cd /var/www/spriteme/
hg clone http://bitbucket.org/jared/coolrunnings/

Sicherstellen das PHP Schreibrechte auf das Webverzeichnis hat:

sudo chmod -r a+w /var/www/spriteme/

Weiter gehts mit:

  • SpriteMe.js herunterladen von http://spriteme.org/spriteme.js und speichern unter /var/www/spriteme/spriteme.js
  • SpriteMe Bookmarklet installieren von http://spriteme.org/
  • Bookmarklet Eigenschaften anpassen und die URL umbiegen von http://spriteme.org/spriteme.js auf die lokale URL http://localhost/spriteme/spriteme.js

Datei /var/www/spriteme/library/FrontController.php anpassen in Zeilen 18/19:

$this->setWebRoot('/var/www/spriteme/');
$this->setRootUrl('http://localhost/spriteme/');

Datei /var/www/spriteme/spriteme.js und die URL in Zeile 550 anpassen:

var makeUrl = "http://localhost/spriteme/index.php?t=" + Number(new Date()) + "&format=json&absolute=" + sJson;

Mir fehlte das Imagemagick Modul, daher dieses installieren und Apache neustarten:

sudo apt-get install php5-imagick
sudo /etc/init.d/apache2 restart

coolRunnings kann zur Qualitätsverbesserung der erzeugten PNGs pngcrush nutzen, also das auch noch installieren:

sudo apt-get install pngcrush

Fertig! Jetzt könnt Ihr auch schon Eure lokalen Webseiten „spriten“. Viel Spaß damit!