How Base64 Encoding Works: 6-Bit Radix Math, Padding Bytes, and URL-Safe Encodings

Why Base64 Exists: The Problem of 7-Bit ASCII Transmission#

Early internet protocols (such as SMTP for email and early Telnet systems) were designed exclusively to handle 7-bit US-ASCII character text (values 0–127). Raw binary files (like executable binaries, PDFs, and JPEG photos) contain 8-bit bytes (values 0–255), including non-printable control characters like null bytes and carriage returns.

Passing raw binary through text-only gateways caused immediate truncation, line-wrap corruptions, and character transformations. Base64 solved this by mapping raw bytes into a safe alphabet of 64 universally printable ASCII characters.

The Mathematical Mechanics: 3 Bytes In, 4 Characters Out#

Base64 groups binary input data into 3-byte blocks (24 total bits). It divides those 24 bits into 4 groups of 6 bits each (since 2^6 = 64). Each 6-bit value (0 to 63) maps directly to a character in the Base64 index table: `A-Z` (0–25), `a-z` (26–51), `0-9` (52–61), `+` (62), and `/` (63).

Input Text:   "Man"
ASCII Hex:    0x4D        0x61        0x6E
Binary (8b):  01001101    01100001    01101110
Total 24 bits: 010011010110000101101110

Split (6b):   010011   010110   000101   101110
Dec Value:    19       22       5        46
Base64 Char:  "T"      "W"      "F"      "u"
Result:       "TWFu"

The Purpose of the "=" Padding Character#

When the input byte stream is not evenly divisible by 3, padding is required at the tail of the encoded output:

• If 1 byte remains (8 bits): The engine pads with 4 zero bits to form two 6-bit chunks and appends two "=" padding characters (e.g. `XX==`).
• If 2 bytes remain (16 bits): The engine pads with 2 zero bits to form three 6-bit chunks and appends one "=" padding character (e.g. `XXX=`).

Standard Base64 vs URL-Safe Base64URL (RFC 4648)#

Standard Base64 includes the characters `+` and `/`, which have special reserved meanings in URLs (where `+` indicates a space and `/` separates paths).

The Base64URL variant (defined in RFC 4648 Section 5) replaces `+` with hyphen `-` and `/` with underscore `_`, and typically omits trailing `=` padding. Base64URL is the mandatory encoding format for JSON Web Tokens (JWT) and URL query parameters.

Data URLs: Embedding Images and Fonts in CSS/HTML#

A Data URL embeds an asset directly into document markup using the syntax `data:[<mediatype>][;base64],<data>`. For micro-assets (like 16x16 pixel tracking pixels or small SVG icons), Data URLs eliminate external HTTP connection overhead.

The 33% Payload Overhead & When NOT to Use Base64#

Because Base64 converts every 3 bytes into 4 ASCII characters, it introduces an inevitable 33.3% increase in raw data size (4/3 = 1.333).

Embedding large images (e.g. 500KB photos) as Base64 inside HTML or CSS files is an anti-pattern: it bloats the main thread parser, prevents parallel browser asset streaming, and disables independent asset caching.