Introduction to Base64 Algorithm

Welcome to our series on Base64 encoding! In this post, we'll explore the basics of Base64 - a method used to encode binary data into a text format. Let's get started.

Prerequisites

Before we dive into Base64 encoding, it's helpful to have a basic understanding of the following concepts.

Understanding Base64 Encoding

Base64 is an encoding algorithm that converts binary data into a text format. It's designed to allow binary data to be safely transmitted over channels that only support text, such as email systems, certain network protocols, and legacy data storage systems. These text-only channels typically handle ASCII characters well but may have issues with binary data. Base64 encoding ensures that binary information can be reliably transmitted through these text-based systems. Let's dive into how it works.

The Base64 Character Set

Base64 uses a set of 64 characters to represent binary data in a text format:

• A-Z (26 characters)
• a-z (26 characters)
• 0-9 (10 characters)
• '+' and '/' (2 characters)

Additionally, '=' is used for padding.

Here is the complete Base64 index table:

How Base64 Encoding Works

Base64 encoding works by converting binary data into a series of 6-bit numbers, which are then represented using the 64-character set. Here's a step-by-step breakdown of the process:

1. Group binary data: The input binary data is divided into groups of 24 bits (3 bytes).
2. Split into 6-bit chunks: Each 24-bit group is then split into four 6-bit chunks.
3. Convert to decimal: Each 6-bit chunk is converted to its decimal equivalent (0-63).
4. Map to Base64 characters: The decimal values are used as indices to select characters from the Base64 character set.

Padding

If the input data's length is not a multiple of 3 bytes, padding is added:

• If there's 1 byte left, it's padded with two '=' characters.
• If there are 2 bytes left, it's padded with one '=' character.

Example of Base64 Encoding

Let's consider the name "Ratan Tata" as an example to demonstrate Base64 encoding:

1. Convert the text "Ratan Tata" to binary (ASCII):

'R' (ASCII) = 82 (decimal) = 01010010 (binary)
To convert 82 to binary:
82 ÷ 2 = 41 remainder 0, 41 ÷ 2 = 20 remainder 1, 20 ÷ 2 = 10 remainder 0, 10 ÷ 2 = 5 remainder 0, 5 ÷ 2 = 2 remainder 1, 2 ÷ 2 = 1 remainder 0, 1 ÷ 2 = 0 remainder 1
Reading remainders from bottom to top: 01010010

R (82):  01010010
a (97):  01100001
t (116): 01110100
a (97):  01100001
n (110): 01101110
  (32):  00100000  // Space between "Ratan" and "Tata"
T (84):  01010100
a (97):  01100001
t (116): 01110100
a (97):  01100001

Each character is converted to its ASCII value, then to binary:

• 'R' has ASCII value 82, which is 01010010 in binary
• 'a' has ASCII value 97, which is 01100001 in binary
• 't' has ASCII value 116, which is 01110100 in binary
• 'n' has ASCII value 110, which is 01101110 in binary
• ' ' has ASCII value 32, which is 00100000 in binary
• and so on for the remaining characters...

2. Group into 24 bits:

   010100100110000101110100 011000010110111000100000 010101000110000101110100 011000010000000000000000
   

   We concatenate all the binary values and group them into sets of 24 bits (3 bytes):

   • First group: 010100100110000101110100 (complete 24 bits)
   • Second group: 011000010110111000100000 (complete 24 bits)
   • Third group: 010101000110000101110100 (complete 24 bits)
   • Fourth group: 011000010000000000000000 (complete 24 bits, with padding)

3. Split into 6-bit chunks:

   010100 100110 000101 110100 011000 010110 111000 100000 010101 000110 000101 110100 011000 010000 000000 000000
   

   We divide each 24-bit group into four 6-bit chunks:

   • From first group: 010100, 100110, 000101, 110100
   • From second group: 011000, 010110, 111000, 100000
   • From third group: 010101, 000110, 000101, 110100
   • From fourth group: 011000, 010000, 000000, 000000

4. Convert to decimal:

010100 (binary) = (02^5) + (12^4) + (02^3) + (12^2) + (02^1) + (02^0) = 20 (decimal)

20 38 5 52 24 22 56 32 21 6 5 52 24 16 0 0

Each 6-bit chunk is converted to its decimal equivalent following the same process:

• 011000 (binary) = 24 (decimal)
• 010110 (binary) = 22 (decimal)
• 111000 (binary) = 56 (decimal)
• 100000 (binary) = 32 (decimal)
• and so on for the remaining binary chunks...

5. Map to Base64 characters:

   U m F 0 Y W 4 g V G F 0 Y Q = =
   

   Using the Base64 index table, we map each decimal value to its corresponding Base64 character:

   • 20 maps to 'U' (Upper case 'U')
   • 38 maps to 'm' (Lower case 'm')
   • 5 maps to 'F' (Upper case 'F')
   • 52 maps to '0' (Zero) And so on for the remaining mappings: Y, W, 4, g, V, G, F, 0, Y, Q, A, A

6. Add padding (if necessary): In this case, we need padding because the input length (10 bytes) results in 80 bits, which doesn't divide evenly into 6-bit chunks. We have 4 bits left over, so we need to add two '=' characters for padding.

Therefore, the final Base64 encoding of "Ratan Tata" (including the space) is "UmF0YW4gVGF0YQ==".

This process ensures that any binary data can be represented using only the 64 characters in the Base64 character set, making it safe for transmission through text-based systems that might not handle binary data well.

Base64 Decoding

While we've focused on encoding so far, let us now explore briefly the reverse operation to convert our Base64-encoded text back into its original binary form ( and to our intial text).

Decoding Process

1. Remove Padding: First, any '=' characters at the end of the encoded string are removed.

2. Reverse Character Mapping: Each Base64 character is mapped back to its 6-bit value.

3. Combine Bits: The 6-bit values are combined into a continuous stream of bits.

4. Group into Bytes: The bit stream is grouped into 8-bit chunks (bytes).

5. Convert to Original Data: These bytes are then converted back to their original form (ASCII characters, binary data, etc.).

We've now explored both the encoding and decoding processes of Base64, understanding how binary data can be converted to text and back again. This bidirectional conversion is crucial for many applications in data transmission and storage. Let's now take a closer look at some of these practical applications.

Applications

• Email Attachments: Converts binary files (including images, documents, and other attachments) to text for email transmission. This is typically done when the email system doesn't support direct binary attachments or to ensure compatibility across different email clients.
• Web Images: Embeds small images directly in HTML as text strings.
• API Responses: Sends binary data (e.g., images) as text in API responses.
• URL Encoding: Safely includes complex data in URLs by converting it to text.

Considerations

• File Size: Base64 encoding increases file size by about 33%.
• Caching: Base64-encoded resources can't be cached separately by browsers, potentially affecting load times.
• SEO Impact: Search engines may not index Base64-encoded images, affecting image search visibility.

Conclusion

In this post, we've explored the fundamentals of Base64 encoding, including its process, applications, and considerations. We've learned how this technique transforms binary data into a text format, making it crucial for various data transmission and storage scenarios in the digital world.

In our next post, we'll explore how Base64 encoding is applied in creating GLS shipment labels, providing a practical example of this encoding technique in action. We'll be referring to the GLS ShipIT API documentation¹ for this demonstration.