Base64 encoding comes up everywhere — JWTs, email attachments, CSS data URLs, API payloads. Here's a concise reference for what it is, how it works, and when to actually use it.
What Problem Does Base64 Solve?
Binary data (images, files, arbitrary bytes) doesn't travel safely through text-based systems. HTTP headers, JSON, XML, and email were designed around printable ASCII. Raw binary bytes that look like control characters get corrupted in transit.
Base64 converts arbitrary binary into a safe 64-character ASCII subset: A–Z, a–z, 0–9, +, and /. Any system that can carry text can carry Base64.
The 33% Size Penalty
Every 3 bytes of input (24 bits) becomes 4 Base64 characters (each representing 6 bits). That's a 33% size increase — always. This is why you shouldn't embed large images as Base64 in your CSS or HTML.
JavaScript Built-ins
In the browser:
``javascript
// Encode
const encoded = btoa("Hello, world!"); // SGVsbG8sIHdvcmxkIQ==
// Decode
const decoded = atob("SGVsbG8sIHdvcmxkIQ=="); // Hello, world!
`
In Node.js (v16+ includes btoa/atob, older versions use Buffer):
`javascript
// Encode
Buffer.from("Hello, world!").toString("base64");
// Decode
Buffer.from("SGVsbG8sIHdvcmxkIQ==", "base64").toString("utf-8");
`
When to Use It
Good uses:
- Embedding small images in CSS (data:image/png;base64,...
) - Storing binary in JSON responses (which only support strings)
- Email attachments (MIME encoding)
- HTTP Basic Auth headers (Authorization: Basic base64(username:password)
) - JWT header and payload sections
When NOT to use it:
- Encryption — Base64 is trivially reversible. It's encoding, not security
- Passwords — use bcrypt, Argon2, or scrypt
- Large files — the 33% overhead hurts; use binary protocols instead
Base64URL: The URL-Safe Variant
Standard Base64 uses + and /, which are special characters in URLs. Base64URL replaces them with - and _. JWTs use Base64URL for exactly this reason — the . separators in header.payload.signature work because + and / are gone.
Encoding an Image in CSS
<code>css
<p>.icon {</p>
<p>background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0i...");</p>
<p>}</p>
</code>
Useful for tiny icons in critical CSS where you want zero HTTP requests. Rule of thumb: only inline Base64 for assets under 2–3 KB. Beyond that, the size penalty outweighs the saved round-trip.
Quick Online Tool
If you need to encode or decode Base64 quickly — including images — SnappyTools has a free Base64 encoder/decoder that runs entirely in your browser with no file upload required.
Key Takeaways
- Base64 converts binary to printable ASCII for safe text transport
- Always 33% larger than the original — plan for the overhead
- Use for small binary blobs in text contexts; avoid for large files
- Never confuse encoding with encryption
- Base64URL (-
and _`) is the URL-safe variant used in JWTs
Originally published at https://snappytools.app/base64-encoder-decoder/