So this is where we need a new ‘Site Performance’ section 
I’m wondering if anyone has any opinions on the pros/cons of using Base64 encoding of background images in CSS.
I like the way that it reduces the number of HTTP requests, however it does push-out the size of the CSS file.
After trialing it for the last week or so I haven’t encountered any browser related issues.
Thoughts? Opinions?
yep - I use those too - and then base64 encode them 
Something base 64 encoded is always 4/3 the size of the original (plus any extra code that is required to identify it as base 64 encoded).
So a 9k image will take up at least 12k once encoded.
Thanks guys,
I have FF, Chrome, Safari, Opera but no IE…
icon sprites …
It really depends on just how big the original image is - you wouldn’t want to take a 15k image and make it 20k of base64 instead as the extra 5k isn’t worth the one less file request. Well worth it for images that are only one or two k in the first place though.
It’s an interesting idea, though surely the overhead from the Base64 encoding could be more than made up for if you have compression turned on (like GZIP)? The savings in bandwidth as a result of the compression would surely not only compensate for the encoding factor, but potentially leave the image at a smaller size than in an external form? Or perhaps I’m just being overly optimistic as to how effective the compression would be!
The only benefit, as I see it, is reducing the number of HTTP requests which is where you mitigate latency issues.
The downsize is increasing the total image size, but this seems to be mostly offset when you serve the CSS file GZIP’ed and properly cached.
You can see the results (after): http://www.webpagetest.org/result/100910_4P2F/
Yes… the argument for using it is that downloading a little extra kb is better than requesting a whole new handshake… like putting * html IE hax in your CSS sheet instead of making IE users request another sheet just for them, even though it means all browsers are now downloading more kbs in total.
I ran into this page via google a short while back as I was hoping to find some other way of adding image content using content property of CSS. Since I’m not writing all that base 64 stuff I gave up, but the article does mention a small issue in IE.
You can get a little more information here also with a workaround for IE7.
http://www.stevesouders.com/blog/2009/10/05/aptimize-realtime-spriting-and-more/