Base64 Encoding

by Francis Onyishi

Base64 encoding is a group of binary-to-text encoding schemes that represent binary data in an ASCII string format by translating it into a radix-64 representation.

Common to all binary-to-text encoding schemes, Base64 is designed to carry data stored in binary formats across channels that only reliably support text content such as the hypertext transfer protocol (http).

Base64 is particularly prevalent on the web where its use include the ability to transfer  and embed image files or other binary assets inside textual assets such as HTML and CSS files.

Below is an example of a text converted to base64 encoding

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Base64 encoding of the above text

TG9yZW0gaXBzdW0gZG9sb3Igc2l0IGFtZXQsIGNvbnNlY3RldHVyIGFkaXBpc2NpbmcgZWxpdCwgc2VkIGRvIGVpdXNtb2QgdGVtcG9yIGluY2lkaWR1bnQgdXQgbGFib3JlIGV0IGRvbG9yZSBtYWduYSBhbGlxdWEuIFV0IGVuaW0gYWQgbWluaW0gdmVuaWFtLCBxdWlzIG5vc3RydWQgZXhlcmNpdGF0aW9uIHVsbGFtY28gbGFib3JpcyBuaXNpIHV0IGFsaXF1aXAgZXggZWEgY29tbW9kbyBjb25zZXF1YXQuIER1aXMgYXV0ZSBpcnVyZSBkb2xvciBpbiByZXByZWhlbmRlcml0IGluIHZvbHVwdGF0ZSB2ZWxpdCBlc3NlIGNpbGx1bSBkb2xvcmUgZXUgZnVnaWF0IG51bGxhIHBhcmlhdHVyLg==

You can find the design of the Base64 scheme on this page, for now let's get into some its applications.

Applications 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. Base64 is commonly used in  a number of applications including email via MIME, and storing complex data in XML.

Convert images and media files to Base64 for web transport

The javascript construct readAsDataURL is able to convert a specified Blob or File into a data: URL representing the file's data as a base64 encoded string.
To see a live example visit

Example:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABUoAAAPaCAIAAADOa/W6AAAACXBIWXMAAAsTAAALEwEAmpwYAAAgAElEQVR42uydh18Td+OAf3 .....

Source Maps

According to Source map Proposal, mappings in a source map is the information that allows us to connect a generated file, e.g. script-transpiled.js, to the original source, e.g. script.js. Source map mappings have the following properties:

  • each group representing a line in the generated file is separated by a ”;”
  • each segment is separated by a “,”
  • each segment is made up of 1,4, or 5 variable length fields.

The secret is that if we consider every character of each segment as a Base64 variable length quantity (VLQ ) encoded character, we will end up by having some interesting  mapping information between positions in generated file and original file. Taking the first character from the above source map we have;

Caveats in using Base64

Each Base64 digit represents exactly 6 bits of data. So, three 8-bits bytes of the input string/binary file (3×8 bits = 24 bits) can be represented by four 6-bit Base64 digits (4×6 = 24 bits).

This means that the Base64 version of a string or file will be at most 133% the size of its source (a ~33% increase). The increase may be larger if the encoded data is small. For example, the string "a" with length === 1 gets encoded to "YQ==" with length === 4 — a 300% increase.

In summary, it is always advised that inline processing of base64 like in html and css where it can be passed as src attribute should be avoided for large files