When to consider base64 (DATA: URI) images?

Question

What are the factors that should trigger thinking about switching images over to Base64 embedded in CSS?

There seems to be a lot of generic pro/con type things out there

Answer 1

Are there are key factors I should be looking for (both pro/con)?

The biggest con is the missing support in IE6/7, and the incomplete support in IE8 (data: URIs must not be larger than 32 kilobytes there).

Using CSS sprites is the vastly superior technique in this case.

Answer 2

There are two different issues here:

1) base 64. Well there's no advantage here. The files are fatter than binary and are less likely to be cached. Resources should be in external files so they can be cached.

2) Sprites. CSS sprites are a technique where a single image is used instead of multiple ones. Portions of the image are "revealed" via CSS. These are more efficient because the number of network requests are greatly reduced. It's worth it.

Answer 3

When you can use css-sprites, that's definitely better.

One particular case in which I prefer base64 DATA URI is when we have a small image file which will be used as background with repeat-x or repeat-y. Since repeat doesn't play well with css-sprites, you need to use a single image as a source. In this case, I find that using the base64 version is a better alternative which saves you a request to your web server.