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 textfiles 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!


3 Responses to “Introducing Spritebaker”

  1. Comment by jdmiller82 09/13/2010

    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!


  2. Comment by Dirk 09/14/2010

    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. Comment by rpitera 03/25/2011

    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!!