Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Advantages and disadvantages of using base64 encoded images

Tags:

html

image

base64

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 and disadvantages of doing this?

At the moment, I don't see any disadvantage but also I noticed that it is not a technique used very often and that makes me wonder if I didn't miss something.

After googleing the subject I didn't find anything clear so I decided to ask here.

like image 384
zozo Avatar asked Jul 31 '12 08:07

zozo


People also ask

What is the advantage of Base64 encoding?

Base64 encoding schemes are commonly used when there is a need to encode binary data that needs to be stored and transferred over media that are designed to deal with ASCII. This is to ensure that the data remain intact without modification during transport.

What are the drawbacks of using Base64 encoding?

The only downside is that base64 encoding will require around 33% more space than regular strings. So with base64 you can encode and transfer any sets of binary data through any system and then decode them to original binary data.

Is Base64 good for images?

Base64 is only useful for very small images. This is because when it comes to larger images, the encoded size of a picture in bytes will end up being much larger than JPEGs or PNG files. This can result in slow page load times and an increased amount of bandwidth usage for your site.

Why is Base64 used for images?

Advantages of Base64 images:Removes separate HTTP Requests for image loading by wrapping encoded image code inside css or HTML. Image encoded data can be saved inside database and can generate image file. Just incase we lost image file copy.


2 Answers

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.

like image 168
PhonicUK Avatar answered Sep 16 '22 13:09

PhonicUK


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

like image 42
vimist Avatar answered Sep 20 '22 13:09

vimist