Tuesday, September 15, 2009

SpriteMe up, Scotty!

This morning as I perused my rss aggregator, I came upon an article over at Ajaxian about a cool new tool for auto-generating CSS Sprites. This seemed like a cool idea, but I didn't think much of it. After all, I've heard of hundreds of projects that try to do something I think would be really useful, and when I go to try it myself I find it's such a pain to get working it's not worth the effort and I may as well accomplish the original task manually.

However, I decided to give it a try in this case because one of my current startup projects (VacationsTxt) was in dire need of some spriting attention. You see, there were 22 background images on one page, which means load time was pretty much sucking as 22 http requests had to be made just to get all the images alone, nevermind the javascript files and stylesheets. So I told myself I'd give it 5 minutes to spike this new tool and if it looked like it was going somewhere I'd maybe invest a little more effort.

Imangine my surprise, 5 minutes later, when I was done. Yes, done. SpriteMe is just a javascript bookmarklet that you run while you're on the page in question. It auto-magically scans all background images and tries to combine them into a css sprite. Then you just download the new image, integrate the necessary css changes that have been applied to your page (live, I might add, right while you're watching it), and you're done.

So how much did SpriteMe help my homepage? See the screenshot below to find out:

I don't know if that's readable or not, but what it says is this "21 requests eliminated".  That's 21 fewer http calls that my server has to handle for every visit to the homepage, and 21 fewer requests the user has to wait through on load. 

More importantly, how much work did it save me? Well, being no graphics expert, I predict I would have spend 4-5 hours trying to get the sprites right for my homepage. Doing all that in 5 minutes is impressive. Most impressive.

Steve Souders, you've made my day.

No comments: