eleqtriq

Spritebaker

Data URI-Sprites sind für mich bei meiner Arbeit mittlerweile ein unverzichtbares Instrument geworden. Für die Rookies: Data URI-Sprites nennt man das Verfahren, Bilder und Resourcen Base64 zu encodieren und anschließend direkt in HTML oder CSS-Files einzubinden. Leider ist dieser Vorgang etwas verwickelt: zuerst muss man sein Image-File mit mit einem geeigneten Tool encoden, anschließend dann den entstandenen Buchstabensalat händisch in sein CSS-File einkopieren. Dieser Vorgang ist fehlerträchtig weil ein Base64 encodiertes Bild gerne mal eben viele hundert Zeilen lang ist. Dazu kommt, dass die meisten Dieser Tools Zeilenumbrüche in den encodierten Text einfügen, die meisten Browser aber leider nur Data URI-Sprites ohne Zeilenumbrüche lesen können.

Um mir das Leben einfacher zu machen hatte ich mir mittels Flash ein Tool zusammengezimmert das diesen Job für mich übernimmt: ich kann ihm ein CSS-File vor die Füße werfen und es durchsucht das Stylesheet nach Binardaten wie Bildern und Fonts, encodiert diese und setzt sie in ein neues Stylesheet ein.

Insgesamt hat das Tool für mich ganz gut funktioniert, solange ich mich an meine eigenen Vorgaben gehalten habe: alle URLs in Anführungszeichen, keine Fehler wie z. b. leere url()-Attribute etc. Jemand anderes als ich würde damit aber wohl nicht klarkommen, weil es nunmal nicht wirklich tolerant gegenüber Fehlern ist.

Ich hatte schon länger geplant, das Ganze einmal in eine saubere Form zu bringen und daraus eine online-App zu machen. Ursprünglich wollte ich einfach den Actionscript-Code aufräumen und die Applikation als Air-Anwendung zum Download anbieten. Dann wurde ich aber abenteuerlustig: ich wollte herausfinden, inwieweit das ganze mit Bordmitteln - Javascript und HTML - umgesetzt werden kann. Javascript ist zwar nicht wirklich für den Umgang mit Binärdaten vorgesehen, aber ein Ajax-Request in Verbindung mit overrideMimeType('text/plain; charset=x-user-defined') machts dann doch möglich.

Das ganze ist nun unter der Adresse www.spritebaker.com zu erreichen. Dort gibts auch mehr Infos zu Data-URIs und Gzip-Kompression. Ich hoffe die App macht dem einen oder anderen das Leben leichter. Ich hab das ganze testweise mal auf der Google App-Engine aufgesetzt (die nebenbei bemerkt genial ist). Have Fun!

Trackback

3 Kommentare zu „Spritebaker“

  1. Kommentar by jdmiller82 Mo. 13. Sep 2010, 23:22

    Great tool! Thank you for making it available. Question though. You said that this project is under the GNU license and that we can modify it… is there somewhere I could download the source for this? something like github?

    I would like to take your source and try to combine it with less.app, making a new app that will make my CSS rock like nothing else!

    Thanks!

  2. Kommentar by Dirk Di. 14. Sep 2010, 21:06

    jdmiller, you can simply get the source by viewsource ;-). Everything is happening right in the frontend, as it is strict html and javascript with some jQuery wizardry.
    But I fear it’s not the right solution for your purposes, as you will need something that runs in the backend …

  3. Kommentar by rpitera Fr. 25. Mär 2011, 23:13

    Dirk –

    Simply…awesome. Wanted to try CSS sprites the old fashioned way but really couldn’t find the time. This worked fantastic and the improvement in speed is noticeable right away. I also tried it on a clients site where I had previously stripped the spaces, comments and hard returns on it (to cut the size down) and Spritebaker didn’t have any issues. Thanks so much for sharing this – so glad I Stumbled it!!