What is Base64?
Base64 is an encoding that converts binary data into text using 64 "safe" characters: A-Z, a-z, 0-9, +, and /. The = sign is used for padding.
Why does this exist? Because lots of systems—email, JSON, URLs, HTML—were designed for text. If you try to shove raw binary data through them, things break. Base64 solves this by converting any binary data into plain ASCII text.
It's not encryption. It's not compression. It's just a different representation of the same data.
Example
Hello, World!
Encoded in Base64:
SGVsbG8sIFdvcmxkIQ==
Every 3 bytes of input become 4 characters of output. That's why Base64 makes things about 33% larger.
How It Works
Base64 takes binary data and groups it into chunks of 6 bits (instead of the usual 8). Each 6-bit chunk maps to one of 64 characters:
Binary input: 01001000 01100101 01101100 (Hel)
Split to 6: 010010 000110 010101 101100
Decimal: 18 6 21 44
Base64: S G V s
If the input isn't divisible by 3 bytes, padding (=) is added:
- 1 byte → 2 chars +
== - 2 bytes → 3 chars +
= - 3 bytes → 4 chars (no padding)
Where You'll See This
- Data URLs - Embedding images in HTML/CSS:
data:image/png;base64,iVBOR... - JWTs - Each part of a JWT is Base64url encoded
- Email attachments - MIME encoding uses Base64
- API payloads - Sending binary data in JSON
- Basic Auth - HTTP Basic authentication encodes
username:password - Storing binary in databases - When you need a text column for binary data
Base64 vs Base64url
There are two common variants:
| Base64 | Base64url | |
|---|---|---|
| Characters | A-Z, a-z, 0-9, +, / | A-Z, a-z, 0-9, -, _ |
| Padding | Required (=) | Often omitted |
| Use case | General purpose | URLs, filenames, JWTs |
Base64url replaces + with - and / with _ because the standard characters have special meaning in URLs.
Common Gotchas
Base64 provides zero security. Anyone can decode it instantly. Never use it to "hide" sensitive data.
- 33% size increase - A 1MB image becomes ~1.33MB when Base64 encoded. This matters for data URLs.
- Whitespace handling - Some Base64 strings include line breaks. Most decoders handle this, but not all.
- URL safety - Standard Base64 uses
+and/, which break URLs. Use Base64url for URL contexts. - Padding variations - Some systems require
=padding, others strip it. JWTs strip it.
In Code
// Encode
btoa("Hello") // "SGVsbG8="
// Decode
atob("SGVsbG8=") // "Hello"
// For binary data (Node.js)
Buffer.from(data).toString('base64')
Buffer.from(b64string, 'base64')
Try It
Encode/Decode Base64"Base64: Because JSON said 'I can't handle your bytes' and meant it literally."