What is the effect of encoding an image in base64?

Question

If I convert an image (jpg or png) to base64, then will it be bigger, or will it have the same size? How much greater will it be?

Is it recommended to use base64 encoded images on my website?

Condescending

The only time you would want to do something like that is if you were restricted to plain text resources, and couldn't use a raw image format for some reason. – Hammers

There is a good answer here: #1533613 – Jacquejacquelin

base64 makes deeplinks impossible. This can be a plus. – Facia

@Hammers - Know this is far of a late reply and that things have changed but it definately are times where you can achieve performance boosts by sending bas64. Sending messages through websockets with base64 encoded images (small ones) would be more performant than requesting each image by its own. – Comp

It's a good question. I was looking for a good answer for "save binary images or base64 encoded?" and I found several good answers like this one – Wispy

Answer 1

It will be approximately 37% larger:

Very roughly, the final size of Base64-encoded binary data is equal to 1.37 times the original data size

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

Pilar

No not 137% larger, 137% of the original size :-) 37% larger (according to your source). – Ichthyosis

I would say that is pretty much 4/3 of the original size. – Fouts

Is there any limitation for image size to convert image to base64 ? – Dodecahedron

@Pilar But in my case when i convert a 70kb bitmap to string its becoming 500kb.Its not 37%.I have compressed a 5mb image to 70kb and then convert that compressed image to string that become 500kb. – Defraud

@KJEjava48: How are you converting it to a string? – Pilar

@Pilar Here it is #43487788 What's wrong in my conversion that i showed there??Pls help me if u can... – Defraud

That's worng argument of base64, best64 best way to manage upload and most secured way. as well professional or expert prefer that, only thing it large in size, that need to reduce size or compress it. Example github.com/nodeca/pako, Or even manage to uplaod in chunk. – Banjo

it depends if it's base64 or base64+MIME. MIME (email) requres frequent line breaks - this will in creste the size past the initial 1/3 bigger from the 8bit to 6bit conversion. – Midsection

Answer 2

It will be bigger in base64.

Base64 uses 6 bits per byte to encode data, whereas binary uses 8 bits per byte. Also, there is a little padding overhead with Base64. Not all bits are used with Base64 because it was developed in the first place to encode binary data on systems that can only correctly process non-binary data.

That means that the encoded image will be around 33%-36% larger (33% from not using 2 of the bits per byte, plus possible padding accounting for the remaining 3%).

Ichthyosis

8/6 is 1.333, not 1.25. As pointed out by the other answers here, 1.25 is not correct – Palaestra

@Palaestra Yep, corrected it. I did comment to that effect on the accepted answer and should have double-checked my own. – Ichthyosis

Answer 3

Here's a really helpful overview of when to base64 encode and when not to by David Calhoun.

Basic answer = gzipped base64 encoded files will be roughly comparable in file size to standard binary (jpg/png). Gzip'd binary files will have a smaller file size.

Takeaway = There's some advantage to encoding and gzipping your UI icons, etc, but unwise to do this for larger images.

Salivation

Answer 4

The answer is: It depends.

Although base64-images are larger, there a few conditions where base64 is the better choice.

Size of base64-images

Base64 uses 64 different characters and this is 2^6. So base64 stores 6bit per 8bit character. So the proportion is 6/8 from unconverted data to base64 data. This is no exact calculation, but a rough estimate.

Example:

An 48kb image needs around 64kb as base64 converted image.

Calculation: (48 / 6) * 8 = 64

Simple CLI calculator on Linux systems:

$ cat /dev/urandom|head -c 48000|base64|wc -c
64843

Or using an image:

$ cat my.png|base64|wc -c

Base64-images and websites

This question is much more difficult to answer. Generally speaking, as larger the image as less sense using base64. But consider the following points:

• A lot of embedded images in an HTML-File or CSS-File can have similar strings. For PNGs you often find repeated "A" chars. Using gzip (sometimes called "deflate"), there might be even a win on size. But it depends on image content.
• Request overhead of HTTP1.1: Especially with a lot of cookies you can easily have a few kilobytes overhead per request. Embedding base64 images might save bandwith.
• Do not base64 encode SVG images, because gzip is more effective on XML than on base64.
• Programming: On dynamically generated images it is easier to deliver them in one request as to coordinate two dependent requests.
• Deeplinks: If you want to prevent downloading the image, it is a little bit trickier to extract an image from an HTML page.

Favrot

Answer 5

Encoding an image to base64 will make it about 30% bigger.

See the details in the wikipedia article about the Data URI scheme, where it states:

Base64-encoded data URIs are 1/3 larger in size than their binary equivalent. (However, this overhead is reduced to 2-3% if the HTTP server compresses the response using gzip)

Dendro

Answer 6

It will definitely cost you more space & bandwidth if you want to use base64 encoded images. However if your site has a lot of small images you can decrease the page loading time by encoding your images to base64 and placing them into html. In this way, the client browser wont need to make a lot of connections to the images, but will have them in html.

Generation

This will however not be a problem once HTTP 2 really comes through. – Comp

@Comp That's true, but I do like the portability factor in having all resources contained in the HTML file. That will help with mobile web caching in areas with spotty networks. – Pompea

@Pompea The problem with that is if you do one change on the page, then you need to reload all content including images. Where if you have the assets separated you can have an higher age on those and it will be stored in cache and not reloaded on cache expire on the page it self. – Comp

Answer 7

To convert to base64 simply means:

Parse binary data, read it in chunks of 6 bits and then convert it to some representation

Note: Everything is just binary data. All the strings, numbers, etc are just binary data sitting in your memory. How you read it and what do you map that reading to is all we do.

This sequence of 6 bits have a representation standard ( as shown below ), defined by Base64

If the incoming stream is 000000 -> A, ​000001 -> B, and so on.

Now the representation of the character itself takes 8 bits. Therefore your data size has increased to 4/3 of the original value since you now take 2 more bits per character.

Inartistic