Base64 Binary Principles

What Is Base64 Encoding?

When I first encountered Base64 years ago, I was puzzled — it looked like random letters and numbers with equals signs tacked on the end. But once I understood the binary mechanics behind it, everything clicked. Base64 is essentially a way to take arbitrary binary data and represent it using only 64 safe, printable ASCII characters. The key insight is that it groups binary data into 6-bit chunks instead of the usual 8-bit bytes, because 2⁶ = 64 gives you exactly enough combinations to map to a 64-character alphabet.

Standard binary works in 8-bit bytes. Base64 re-groups those bytes into 6-bit segments. Here is how it plays out:

• 3 bytes (24 bits) become 4 Base64 characters (4 × 6 = 24 bits)
• Each 6-bit value (0-63) maps to one character in the Base64 alphabet
• The result is roughly 33% larger than the original binary data

For example, the 3 bytes 0x4D 0x61 0x6E ("Man") in binary are 01001101 01100001 01101110. Grouped as 6 bits: 010011 010110 000101 101110, which maps to TWFu in Base64.

From Binary to Base64 Step by Step

Let me walk through a concrete example. Take the word "Hi":

1. 'H' = 01001000, 'i' = 01101001 (2 bytes = 16 bits)
2. 16 bits grouped as 6 bits: 010010 000110 1001
3. The last group only has 4 bits, so we pad with two zero bits: 010010 000110 100100
4. Map to Base64: 18 → S, 6 → G, 36 → k
5. Add one = padding character: SGk=

The Base64 alphabet uses characters that are safe in almost every context — no special characters that could break URLs, JSON, or email headers. The standard mapping is:

• A-Z (positions 0-25)
• a-z (positions 26-51)
• 0-9 (positions 52-61)
• + (position 62) and / (position 63)

The + and / can cause issues in URLs. That is why URL-safe Base64 (Base64URL) swaps them for - and _ respectively — something I learned the hard way when JWT tokens started failing in query strings.

Base64 vs Base64URL Alphabet

The only two differences between standard Base64 and Base64URL are:

• Standard + (62) becomes - in Base64URL
• Standard / (63) becomes _ in Base64URL
• Padding = is often stripped in Base64URL since it can be reconstructed

Base64 padding is one of those things that looks confusing until you trace the binary. When the original data's bit count isn't evenly divisible by 24 (3 bytes), you have an incomplete final group:

• 1 byte remainder (8 bits): becomes 2 Base64 characters (12 bits used) + 2 = padding
• 2 byte remainder (16 bits): becomes 3 Base64 characters (18 bits used) + 1 = padding
• 0 byte remainder (24 bits): exactly 4 Base64 characters, no padding

The padding ensures the encoded output length is always a multiple of 4. This makes decoding straightforward — the decoder reads 4 characters at a time, discards the padding markers, and reconstructs the original bytes.

Base64 shows up everywhere in modern web development. Here are the places I see it most often:

• Data URIs (data: URLs) — Embedding images directly in HTML or CSS, like data:image/png;base64,iVBORw0KGgo...
• JWT Tokens — JSON Web Tokens use Base64URL to encode header, payload, and signature sections
• Email Attachments (MIME) — Email protocols are text-based, so binary attachments get Base64-encoded before transmission
• API Authentication — Basic Auth headers encode username:password in Base64 (though it is not encryption!)

A common question I get is why Base64 output is always about 33% bigger than the input. The math is straightforward:

• Every 3 input bytes (24 bits) produce 4 output characters
• 4 characters at 8 bits each = 32 bits of output for 24 bits of input
• 32 ÷ 24 = 1.333, hence the ~33% overhead

This is the price you pay for using only 64 printable characters instead of all 256 possible byte values. When bandwidth is tight and binary data must pass through text-only channels, it is a worthwhile trade-off.

Understanding Base64's binary foundation makes it much easier to work with binary translation tools. When I use a binary to text converter or binary decoder, I am essentially doing the reverse of what Base64 does — mapping binary patterns back to readable characters. The difference is that a binary translator works with 8-bit ASCII groupings, while Base64 uses 6-bit groupings with a lookup table.

If you are curious about how binary maps to text at the most fundamental level, I recommend starting with our binary to text converter to see direct 8-bit ASCII conversion in action, then come back to Base64 to appreciate the clever 6-bit regrouping trick.