Advantages and disadvantages of using base64 encoded images

Question

I am thinking of using base64 encoded images for a site I am working on to optimize the load time.

Anyways, before I start, I was wondering: what are the advantages

Answer 1

It's only useful for very tiny images. Base64 encoded files are larger than the original. The advantage lies in not having to open another connection and make a HTTP request to the server for the image. This benefit is lost very quickly so there's only an advantage for large numbers of very tiny individual images.

Answer 2

the actual length of MIME-compliant Base64-encoded binary data is usually about 137% of the original data length, though for very short messages the overhead can be much higher due to the overhead of the headers. Very roughly, the final size of Base64-encoded binary data is equal to 1.37 times the original data size + 814 bytes (for headers).

In other words, the size of the decoded data can be approximated with this formula:

bytes = (string_length(encoded_string) - 814) / 1.37

Source: http://en.wikipedia.org/wiki/Base64#MIME

Answer 3

Some of downsides as below are already mentioned in this post at How much faster is it to use inline/base64 images for a web site than just linking to the hard file?

• Most forms of caching are beaten which could hurt a lot if the image is viewed often - say, a logo that is displayed on every page, which could normally be cached by the browser.
• More CPU usage.

Answer 4

also the response time of the HTML page will increase, because images loads asyn in normal scenario. even if images loads late you can start seeing text.

Another advantage of CDN would lost if only media is being cached in CDN

that advantage will be lost.