Advantages and Disadvantages of Using Base64 Encoded Images

Advantages and disadvantages of using base64 encoded images

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.

Is it safe to use base64 encoded images for web, Advantages and Disadvantages?

A base64 stream is about 33% heavier than a binary one (not taking into account the gzip compression over http that you have in place if you're serious about performances).

If you put the base64 image directly in a page, it won't be cached separately. So it will be heavy for all pages using this image instead of being cachable with URL as key. You may think that it helps keeping the request number low but in fact it's useless in normal cases where users have yet the images in their cache (if you have many images, prefer css sprites to lower the number of requests).

I don't think there is a reason to use a base64 image except for when addressing a specific technical issue, like sending an image in json, or saving only one html file - and then check you really need to use the base64 image.

What is the advantage of using Base64 encoding?

Originally some protocols only allowed 7 bit, and sometimes only 6 bit, data.

Base64 allows one to encode 8 bit data into 6 bits for transmission on those types of links.

Email is an example of this.

What are the drawbacks of base64 encoding data?

The base64 encoded data is about 33% larger than the raw data.

Another effect is that you are bundling several pieces of data together into larger chunks. Sometimes this is a positive effect, sometimes negative. Requesting fewer resources is positive, but only if the resources have the same caching status. If you for example bundle an image in an HTML page, the image can't be cached separately as it has to be fetched every time the HTML page is fetched.

Why do I see websites using (really long) base 64 pictures in their HTML?

One advantage of data URLs is that the resulting image is available immediately without another round trip to the server. Some disadvantages of this method are that your image is not cached, and for larger images the encoded url can become quite long.

Source: MDN - Using Images

Base 64 encode vs loading an image file

Well I don't agree with anyone of you. There are cases when you've to load more and more images. Not all the pages contain 3 images at all. Actually I'm working on a site where you've to load more than 200 images. What happens when 100000 users request that 200 images on a very loaded site. The disks of the server, returning the images should collapse. Even worse you've to make so much request to the server instead of one with base64. For so much thumbnails I'd prefer the base64 representation, pre-saved in the database. I found the solution and a strong argumentation at http://www.stoimen.com/2009/04/23/when-you-should-use-base64-for-images/. The guy is really in that case and made some tests. I was impressed and make my tests as well. The reality is like it says. For so much images loaded in one page the one response from the server is really helpful.

Is embedding background image data into CSS as Base64 good or bad practice?

It's not a good idea when you want your images and style information to be cached separately. Also if you encode a large image or a significant number of images in to your css file it will take the browser longer to download the file leaving your site without any of the style information until the download completes. For small images that you don't intend on changing often if ever it is a fine solution.

as far as generating the base64 encoding:

• http://b64.io/
• http://www.motobit.com/util/base64-decoder-encoder.asp (upload)
• http://www.greywyvern.com/code/php/binary2base64 (from link with little tutorials underneath)

---

Related Topics