Clik here to view.
Over time Data URI Sprites have more and more become an indispensable tool for my work. For the rookies: data URI-sprites is the name of the method to encode all kind of binary resources to base64 and embed the resulting text-files into a HTML-document or a stylesheet. Unfortunately the process is somehow unelegant: first you must encode your binary-file with some adequate tool, then you will need to paste the resulting string into your css. As a base 64 encoded dataset can be some 100 lines of text easily, this process is quite error prone. Additionally most of this tools add linebreaks into the encoded text, but most browsers can't interpret data URI-Sprites with linebreaks which means you have to remove alle the linebreaks after encoding (and there can be a lot of them).
To make life easier for me I cobbled together a Flash-tool that does this job: feed a CSS-file to it and it will scan it for fonts, images and svg, encode them and return a new CSS-file.
All in all this works quite o.k. for me, as long as I stick to some rules: all URLs in quotes, no empty url() in attribute etc. But as the tool doesn't tolerate any errors and expects everything to be in place from the beginning, it would most propably drive a lot of other designers insane.
For some time now I had planned to convert the tool into an online-app. At first my intention was to refactor the actionscript and offer it as a downloadable Air-application. But then I got adventureous: would it be possible to get this done with pure HTML and Javascript? Javascript is not the best tool for processing binary-data, but an ajax-request together with overrideMimeType('text/plain; charset=x-user-defined') made it possible in the end,
You will find the fruits of my labour on www.spritebaker.com. You will also get some more Info about data-URIs and Gzip-compression. I hope the app is helpful for some of you. The whole thing was created on the google app-engine (which is a great tool, btw.). Have Fun!
