When to consider base64 images (DATA: URI)?

Question

What are the factors that should trigger the thought of switching images to Base64 embedded in CSS?

There seem to be many common pro / con types. Wikipedia has a decent review: http://en.wikipedia.org/wiki/Data_URI_scheme#Advantages

From what I read, one of the factors that seems to make base64 a simple solution would be if your site had access to a lot of individual small images and one large file would be more efficient to hit server 50 times for each individual image.

But ... it also seems that with sprites and the fact that I rarely need 50 separate images per page, Base64 does not offer much in common for common websites.

Are there any key factors I should look for (like pro / con)?

(This may be better than posting to a community wiki, not a question)

UPDATE:

Perhaps a shorter way to formulate the question:

Given these two parameters:

1) All images converted to base64 and embedded in an external css file

2) Images assembled into multiple sprite images referenced by an external css file

Are there obvious situations when one is better than the other, or is it really simple in each case, do both the type of test?

Answer 1

Are there any key factors I should look for (like pro / con)?

The biggest problem is the lack of support in IE6 / 7, and the incomplete support in IE8 ( data: URI should not exceed 32 kilobytes).

Using CSS sprites is an extremely superior method in this case.

Answer 2

There are two different questions here:

1) base 64. There is no advantage here. Files are thicker than binary files and are less likely to be cached. Resources must be in external files so that they can be cached.

2) Sprites. CSS sprites are a method in which one image is used instead of several. Parts of the image are expanded through CSS. They are more efficient because the number of network requests is significantly reduced. It's worth it.

Answer 3

When you can use css sprites, this is definitely better.

One specific case when I prefer the base64 database URI is when we have a small image file that will be used as background with repeat-x or repeat-y. Since repeat does not work very well with css sprites, you need to use a single image as a source. In this case, I believe that using the base64 version is the best alternative that saves your request to your web server.