I was asked about base64 vs a sprite image in CSS...

Both techniques are better than multiple images as they reduce the number of http requests. A sprite image requires 1 additional request, base64 doesn't.

Some point out that base64 increases the file size of the image by 25% (slightly more if padding is needed). Base64 represents 6 bits of data as a character. Characters in utf8/ASCII are 8 bits, so that's where 25% comes from. However, gzip recovers a lot of that. I took a 411 byte image which base64'd to 548 bytes, but gzipped back to 469 bytes. In this case the increase is more like 10%, which is nothing to worry about at these sizes. Also, since gzip is BLACK MAGIC the increase may be less when it's in a css file.

With base64 the image data is in the css file, meaning it gets downloaded even if it isn't needed. Eg, if you're using media queries to optimise image usage for mobile, base64 doesn't help.

The browser has to download the full CSS file before it can render anything, having imagery in a separate request gets you progressive rendering, whereas with base64 the CSS and image data has to download before anything is displayed to the user.

WIth base64 you'll need to provide a url fallback for IE6/7 as they don't support base64 url, so experience there is particularly bad as they have to download all the image data twice & get hit by the separate http requests.

Aside from the delivery method, using base64 is the same as using separate image files. This means you can tile the image, which you can't do with a sprite yet. In the future we'll be able to use something like https://developer.mozilla.org/en/CSS/-moz-image-rect or http://www.w3.org/2008/WebVideo/Fragments/WD-media-fragments-spec/#naming-space (I much prefer the mozilla idea).

A sprite image is smaller than the sum of its parts as compression works across all the components of the sprite and you only have 1 set of PNG headers. A sprite image will be smaller than a set of base64 urls.

I'm an advocate of building sprite images manually, automated tools tend to create more images than needed and don't get the most out of compression. A major drawback of this is when working with others & version control. If 2 people are on feature branches and each add to the sprite, it won't merge. You don't get this problem with base64.

Personally, I use a sprite image except for images that need to tile. For tiling backgrounds that are only a few bytes I use base64 with a fallback url for IE6/7.

I strongly recommend running sprite images though http://pornel.net/imagealpha then http://imageoptim.pornel.net/ to get the most out of compression. And of course, use http://www.spritecow.com/ to get the positions and dimensions of the sprite components :)
Shared publiclyView activity