CSSEmbed – automatically data: URI-ize

November 16, 2009 10:51 am | 6 Comments

Nicholas Zakas (Yahoo, author, and JS guru) has been analyzing the performance benefits of data: URIs, mostly in the context of CSS background images. This follows on the heels of a great blog post from the 280 North folks about using data: URIs in Cappuccino. Quick background – data: URIs are a technique for embedding resources as base 64 encoded data, avoiding the need for extra HTTP requests. It’s a technique I describe in Chapter 1 of High Performance Web Sites. For more background, refer to Nicholas’ Data URIs explained blog post.

Data: URIs are a well known performance best practice, but until now have been largely a manual process or customized build script. Nicholas addresses these shortcomings with his release of two open source projects. CSSEmbed is a commandline tool that converts your stylesheet’s image references to data: URIs. DataURI is the lower-level commandline tool used by CSSEmbed to convert files to data: URI format. After downloading the JAR file, the usage is simple:

java -jar cssembed-x.y.z.jar -o styles_new.css styles.css

The commandline version is key for releasing production code. I’d also like to see an online version of these services. Another great enhancement would be to have an option to generate a stylesheet that works in Internet Explorer 6 & 7, where data: URIs aren’t supported. (See the blog post from Stoyan Stefanov and examples from Hedger Wang for more info on this MHTML alternative.)

To get wide adoption of these web performance techniques, it’s critical that they be automated as much as possible. Kudos to Nicholas for creating these tools to ease the burden for web developers. Read Nicholas’ original blog post Automatic data URI embedding in CSS files for examples and more links.

6 Responses to CSSEmbed – automatically data: URI-ize

  1. Bruno | 17-Nov-09 at 1:53 am | Permalink |

    Hi Steve and thanks for sharing.

    But after testing, I have a question about optimization with URI format.
    While trying to see limits of this tool, I try to compress a twitter image on their homepage. Just with one (clouds.gif), the content downloaded has improve from 30289 to 40410 bytes. more than 10k for just one image…
    Is this URI format really a good solution? Actually it depend on client connection speed and, I think, of server-side keep-alive activation, but I don’t really know what is the limit between using and not using URI format. In the case I expose, it’s sure we don’t have to… Any idea?

    Thanks in advance,

    Bruno

  2. Steve Souders | 17-Nov-09 at 9:24 am | Permalink |

    @Bruno: An extra HTTP request adds 200+ milliseconds to a page (worldwide average). So the comparison is 30K & 200+ ms versus 40K. For most users, the 40K option is going to be better. Typically, the encoded data is going to increase 37%, but putting it in a stylesheet and gzipping might reduce that. This would be a good study for someone to do. ;-)

  3. Dmitry Chaplinsky | 18-Nov-09 at 5:39 am | Permalink |

    Hi Steve.
    I just performed small test using our sprite for buttons and small test CSS:
    .button {
    background: url(all-buttons-sprite.png) no-repeat 0 0;
    }

    #button1 {
    background-position: 0 -20px;
    }

    #button2 {
    background-position: 0 -40px;
    }

    $ java -jar ~/Downloads/cssembed-0.2.6.jar -o test_new.css test.css

    Here is the file sizes:
    4963 all-buttons-sprite.png
    157 test.css
    6777 test_new.css
    4804 test_new.css.gz

    So, after GZIP we have not only -1 request but also improvements in total size.

    Unfortunately it seems that MHTML stuff will ruin down this good statistic.

  4. Dmitry Chaplinsky | 18-Nov-09 at 8:45 am | Permalink |

    Aham, here is how it looks after enabled IE support:

    4963 all-buttons-sprite.png
    182 test.css
    218 test.html
    13635 test_new.css
    5045 test_new.css.gz

    Quite nice, if gzip enabled, of course.

  5. Dmitry Chaplinsky | 18-Nov-09 at 1:49 pm | Permalink |

    Just finished very raw implementation of mhtml support for the tool:
    http://github.com/nzakas/cssembed/issues/#issue/3

    It was my first java work and I spent around hour or so, so it may looks awful but can provide general idea.

  6. Ruslan | 26-Nov-09 at 8:12 am | Permalink |

    You can use online generator of data:uri css sprites

    http://duris.ru/lang/en/

    Supports MHTML for IE<8 & data:URI for others browsers