spritebaker

logo

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:

  1. Copy the CSS-comment ("/* SPRITEBAKER:COM */") from the first form-element
  2. Paste the code somewhere into your CSS to verify that you are the owner
  3. Upload the CSS to a webserver
  4. Enter the URL of the CSS into the last input-field
  5. 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.

Are there things to be aware of?

Definetely:

  1. 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.
  2. 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)}
  3. Have an eye on file-size. If the file grows too much, activate server-side gzip-compression (well, you should do that anyway ;-).
  4. 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.

You can turn on compression in different ways:

  1. Paste this line into the htaccess-file on your server
    <ifModule mod_gzip.c>
    mod_gzip_on Yes
    mod_gzip_dechunk Yes
    mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
    mod_gzip_item_include handler ^cgi-script$
    mod_gzip_item_include mime ^text/.*
    mod_gzip_item_include mime ^application/x-javascript.*
    mod_gzip_item_exclude mime ^image/.*
    mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
    </ifModule>

    More info here.
  2. If you serve your pages via PHP, you can put this line into the head of your PHP-Pages: <?php
    ob_start("ob_gzhandler");
    ?>
    More info here:

If none of this methods works, I strongly recommend consulting your admin.

Ok, I baked my stylesheet and turned on server-side gzip-compression. How can I test the speed of my site?

There exist several tools and browser-extensions to help.

  1. You can use the http compression-test on whats my IP org.
  2. gtmetrix is another tool that's good at analyzing your site.
  3. Or install the Web-developer toolbar for Firefox or Chrome.
    After Installing go to "Info" > "Show document size". Here you will get all necessary info on file-size and compression.