Everything you need to know about Base64

Dive deep into the world of Base64 encoding. Learn its history, how it works, when to use it, and its limitations. Essential knowledge for every developer dealing with data encoding and transmission.

---

In the world of software development, Base64 is a concept often mentioned but not always fully understood. Whether you're a newcomer to the field or an experienced developer, a deep understanding of Base64 can help you handle data encoding and transmission with ease. Let's explore all aspects of Base64, from its definition and origins to practical applications and usage considerations.

What is Base64?

Base64 is an encoding method that represents binary data using 64 printable characters. These 64 characters include:

• A-Z, a-z, 0-9 (62 letters and numbers)
• + and / (2 special characters)
• = (used for padding)

In our daily development work, Base64 is ubiquitous. You may have encountered it in the following scenarios:

• Embedding small images or icons in HTML
• Transmitting binary data in API responses
• Encoding email attachments

For example, you might have seen HTML code like this:

<img
  src="data:image/png;base64,data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="
  alt="Red dot"
/>

The long string here is a small image encoded in Base64.

Why Base64?

To understand the reason for Base64's existence, we need to look back at the early history of computer development.

In the early days of computer networks, most systems could only handle printable ASCII characters. ASCII encoding uses only 7 bits of binary data, representing 128 characters. This works fine for handling English text, but problems arise when transmitting binary data (such as images or audio files).

Different systems might interpret certain control characters differently, potentially corrupting data during transmission. For example, some systems might change line breaks from LF (Line Feed) to CR (Carriage Return) + LF, which would be disastrous for binary data.

To solve this problem, people began looking for a way to convert arbitrary binary data into characters that could be safely transmitted. This is where Base64 encoding came from.

In fact, before Base64, there were Base16 (using 16 characters) and Base32 (using 32 characters) encoding methods. However, Base64 struck the best balance between encoding efficiency and practicality, making it the most widely used encoding method.

How Base64 encoding works

The core idea of Base64 is to encode 3 bytes (24 bits) of binary data into 4 printable characters.

Let's understand this process through a concrete example.

Suppose we want to encode the string "Logto":

1. First, we convert "Logto" to ASCII code:
   • L: 76 (01001100)
   • o: 111 (01101111)
   • g: 103 (01100111)
   • t: 116 (01110100)
   • o: 111 (01101111)
2. We concatenate these binary numbers (total of 5 bytes, 40 bits): 0100110001101111011001110111010001101111
3. We divide these bits into groups of 6 bits (note that the last group only has 4 bits): 010011 | 000110 | 111101 | 100111 | 011101 | 000110 | 1111
4. Since the last group only has 4 bits, we need to add two 0s at the end to make it 6 bits: 010011 | 000110 | 111101 | 100111 | 011101 | 000110 | 111100
5. We convert each 6-bit group to decimal: 19 | 6 | 61 | 39 | 29 | 6 | 60
6. According to the Base64 encoding table, we convert these numbers to their corresponding characters: T | G | 9 | n | d | G | 8
7. Finally, because Base64 encoding always encodes 3 bytes (24 bits) of binary data into 4 printable characters, and "Logto" converts to 5 bytes in binary, the first 3 bytes are encoded as TG9n, and the last 2 bytes are encoded as dG8. Therefore, we need to add one = as a padding character at the end.

Thus, the Base64 encoding result of "Logto" is TG9ndG8=.

In Node.js, we can generate Base64 encoding like this:

const text = 'Logto';
const base64 = Buffer.from(text).toString('base64');
console.log(base64); // Output: TG9ndG8=

This example demonstrates several important features of Base64 encoding:

• Every 3 bytes of input produces 4 characters of output.
• When the number of input bytes is not a multiple of 3, padding characters "=" are used. In this example, we have 5 input bytes, which produces 7 Base64 characters and 1 padding character.
• The number of padding characters can tell us the exact number of bytes in the original data:
  • No padding: The original data is a multiple of 3 bytes
  • 1 =: 2 zero bits were added to the original data before encoding
  • 2 =: 4 zero bits were added to the original data before encoding

When and why to use Base64

Base64 is particularly useful in the following scenarios:

1. Embedding small binary data (such as small images or icons) in HTML
2. Transmitting binary data in protocols that can only transmit text
3. Transmitting data in systems with restrictions on special characters
4. Simple data obfuscation (Note: This is not encryption!)

The main advantages of using Base64 are:

• Good cross-platform compatibility: Base64 encoded data can be correctly parsed in any system that supports ASCII
• Can improve transmission efficiency in some cases: For example, when the transmitted data contains a large number of repeating binary patterns

Besides standard Base64, there are some variants worth knowing:

• URL-safe Base64: Replace + with -, / with _, and remove =. This encoding can be used directly in URLs without additional encoding.

const base64 = 'TG9ndG8=';
const urlSafe = base64.replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, '');
console.log(urlSafe);

Limitations and considerations of Base64

Although Base64 is useful, it also has some limitations:

1. Data inflation: Base64 encoding increases data volume by about 33%. For large amounts of data, this can lead to significant storage and bandwidth overhead.
2. Performance impact: The encoding and decoding process requires CPU time. For large amounts of data or high-frequency operations, this can become a performance bottleneck.
3. Security misconceptions: Many people mistakenly believe that Base64 is a form of encryption. In fact, Base64 is just encoding and can be easily decoded. Don't use it to protect sensitive information!
4. Readability: Base64 encoded data is not human-readable. This can make debugging difficult.

When using Base64 in large applications, consider the following optimization strategies:

• Only Base64 encode necessary data
• Consider using specialized Base64 encoding/decoding libraries, which are often more efficient than general-purpose libraries
• Perform Base64 encoding/decoding on the client side to reduce server load

Conclusion

Base64 is a simple yet powerful tool that can solve many problems when used in the right scenarios. Understanding its working principle, applicable scenarios, and limitations can help you make smarter decisions in software development. I hope this article has helped you gain a comprehensive understanding of Base64, enabling you to handle related issues with ease.

Remember, like all technical tools, the key is to use Base64 at the right time and in the right place. Wishing you all the best on your programming journey!

Try Logto Cloud for free

Comments

[Jance Jacobs]

This was really informative! I’ve always seen Base64 being used with images in HTML but didn’t fully grasp how it worked. Just curious, do you think the data inflation issue is a significant drawback in most real-world applications?