Menu
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?
262
A data URI is a base64 encoded string that represents a file. Getting the contents of a file as a string means that you can directly embed the data within your HTML or CSS code. When the browser encounters a data URI in your code, it's able to decode the data and construct the original file.
The issues are actually not only limited to performance. By using Base64 encoded images on your website, you might also be hurting both your SEO and user experience as well. The reason for this is that sharing Base64 images is much harder due to the fact that they are not actually accessible via a public URL.
Introduction. A Data URL is a URI scheme that provides a way to inline data in an HTML document. Say you want to embed a small image. You could go the usual way, upload it to a folder and use the img tag to make the browser reference it from the network: <img src="image.png" />
Base64 is a group of binary-to-text encoding schemes that represent binary data in an ASCII string format by translating it into a radix-64 representation. By consisting only of ASCII characters, base64 strings are generally url-safe, and that's why they can be used to encode data in Data URLs.
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.
160
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
