Base64 Explained

What Base64 Is

Base64 is a way to write binary data using only 64 printable characters: the uppercase and lowercase letters, the digits 0-9, plus + and /. The name is just "base 64" — a positional system with 64 symbols, the same idea as base 10 or base 16, chosen so the output is safe to drop into text channels like email, JSON, or a URL.

It was born in the early 1990s for email. SMTP could only carry 7-bit text, so if you wanted to attach a file you had to turn its bytes into text first. Base64 became the standard for that job (MIME), and then spread everywhere: data URIs in CSS, tokens in web auth, binary blobs in JSON, you name it. RFC 4648 is the current definition.

The one thing to hold onto: Base64 is encoding, not encryption. It is a reversible translation with no key, like translating a sentence from English to Morse code. Anyone can translate it back. The diagrams below prove that by doing it in front of you.

Why Bother Translating At All

Many systems were built to move text, not bytes. They strip the high bit, mangle control characters, or choke on null bytes. A PNG file is full of bytes like 0x00 and 0xFF that are meaningless or dangerous in those systems. Base64 maps every byte onto a harmless letter, so the data survives the trip.

The cost is size. Every 3 bytes (24 bits) become 4 characters (each carrying 6 bits), so the output is about 33% larger than the input. That overhead is the price of being text-safe. A 30 KB image turns into roughly 40 KB of Base64 — fine for a small icon in a data URI, wasteful for a multi-megabyte file you should just host and link.

See 3 Bytes Become 4 Characters

How the Encoding Works

The whole scheme rests on one arithmetic fact: 3 bytes is 24 bits, and 24 is divisible by 6. So you can reshuffle three 8-bit bytes into four 6-bit values, and each 6-bit value (0-63) picks one character from the alphabet. Decoding is the exact reverse.

The diagram below runs the classic example, the word Man. Watch 3 bytes become 24 bits, split into four 6-bit groups, and each group become a character: TWFu.

See the Padding Appear

Padding With "="

The math only works in groups of three bytes. Real input is rarely a neat multiple of three, so the last group is short. Base64 pads the missing bits with zeros and marks them with = characters so the decoder knows they are filler, not data.

One leftover byte (M) leaves two real characters and two =. Two leftover bytes (Ma) leave three real characters and one =. Three bytes need no padding. The step-through below shows all three cases computed live.

The Alphabet and Its Variants

The standard alphabet is fixed:

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/

  padding: =

Two variants matter in everyday use:

• URL-safe (Base64url), RFC 4648 §5. + becomes - and / becomes _, so the result is safe in a URL or filename. Trailing = is usually dropped because = is a query-string separator.
• No line breaks. Old MIME wrapped output at 76 characters per line. Modern uses (JSON, data URIs) keep it as one unbroken string. If you decode a string with newlines and it fails, strip the whitespace first.

Step through the URL-safe conversion. The example bytes are picked so the standard output contains both + and /, and you can watch each get swapped.

See URL-Safe Base64

It Is Not Encryption

This is the mistake that ships vulnerabilities. Because Base64 output looks scrambled, people treat it as if it hid something. It did not. There is no key, no secret, nothing to break — decoding is a fixed table lookup available to everyone.

Storing a password as Base64, or "obfuscating" an API token with it, protects nothing. Anyone who can read the string can decode it. Use it for transport and representation; for confidentiality use AES or a proper hashing scheme like bcrypt. The live demo makes the point directly.

See That It Decodes With No Key

Where You Actually See It

• Data URIs. data:image/png;base64,<string> inlines a small image into HTML or CSS so there is no extra request.
• JSON with binary. You cannot put raw bytes in JSON, so files become Base64 strings: { "avatar": "iVBORw0KG..." }.
• Auth tokens. JWTs are header.payload.signature, each part Base64url. The payload is readable by design — do not put secrets in it.
• Email attachments. Still the original use case, under the MIME standard.
• Basic auth. Authorization: Basic base64(user:pass) — another reason not to confuse it with security.

Mistakes Worth Avoiding

Recommended Reading

• Web Encoding: Base64, URL & HTML Entities — how Base64 sits next to the other text encodings.
• HTML Entities Explained — the named, decimal, and hex forms, plus the & trap.
• How to Decode Base64 — a practical walkthrough with the tool.
• Base64 Images: Data URIs Explained — when inlining images helps and when it hurts.
• AES Encryption Explained — the real way to keep data confidential.