Base64 Encoding Demystified: How It Works & When to Use It

Why Do We Need Base64?

Network protocols such as HTTP, SMTP (email), and JSON were designed primarily to transmit standard printable text characters. When transmitting raw binary data (such as images, cryptographic keys, or compiled bytecode), raw bytes can be corrupted by gateways that interpret specific byte codes as control signals.

Base64 solves this problem by translating arbitrary binary data into a restricted alphabet of 64 safe ASCII characters: `A-Z`, `a-z`, `0-9`, `+`, and `/`.

The 3-Byte to 4-Character Algorithm

Base64 takes every 3 bytes (24 bits) of binary input and divides them into 4 groups of 6 bits each. Each 6-bit chunk maps to a decimal value from 0 to 63, which corresponds directly to an entry in the Base64 index table.

If the input data length is not evenly divisible by 3, padding characters (`=`) are appended to ensure the final output length is a multiple of 4.

Input:   "Man" (ASCII 77, 97, 110)
Binary:  01001101 01100001 01101110
6-bits:  010011 | 010110 | 000101 | 101110
Decimal: 19     | 22     | 5      | 46
Base64:  T      | W      | F      | u
Result:  "TWFu"

Common Web Use Cases

• Data URLs: Embedding small icons or SVGs directly into CSS or HTML (`data:image/png;base64,...`).

• Basic HTTP Authentication headers (`Authorization: Basic dXNlcjpwYXNz`).

• Web Cryptography: Formatting raw cryptographic keys and certificate digests.