You've seen Base64 everywhere — in data: URIs, JWT tokens, email attachments, and API responses. But do you know why it exists and when you should actually reach for it?
This article explains Base64 from first principles, walks through real-world use cases, and covers some traps developers fall into.
What Problem Does Base64 Solve?
Many systems that transport data were designed for text — not arbitrary binary data. Email protocols, HTTP headers, URLs, and XML documents all have rules about which characters are allowed. A byte value of 0x00 (null), 0x0A (newline), or 0x3C (<</code>) can break parsing or get stripped in transit.
Base64 solves this by encoding any binary data into a safe subset of printable ASCII characters: A–Z, a–z, 0–9, +, /, and = for padding.
How Base64 Works
Base64 takes 3 bytes (24 bits) of binary data at a time and splits them into four 6-bit chunks. Each 6-bit chunk maps to one of 64 characters.
``
Binary: 01001101 01100001 01101110
Split: 010011 010110 000101 101110
Index: 19 22 5 46
Char: T W F u
`
This is why Base64 output is always 4/3 longer than the input — 3 bytes become 4 characters. If the input isn't divisible by 3, padding = characters fill the remaining positions.
Common Use Cases
1. Embedding Images in HTML/CSS
You can embed small images directly in HTML or CSS without a separate HTTP request:
<code>html
<img src="data:image/png;base64,iVBORw0KGgo...">
</code>
Or in CSS:
<code>css
<p>background-image: url('data:image/svg+xml;base64,PHN2Zy...');</p>
</code>
When to use this: Icons under ~5 KB where saving an HTTP round-trip matters. Larger images will bloat your HTML and outweigh the saving.
2. JWT Tokens
JSON Web Tokens (JWTs) use Base64URL encoding (a variant that replaces + with - and / with _ to make tokens URL-safe). A JWT has three Base64URL-encoded sections separated by dots:
<code>
<p>eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiIxMjM0In0.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c</p>
</code>
Decode the first section and you get the header: {"alg":"HS256"}. The payload and signature follow the same format.
3. API Credentials
Many APIs expect credentials in HTTP Basic Auth headers:
<code>
<p>Authorization: Basic dXNlcm5hbWU6cGFzc3dvcmQ=</p>
</code>
That's just username:password encoded in Base64. A common debugging mistake: thinking this is encrypted. It is not — it is trivially reversible.
4. Email Attachments (MIME)
Email was designed for ASCII text. MIME (Multipurpose Internet Mail Extensions) uses Base64 to encode binary attachments — PDFs, images, spreadsheets — so they survive transit through email servers that might otherwise corrupt non-text bytes.
5. Storing Binary Data in JSON
JSON has no native binary type. When APIs need to pass binary blobs (images, audio, certificates), Base64 is the conventional encoding:
<code>json
<p>{</p>
<p>"thumbnail": "iVBORw0KGgoAAAANSUhEUgAA...",</p>
<p>"format": "png"</p>
<p>}</p>
</code>
When Not to Use Base64
Don't Use It for Passwords
Base64 is not encryption and not a hash. It's a reversible encoding that any developer can decode in seconds. Store passwords with a proper slow hash (bcrypt, Argon2), never encoded.
Don't Use It for Large Files in APIs
A 1 MB file becomes ~1.37 MB as Base64. For large payloads, use multipart/form-data uploads or pre-signed URLs to object storage instead. Base64 in JSON is convenient for small blobs; it's painful for anything over ~100 KB.
Don't Use It for URLs Unless You Use Base64URL
Standard Base64 uses +, /, and = — all characters with special meaning in URLs. If you're putting Base64 in a query string or path segment, use Base64URL (or percent-encode the standard output). Many bugs come from standard Base64 breaking URL parsing.
Quick Reference
| Use case | Appropriate? |
|:--- |:---:|
| Embedding small images in CSS/HTML | Yes |
| JWT token structure | Yes |
| HTTP Basic Auth headers | Yes |
| Email attachments (MIME) | Yes |
| Binary blobs in JSON APIs | Yes for small (<100 KB) |</p>
| Password storage | No |
| Large file transfers | No |
| Encryption | No |
Encoding and Decoding in JavaScript
`javascript
// Encode a string
const encoded = btoa('Hello, world!');
// → "SGVsbG8sIHdvcmxkIQ=="
// Decode a string
const decoded = atob('SGVsbG8sIHdvcmxkIQ==');
// → "Hello, world!"
`
For binary data (like a File or ArrayBuffer), use FileReader or Uint8Array:
<code>javascript
<p>function arrayBufferToBase64(buffer) {</p>
<p>const bytes = new Uint8Array(buffer);</p>
<p>let binary = '';</p>
<p>for (const byte of bytes) binary += String.fromCharCode(byte);</p>
<p>return btoa(binary);</p>
<p>}</p>
</code>
Note: btoa() and atob() don't handle Unicode strings directly — wrap them with encodeURIComponent + decodeURIComponent or use TextEncoder` for UTF-8 text.
Try It Yourself
If you need to encode or decode Base64 quickly — strings, files, or just to verify a JWT payload — SnappyTools' Base64 Encoder / Decoder handles standard Base64, URL-safe Base64, and Unicode text, entirely in your browser. No upload, no account.
Have questions about Base64 or a use case not covered here? Drop a comment below.
Originally published at https://snappytools.app/base64-encoder-decoder/</a></em></p>