We were talking the other day about ways to speed up the microPledge website loading, and we paused a while on just how much overhead is produced by HTTP headers and latency, especially for tiny little images.
(Yeah, we know about HTTP/1.1 pipelining, but in Firefox it’s turned off by default, and IE doesn’t support it.)
We have a number of tiny images on our upcoming site — rounded corners, shadow-borders, and other things you can’t do with plain old CSS. On average, they’re about 200-300 bytes. That’s tiny even in ancient dialup terms.
But if you take a look at the request/response headers normally required to get an image, they add up to about 800 bytes. That’s four times the size. All that effort spent in creating tiny images, wasted. What if you could glue them all together in one big long file, zip it up and send it over the wire? One single request.
That’s where we got stuck.
After looking around a bit, we discovered somebody else has already thought of it, and Firefox implements the idea nicely with the “data: …” url scheme. Cool, but not cool enough, because Internet Explorer doesn’t support it. If you’re lucky enough to have an old version of IE6, there’s an alternative hack you can do, but you’re limited to black-n-white XBMs. Pretty pretty.
David Shea writes about something related he calls CSS Sprites. Almost useful, but not quite right for what we want. :-)
Does anyone else have war stories about something like this?
8 June 2007 by Bryan 9 comments