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:
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.