Base64 Encoding Explained: What It Is and When to Use It

Base64 is everywhere — email attachments, data URIs, API tokens, and image embedding. But it comes with a 33% size overhead and isn't encryption. Understanding when to use it (and when not to) is a key developer skill.

How Base64 Works

Base64 converts binary data into ASCII text using 64 characters: A–Z, a–z, 0–9, +, and / (with = for padding). The process:

1. Take 3 bytes of binary data (24 bits)
2. Split into 4 groups of 6 bits each
3. Map each 6-bit group to the Base64 alphabet
4. Result: 4 ASCII characters for every 3 bytes of input

This is why Base64-encoded data is always ~33% larger than the original.

Common Use Cases

1. Email Attachments (MIME)

Email protocols only support ASCII text. Base64 encodes binary attachments (images, PDFs, zip files) so they can travel through the email system. This is handled automatically by your email client.

2. Data URIs

Embed small images directly in HTML or CSS without a separate HTTP request:

<img src="data:image/png;base64,iVBORw0KGgo..." />
background: url(data:image/svg+xml;base64,PHN2Zy...);

Best for images under 10KB. Larger images should use separate files to leverage caching.

3. API Tokens and Credentials

HTTP Basic Auth sends credentials as Base64(username:password) in the Authorization header. Note: this is encoding, not encryption — it's trivially reversible. Always use HTTPS.

4. JSON Web Tokens (JWTs)

JWTs use Base64URL encoding (replacing + with - and / with _) for the header, payload, and signature. Again, the payload is readable by anyone — only the signature provides verification.

5. Storing Binary Data in JSON

JSON can't contain raw binary data. Base64 encodes it as a string field. Common in APIs that accept file uploads as JSON payloads.

When NOT to Use Base64

• Large files — 33% overhead means a 1MB image becomes 1.33MB. Use file uploads instead
• Performance-critical paths — encoding/decoding takes CPU time; for high-throughput systems, use binary protocols
• As encryption — Base64 is trivially reversible. Use TLS, AES, or proper encryption for security
• CSS background images over 10KB — prevents caching and slows initial page load

Base64 vs Base64URL

The Bottom Line

1. Base64 converts binary to ASCII text with a 33% size overhead
2. Common uses: email attachments, data URIs, API tokens, JWTs
3. Base64 is encoding, not encryption — it provides zero security
4. Avoid for files over 10KB in web contexts (use file uploads instead)
5. Use Base64URL variant for URLs and JWTs