Base64 encoded image size

Question

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

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

Answer 1

It will be approximately 37% more:

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

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

Answer 2

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

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

Takeaway = There are some advantages to coding and gzipping your user interface icons, etc., but it is not wise to do this for large images.

Answer 3

It will be more in base64.

Base64 uses 6 bits per byte to encode data, while binary uses 8 bits per byte. In addition, Base64 has a small premium. Not all bits are used with Base64 because it was designed primarily for encoding binary data in systems that can correctly process non-binary data.

This means that the encoded image will be approximately 25% larger, plus constant overhead to fill.

Answer 4

Encoding an image on base64 will make it about 30% larger.

See the wikipedia article on the data URI scheme for details :

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

Answer 5

Base64 image size

Base64 uses 64 different characters, and that is 2 ^ 6. Thus, base64 stores 6 bits per 8-bit character. Thus, the proportion is 6/8 of the raw data to the base64 data. This is not an accurate calculation, but a rough estimate.

Example:

An image size of 48 KB requires about 64 KB as an image with base64 conversion.

Calculation: (48/6) * 8 = 64

A simple CLI calculator for Linux systems:

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

Or using the image:

 $ cat my.png|base64|wc -c 

base64 images and websites

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

• Many embedded images in an HTML file or CSS file may have similar lines. For PNG, you will often find duplicate "A" characters. Using gzip (sometimes called "deflate"), there may even be a size gain. But it depends on the content of the image.
• Request HTTP1.1 overhead: especially with lots of cookies, you can easily get a few kilobytes of overhead on request. Attaching base64 images can save bandwidth.
• Do not encode base64 SVG images because gzip is more efficient in XML than in base64.
• Programming. On dynamically generated images, it is easier to deliver them on a single request to coordinate two dependent requests.
• Deeplinks: If you want to prevent the image from loading, it’s a little harder to extract the image from the HTML page.

So the answer is: it depends.

Answer 6

It will cost you more space and bandwidth if you want to use base64 encoded images. However, if your site has a lot of small images, you can reduce the page load time by encoding the images on base64 and placing them in html. Thus, the client browser will not need to make many connections to images, but will have them in html.