What Is the Effect of Encoding an Image in Base64

What is the effect of encoding an image in base64?

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

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.

What is the ratio between an image size and the length of its base64 string conversion?

As already stated in comments, there's no way of giving an exact number as it's depending on how the data is packed. It will however be larger than the source file. A ballpark figure is around 270 000 characters.

An easy way to check this is to upload a few images to an online converting service such as https://www.base64-image.de/

At what point is requesting an image file faster than base64 encoding it inline?

It'll always be faster rendering an inline base64 encoded string. A network request will always take longer than the CPU processing it takes to decode a base64 string. The question you should ask yourself is around the tradeoff of when you want to download the bytes: in the payload of the HTML or later in the payload of separate HTTP request. The more you add to the HTML, the longer your page load time will be. The benefit of downloading the image instead of inlining it is if you don't need it to display right away, you can defer it through an asynchronous fetch.

So ask yourself if it's more important to show the image ASAP or is it more important for the page to be ready to use sooner without the image? Same tradeoff discussion for inlining in CSS as well.

Storing image in database directly or as base64 data?

  • Pro base64: the encoded representation you handle is a pretty safe string. It contains neither control chars nor quotes. The latter point helps against SQL injection attempts. I wouldn't expect any problem to just add the value to a "hand coded" SQL query string.

  • Pro BLOB: the database manager software knows what type of data it has to expect. It can optimize for that. If you'd store base64 in a TEXT field it might try to build some index or other data structure for it, which would be really nice and useful for "real" text data but pointless and a waste of time and space for image data. And it is the smaller, as in number of bytes, representation.

Why Base64 is used only to encode binary data?

There's two reasons why Base64 is used:

  1. systems that are not 8-bit clean. This stems from "the before time" where some systems took ASCII seriously and only ever considered (and transferred) 7bits out of any 8bit byte (since ASCII uses only 7 bits, that would be "fine", as long as all content was actually ASCII).
  2. systems that are 8-bit clean, but try to decode the data using a specific encoding (i.e. they assume it's well-formed text).

Both of these would have similar effects when transferring binary (i.e. non-text) data over it: they would try to interpret the binary data as textual data in a character encoding that obviously doesn't make sense (since there is no character encoding in binary data) and as a consequence modify the data in an un-fixable way.

Base64 solves both of these in a fairly neat way: it maps all possible binary data streams into valid ASCII text: the 8th bit is never set on Base64-encoded data, because only regular old ASCII characters are used.

This pretty much solves the second problem as well, since most commonly used character encodings (with the notable exception of UTF-16 and UCS-2, among a few lesser-used ones) are ASCII compatible, which means: all valid ASCII streams happen to also be valid streams in most common encodings and represent the same characters (examples of these encodings are the ISO-8859-* family, UTF-8 and most Windows codepages).

As to your second question, the answer is two-fold:

  1. textual data often comes with some kind of meta-data (either a HTTP header or a meta-tag inside the data) that describes the encoding to be used to interpret it. Systems built to handle this kind of data understand and either tolerate or interpret those tags.
  2. in some cases (notably for mail transport) we do have to use various encoding techniques to ensure text doesn't get mangles. This might be the use of quoted-printable encoding or sometimes even wrapping text data in Base64.

Last but not least: Base64 has a serious drawback and that's that it's inefficient. For every 3 bytes of data to encode, it produces 4 bytes of output, thus increasing the size of the data by ~33%. That's why it should be avoided when it's not necessary.

Image quality changes while encoding/decoding image to base64 string

Each jpeg encoding operation will decrease the image quality, so you want to keep the number of encoding operations to a minimum.

Here is a naive way of looking at things: The result of encoding an image I is encode(I) -> I + δ where δ are compression artifacts. If you now encode this again, you will do this: encode(I + δ) : you waste time and space encoding compression artifacts.

Solution: When you display the image, also keep a copy of the encoded base64 string around. When the image is selected, just transfer this string. Don't reencode the image.



Related Topics



Leave a reply



Submit