If you’ve ever inspected a JSON Web Token, copied an inline SVG from a stylesheet, or wondered how email attachments survive transit across old mail servers, you’ve encountered Base64. It’s one of those quiet workhorse algorithms of the internet—simple in concept, mathematically clean, and indispensable for everyday web development.
Why Did We Need Base64 in the First Place?
Computers naturally think in 8-bit bytes (values from 0 to 255). But back when early internet protocols like SMTP (Simple Mail Transfer Protocol) were drafted in the 1970s and 80s, communication lines were designed around 7-bit US-ASCII. Anything with the eighth bit set, or containing non-printable control codes like null bytes or line feeds, risked being mangled or dropped by intermediate mail routers.
Base64 was engineered to solve this exact problem: take arbitrary binary data—whether it’s a JPEG image, an encrypted hash, or a compiled binary—and translate it into a safe subset of 64 characters that every router, parser, and terminal can agree on without misinterpreting control signals.
The 64-Character Alphabet
The standard Base64 table (defined in RFC 4648) uses the following 64 printable characters:
- 26 Uppercase letters:
AthroughZ(representing values 0 to 25) - 26 Lowercase letters:
athroughz(representing values 26 to 51) - 10 Numeric digits:
0through9(representing values 52 to 61) - 2 Symbols:
+(value 62) and/(value 63) - Padding marker:
=(used exclusively at the end to align byte boundaries)
How the Math Works: 3 Bytes In, 4 Characters Out
The core trick of Base64 lies in finding the lowest common multiple between 8-bit bytes and 6-bit chunks, which is 24 bits. You take three consecutive 8-bit bytes (3 × 8 = 24 bits), combine them into one continuous stream, and then slice that stream into four 6-bit numbers (4 × 6 = 24 bits). Each 6-bit value (from 0 to 63) maps directly to one character in the Base64 alphabet.
Here is a real example encoding the word “Riv”:
| Character | ASCII Decimal | 8-bit Binary |
|---|---|---|
| R | 82 | 01010010 |
| i | 105 | 01101001 |
| v | 118 | 01110110 |
When you merge these into a 24-bit stream, you get 010100100110100101110110 Slicing into 6-bit chunks gives:
010100= 20 → U100110= 38 → m100101= 37 → l110110= 54 → 2
So “Riv” cleanly encodes to Uml2
What About Padding with ‘=’ Signs?
What happens if your input length isn’t a multiple of 3 bytes? Base64 handles this gracefully with padding:
- 1 Remaining Byte: 8 bits of data are padded with 4 zero bits to make two 6-bit numbers, followed by two
==characters to fill the 4-character slot. - 2 Remaining Bytes: 16 bits of data are padded with 2 zero bits to make three 6-bit numbers, followed by a single
=character.
Base64 vs Base64URL: The Web-Safe Variant
Standard Base64 works great for email and file streams, but it causes headaches in URLs and cookie headers because the + and / characters have special meanings in query strings (e.g. + represents a space). Base64URL solves this by swapping + for - (hyphen) and / for _ (underscore), and typically dropping the trailing = padding. This is the exact encoding format used inside JWT headers and payloads.
Common Practical Use Cases
- Data URIs in CSS: Embedding small 1KB icon SVGs directly into stylesheets avoids extra HTTP network roundtrips.
- API Payloads: Passing binary image thumbnails or cryptographic signatures inside JSON bodies without breaking JSON parser string rules.
- Basic Authentication Headers: HTTP Basic Auth combines username and password separated by a colon, encoded in Base64 (e.g.
Authorization: Basic dXNlcjpwYXNz).
Helpful Insights Regarding Understanding Base64 Encoding
Does Base64 encrypt or hide my sensitive data?
No. Base64 is an open encoding format, not encryption. Anyone can decode a Base64 string back to its original plain text in milliseconds without a password.
Why does Base64 increase file size by 33%?
Because you’re turning every 3 bytes (24 bits) into 4 characters (32 bits of text), the resulting string is always roughly 33.3% larger than the original raw binary data. That’s why you shouldn’t embed large multi-megabyte photos directly as Base64 strings in HTML.
Final Thoughts
Base64 is a fundamental bridge between raw binary hardware and text-oriented networking protocols. Understanding how it slices bits helps you troubleshoot API payloads, handle JWT tokens, and optimize asset loading across modern web apps.