Base64 is everywhere — data URIs, email attachments, API tokens, JWTs. Understanding how it works and when to use it makes you a more effective developer.
What is Base64?
Base64 is a way to represent binary data using only printable ASCII characters. It converts raw bytes into a string of letters (A-Z, a-z), digits (0-9), plus (+), and slash (/).
For example:
Hello→SGVsbG8=Hello World→SGVsbG8gV29ybGQ=
The = at the end is padding to make the output length a multiple of 4.
How it works
- Take the input bytes
- Group them into chunks of 3 bytes (24 bits)
- Split each chunk into 4 groups of 6 bits
- Map each 6-bit value to a character in the Base64 alphabet
Since 6 bits can represent 64 values (2^6 = 64), that’s where the name comes from.
Why Base64 exists
Many systems were designed to handle text, not binary data. Base64 bridges that gap:
- Email (MIME) — Email protocols only support 7-bit ASCII. Base64 encodes attachments so they survive transmission
- Data URIs — Embed images directly in HTML/CSS:
data:image/png;base64,iVBOR... - JSON/XML — These formats can’t contain raw binary. Base64 encodes binary payloads
- URLs — Base64url variant is safe for query parameters and JWTs
- Cookies — Store small binary payloads in text-only cookies
The size trade-off
Base64 encoding increases size by approximately 33%. Every 3 bytes of input becomes 4 bytes of output.
- 1 KB file → ~1.33 KB Base64
- 100 KB image → ~133 KB data URI
This is why you shouldn’t Base64-encode large files in HTML — use regular URLs instead.
Base64 vs encryption
Base64 is NOT encryption. It’s encoding — anyone can decode it. Don’t use it to hide passwords, tokens, or sensitive data. It provides zero security.
If you decode a JWT token, you’ll see the payload in plain text. The signature prevents tampering, but the content is not secret.
Common variants
| Variant | Characters | Use |
|---|---|---|
| Standard | A-Z, a-z, 0-9, +, / | Email, general |
| URL-safe | A-Z, a-z, 0-9, -, _ | URLs, JWTs, filenames |
The URL-safe variant replaces + with - and / with _ to avoid conflicts with URL syntax.
Practical uses
Embed small images in CSS
.icon {
background-image: url('data:image/svg+xml;base64,PHN2Zy...');
}Saves an HTTP request for tiny icons (under 2-3 KB).
Debug JWT tokens
Paste a JWT into a Base64 decoder to read the header and payload. The three parts (separated by dots) are each Base64url-encoded JSON.
API payloads
Some APIs accept or return Base64-encoded files. Decode to inspect, encode to send.
A browser-based encoder/decoder handles both directions instantly — paste text to encode, or paste Base64 to decode back to the original.