What Is Base64 Encoding? Simple Explanation with Worked Bitwise Examples

Why Base64 Exists: The ASCII Transmission Problem

In the early days of computing, internet protocols (such as SMTP for email and early HTTP) were engineered exclusively to transmit 7-bit ASCII English text characters.

When engineers attempted to send raw binary files (such as JPEG images, audio files, or compiled binaries) over these legacy channels, mail servers and routers would corrupt the data by modifying control characters, line endings, or null bytes (0x00).

Base64 was invented under RFC 4648 to solve this dilemma: it safely encodes arbitrary binary data using only 64 universal printable ASCII characters that can pass through any network protocol or firewall without corruption.

How Base64 Works: The 24-Bit to 6-Bit Split

Base64 groups binary data into chunks of 3 bytes (24 bits total). It then divides those 24 bits into 4 groups of 6 bits each.

Because 2^6 = 64, each 6-bit group corresponds directly to an index between 0 and 63 in the Base64 alphabet:

• Indices 0–25 map to uppercase letters: A–Z
• Indices 26–51 map to lowercase letters: a–z
• Indices 52–61 map to decimal digits: 0–9
• Index 62 maps to plus symbol (+)
• Index 63 maps to forward slash (/)

Worked Example: Encoding the Word "Zap"

Let us manually trace how the 3-letter word "Zap" converts into Base64 step by step:

The 33% Size Overhead Penalty

Notice that in the example above, 3 input bytes expanded into 4 output characters. Because 4 / 3 = 1.333..., Base64 encoding ALWAYS increases data payload size by approximately 33%.

This is why you should avoid embedding huge multi-megabyte images as inline Base64 data URLs in CSS or HTML, as it inflates file size and impairs browser caching.

Why Do Base64 Strings End with "="?

What happens if your input byte count is not an exact multiple of 3? (For example, 1 byte or 2 bytes).

• If 1 byte is provided (8 bits): The encoder pads 4 zero bits to form two 6-bit blocks, and appends two equals signs ("==") to complete the 4-character quartet.

• If 2 bytes are provided (16 bits): The encoder pads 2 zero bits to form three 6-bit blocks, and appends one equals sign ("=") to finish the quartet.

Common Real-World Use Cases

Developers encounter Base64 continuously in modern web engineering:

• Data URLs: Embedding small SVG or PNG icons directly in HTML (`data:image/png;base64,...`) to avoid extra HTTP requests.
• HTTP Basic Authentication: Credentials are transmitted in HTTP headers as `Authorization: Basic <base64(username:password)>.`
• JSON Web Tokens (JWT): The header and payload of a JWT are Base64URL-encoded JSON objects separated by dots.
• Email Attachments: MIME protocols encode email file attachments in Base64 for bulletproof transit.