The Problem Base64 Solves
Binary data — images, files, cryptographic keys — consists of arbitrary byte values from 0 to 255. Many text-based protocols (HTTP headers, JSON, XML, email) were designed to carry only printable ASCII characters. When binary data passes through these channels unmodified, certain byte values get misinterpreted, stripped, or corrupted.
Base64 solves this by converting any binary data into a string that uses only 64 safe,
printable ASCII characters: uppercase letters A–Z, lowercase a–z, digits 0–9, plus +
and /, with = for padding.
How Base64 Encoding Works
Base64 works in groups of 3 bytes (24 bits). Each 3-byte group is split into four 6-bit chunks. Each 6-bit value (0–63) maps to one of the 64 characters in the Base64 alphabet.
Input bytes: M a n
Binary: 01001101 01100001 01101110
Groups of 6: 010011 010110 000101 101110
Base64 index: 19 22 5 46
Base64 chars: T W F u
So Man in Base64 is TWFu.
Because 3 bytes become 4 characters, Base64 output is always 33% larger than the original. A 1 MB image becomes approximately 1.37 MB when Base64-encoded.
Padding
When the input length is not a multiple of 3, the final group has 1 or 2 bytes instead
of 3. Padding characters (=) are added to make the output length a multiple of 4:
- 1 remaining byte → 2 Base64 characters +
== - 2 remaining bytes → 3 Base64 characters +
=
The 64-Character Alphabet
| Characters | Count | Purpose |
|---|---|---|
| A–Z | 26 | Uppercase letters |
| a–z | 26 | Lowercase letters |
| 0–9 | 10 | Digits |
| + | 1 | Character 62 |
| / | 1 | Character 63 |
| = | — | Padding (not in the 64) |
Standard Base64 vs Base64URL
The standard Base64 alphabet includes + and /. Both characters have special meaning
in URLs — + represents a space in query strings, and / is a path separator. A
standard Base64 string embedded in a URL must be percent-encoded, which makes it ugly
and harder to handle.
Base64URL (RFC 4648 §5) solves this by swapping two characters and dropping padding:
| | Standard | Base64URL |
|---|---|---|
| Character 62 | + | - |
| Character 63 | / | _ |
| Padding | = | Omitted |
Base64URL strings are safe to use in URLs, file names, and JWT tokens without any additional encoding.
When to Use Base64
Use Base64 when you need to embed binary data in a text-only context:
- Data URIs — embed images directly in HTML or CSS without an extra HTTP request:
<img src="data:image/png;base64,iVBORw0KGgo..."> - JSON APIs — transmit file contents or binary payloads as a JSON string field
- Email attachments — MIME uses Base64 to embed binary files in plain-text email
- Environment variables — store TLS certificates or private keys as a single string
- JWT tokens — the header and payload sections are Base64URL-encoded
Do not use Base64 when you do not need to:
Base64 adds 33% overhead and requires an encoding/decoding step. For serving images
over HTTP, standard <img src="/path/to/image.png"> is always more efficient than a
data URI because the browser can cache the separate image file.
Base64 in JWT Tokens
JWT tokens use Base64URL for their header and payload sections. The structure is:
BASE64URL(header) . BASE64URL(payload) . BASE64URL(signature)
Because the header and payload are only encoded, not encrypted, anyone who has the token can read the claims by decoding it. The signature (third part) is cryptographic and cannot be meaningfully decoded — it can only be verified.
Use the JWT Decoder to inspect a JWT's header and payload, or the Base64 Decoder with URL-safe mode to decode individual parts manually.
Base64 in Web Development
<!-- Inline image (small icons, loading placeholders) -->
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0i..." alt="icon" />
<!-- CSS background -->
<style>
.icon { background-image: url("data:image/png;base64,iVBORw0KGgo..."); }
</style>
// Encode in JavaScript (browser)
const encoded = btoa('Hello, World!') // SGVsbG8sIFdvcmxkIQ==
// Decode in JavaScript (browser)
const decoded = atob('SGVsbG8sIFdvcmxkIQ==') // Hello, World!
// For URL-safe Base64 (e.g. JWT parts)
const urlSafe = btoa(str).replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, '')
Encoding Size Reference
| Original size | Base64 size | Increase | |---|---|---| | 100 bytes | ~136 characters | +36% | | 10 KB | ~13.7 KB | +37% | | 1 MB | ~1.37 MB | +37% | | 10 MB | ~13.7 MB | +37% |
The overhead is consistent regardless of the content type. This is why Base64-encoded images are suitable for small icons but not for large photos.
Related Tools
- Base64 Encoder — Encode text, files, and images to Base64 in your browser.
- Base64 Decoder — Decode Base64 strings back to text, files, and images.
- JWT Decoder — Inspect the Base64URL-encoded header and payload of a JWT token.