CODEWITHSUNDEEP
cssimagebase64
DA.
DA.

Reputation: 40671

When to consider base64 (DATA: URI) images?

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. Wikipedia seems to have a decent overview: http://en.wikipedia.org/wiki/Data_URI_scheme#Advantages

From what I've read, the one factor that seems to make base64 an easy decision would be if your site has to access a lot of individual small images and having one large file would be more efficient that hitting the server 50 times for each individual image.

But...it also seems that with sprites and the fact that rarely would I need 50 separate images on a page, Base64 isn't offering a whole lot for general web sites.

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

(This may better as a community wiki entry rather than question)

UPDATE:

Perhaps a more succinct way to word the question:

Given these two options:

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

2) Images gathered into a handful of sprite images, referenced in the external css file

Are there obvious situations where one is better than the other, or is it really just a case-by-case, do both and test type of thing?

Upvotes: 7

Views: 3755

Answers (3)

Haluk
Haluk

Reputation: 2099

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.

Upvotes: 0

Pekka
Pekka

Reputation: 449425

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.

Upvotes: 6

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114367

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.

Upvotes: 3

Related Questions