Ridiculous easy Base64 encoding for Designers

Info

What does this thing?

If you are a webdesigner or web-developer you most likely will link to external resources in your CSS: background-images, fonts. Spritebaker will encode these elements directly into your stylesheet. When the "baked" stylesheet is loaded by the webbrowser, all elements are instantaneously available for rendering.

What is so bad about hyperlinking external resources?

For every file your browser tries to load it will send a HTTP-request to the web-server. Every request takes some time, which means that a lot of external resources can slow down loading-time of your website. One way to deal with this problem is to use CSS-sprites. Another way is to use Data URI sprites: embed all images and fonts directly into your css and they will be loaded together with the CSS after one single HTTP-request. Read more on HTTP-requests and performance-optimization on the Yahoo Developer Network.

Sounds too good to be true. There is a catch, right?

The embedded images are encoded as text-files (see next section). This will blow up the file-size of your CSS. Fortunately there is something you can do about this: activate server-side gzip-compression (we will come back on this later).

Some browsers do not understand data-URIs, with all versions of Internet-Explorer below 8 being the most important ones. Some other browsers do have a maximum-size limit for data-URIs. Make sure that you serve special stylesheets to these browsers.

What are Data URIs?

URI stands for Uniform Resource Identifier. The data URI scheme is a method to encode binary-data into an ASCII-string. This string then can be inserted into other text-files like HTML-pages or CSS-files. Nicholas Zakas from Yahoo explains this much better than I can on his blog.

How do I use Spritebaker?

The application consists of some input-fields:

Copy the CSS-comment ("/* SPRITEBAKER:COM */") from the first form-element

Paste the code somewhere into your CSS to verify that you are the owner

Upload the CSS to a webserver

Enter the URL of the CSS into the last input-field

Press "Bake it!"

Spritebaker will process the file. Copy the new CSS from the result-page and save it, but keep the original for modifications.

In case spritebaker won't find a resource, it will leave the path in the CSS unchanged, but put a comment next to the missing file.

Spritebaker will not bake local font-files

If you want Spritebaker to skip a certain resource, put the text "SKIP" in css-comments before it like this:
#style{background-image: url(/*SKIP*/ 'coolimage.jpg')}

If you currently don't have a css-file but want to play around a little, klick "play with testfile".

Are there things to be aware of?

Definetely:

Don't use CSS-sprites.
Slice your sprites into small images like you did it back in the 90ies. If you link to a CSS-sprite within your stylesheet multiple times, the resulting CSS will contain the encoded image more than once and therefore be unnecessary bloated.

Don't use the same image more than once. If you have elements which use the same background image, ie:#style_1{background-image: url(coolimage.jpg)}
#style_2{background-image: url(coolimage.jpg)}
you should think about putting the background-image into a class instead:.coolimage {background-image: url(coolimage.jpg)}

Have an eye on file-size. If the file grows too much, activate server-side gzip-compression (well, you should do that anyway ;-).

Browsertesting, browsertesting, browsertesting.

Are there problems I can run into?

It will definetely help if your CSS-code is valid and error-free.

If you use fancy stuff like microsoft behaviours, some urls in your CSS will most likely be crippled and must be fixed after baking. Better avoid this outdated stuff firsthand

What is this gzip-compression thing?

Most webservers can compress data on the server. The compressed file will be much smaller and therefore be delivered much quicker. After receiving the webbrowser will decompress the file. Usually the common image-formats for the web like jpeg, gif and png will be already compressed, so gzip will not have an effect on them. But gzip-compression is very useful for text-files like html, javascript, stylesheets or SVG. As data URIs are basically large chunks of text, compression can help to bring them back to an acceptable size.

There are several methods to activate server-side gzip-compression and I can't go into detail here. In Apache it is handled by the mod-deflate-module. Most likely this module will be active anyway, if you are unsure ask your admin.