Convert CSS images to data URIs automatically with CSSEmbed

data-uri-results

I wanted to play around with Nicholas Zakas’ new tool for automatically converting CSS background images to data URIs so I tested it out with the CSS on this site.  CSSEmbed accepts a CSS file and outputs a copy with all image references replaced with base 64-encoded data URIs.  (If you’re unfamiliar with the concept of data URIs, read this post by Zakas.)

As you can see, the file size of your stylesheet increases significantly as the stylesheet takes on the image data.  But once you add compression you end up with roughly the same total load size.

In this example the total amount of data remained the same but the number of HTTP requests was reduced from 14 to 1.  Yikes!

There are still a few things with the concept that need to be sorted out – namely, the best way to handle IE 6&7, both of which do not support data URIs.  I’m planning to experiment with a few of the possible options later this week.  If you’re curious about the idea, I recommend trying out CSSEmbed with some of your own CSS.  It’s easy to use and kinda fun.  It feels a bit like the future.

Both comments and pings are currently closed.

Discussion

What a great example of “less is more”! One of my favorite concepts and one that seems to be a driving force behind contemporary web development. Yay for economy!

I’m interested about browser performance.
Assuming network load time = 0, is loading and parsing the bigger css faster or slower than parsing lighter css and the 13 images?

@Paolo
Yesterday I wrote about how using data URIs for CSS images can impact parallel downloads. It doesn’t fully answer your question but it draws attention to some of the other performance factors that needs to be considered. I’m planning to do more research and testing on how the browser handles the single large file, and whether using data URIs in stylesheets has any effect on things like progressive rendering and reflow/repainting. I’ll report back when I have some results.