Base64 is one of the most quietly ubiquitous tools in software. It is how a binary image ends up inside a CSS file, how email attachments survive ancient mail servers, and how a JWT carries its claims in a URL. Yet it is also one of the most misunderstood — many developers reach for it expecting security it does not provide. This article explains what Base64 really does, with examples you can reproduce in our Base64 encode/decode tool.
What problem does Base64 solve?
Computers store everything as bytes, and a byte can hold any of 256 values. But many channels were designed to carry only text — specifically a limited set of printable characters. Email headers, URLs, XML/JSON fields, and source code all choke on raw binary or control characters.
Base64 solves this by re-encoding arbitrary bytes using just 64 safe, printable ASCII characters: A–Z, a–z, 0–9, and (in the standard alphabet) + and /. The result is text that can pass through any of those channels untouched.
How does Base64 actually work?
The core trick is a clean ratio: 3 bytes in, 4 characters out.
- Take the input 3 bytes (24 bits) at a time.
- Split those 24 bits into four 6-bit groups.
- Each 6-bit group is a number from 0 to 63 — look it up in the 64-character alphabet.
Six bits encode exactly 64 possibilities, which is why the alphabet has 64 symbols. Worked example for the text Man:
| M | a | n | |
|---|---|---|---|
| ASCII | 77 | 97 | 110 |
| Binary | 01001101 | 01100001 | 01101110 |
| Regroup (6-bit) | 010011 | 010110 | 000101 |
| Value | 19 | 22 | 5 |
| Base64 char | T | W | F |
So Man becomes TWFu. When the input length is not a multiple of 3, the final group is filled out and one or two = padding characters mark how many bytes were real.
Why does Base64 increase size by ~33%?
Because 3 bytes become 4 characters, the output is always about 4/3 (33%) larger than the input, before padding. That overhead is unavoidable and is the main reason you should not Base64-encode large payloads unless the channel truly requires text.
| Input bytes | Base64 characters | Overhead |
|---|---|---|
| 3 | 4 | 33% |
| 100 | 136 | 36% |
| 1,000 | 1,336 | 34% |
Standard vs. URL-safe Base64
Two characters in the standard alphabet — + and / — are problematic inside URLs and filenames, where they have special meaning. Base64URL fixes this:
| Feature | Standard Base64 | URL-safe (Base64URL) |
|---|---|---|
| 62nd char | + | - |
| 63rd char | / | _ |
| Padding | = kept | usually dropped |
| Used in | Email, data URIs | URLs, JWTs, filenames |
This is exactly the alphabet used by JWTs — every part of a token is Base64URL-encoded JSON, which is why our how to decode a JWT guide leans on the same mechanics.
When should you use Base64?
Reach for Base64 when binary must travel through a text-only channel:
- Data URIs: embedding a small image or font directly in CSS/HTML (
data:image/png;base64,...). - Email attachments: MIME uses Base64 to encode binary parts.
- JSON/XML fields: carrying a small blob of bytes inside a text document.
- Tokens and identifiers: JWTs and many API keys use Base64URL.
When should you not use Base64?
- For security. Base64 has no key and is instantly reversible. It hides nothing. If you need confidentiality, you need encryption; if you need a one-way fingerprint, you need hashing — see hashing vs encryption vs encoding for the distinction.
- For large files. The 33% bloat and the cost of decoding make Base64 a poor choice for big binaries; transfer them as raw binary instead.
- As a substitute for URL encoding. If you just need to make text safe for a query string, percent-encoding is the right tool — use the URL encode/decode tool.
Common gotchas
- UTF-8 first. Text must be converted to UTF-8 bytes before encoding so that accented characters and emoji round-trip. Our Base64 tool does this automatically.
- Padding matters. If you strip
=padding for a URL, the decoder must add it back before standard decoding. - Mixed alphabets fail. A Base64URL string fed to a strict standard decoder (or vice versa) will error on
-/_vs+//.
Sources
- IETF RFC 4648, The Base16, Base32, and Base64 Data Encodings.
- MDN Web Docs, Base64 and Data URLs.