Base64 Encoding Demystified: When, Why, and How to Use It

Base64: The Encoding Every Developer Should Understand

Base64 encoding is everywhere in web development — in data URIs, email attachments, HTTP headers, JWTs, and API payloads. Yet many developers use it without fully understanding how it works, when to use it, and critically, when not to use it.

How Base64 Encoding Works

Base64 converts binary data into a text representation using 64 printable ASCII characters: A-Z (26), a-z (26), 0-9 (10), + and / (2), plus = for padding.

The algorithm processes input in groups of 3 bytes (24 bits):

1. Take 3 bytes of input (24 bits total)
2. Split into 4 groups of 6 bits each
3. Map each 6-bit value (0-63) to the Base64 alphabet
4. If the input is not a multiple of 3 bytes, pad with =

Example: Encoding "Hi" (2 bytes: 0x48, 0x69):

H       i       (padding)
01001000 01101001 00000000   ← 3 bytes (1 byte padding added)
010010 000110 100100 000000  ← 4 groups of 6 bits
S      G      k      =      ← Base64 characters (= marks padding)

Result: "Hi" → "SGk="

The 33% Size Overhead

Because every 3 input bytes become 4 output characters, Base64 encoding always increases data size by approximately 33% (4/3 ratio). This is the fundamental tradeoff of representing binary data as text.

For a 1MB image:

• Original binary: 1,000,000 bytes
• Base64 encoded: ~1,333,334 bytes

This overhead matters when choosing between Base64-embedded data URIs and regular file references.

Base64 Is NOT Encryption

This cannot be stressed enough: Base64 is a reversible encoding scheme, not encryption. Anyone can decode Base64 data instantly. There is no key, no secret, and no security.

Common misconceptions:

• ❌ "I'll Base64-encode the API key so it is safe" — No, it is just as readable
• ❌ "The JWT payload is encrypted because it is Base64" — No, it is only encoded
• ❌ "Base64 hides data from users" — No, every browser can decode it

If you need to protect data, use proper encryption (AES-256-GCM for symmetric, RSA or ECDSA for asymmetric).

When to Use Base64

1. Data URIs in HTML/CSS

Embed small images directly in HTML or CSS to avoid additional HTTP requests:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..." />

.icon {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bW...);
}

Best practice: Only use data URIs for small files (under 10KB). Larger files are more efficient as separate HTTP requests because they can be cached independently.

2. HTTP Basic Authentication

The HTTP Basic Auth scheme encodes credentials as Base64:

Authorization: Basic dXNlcm5hbWU6cGFzc3dvcmQ=

Where dXNlcm5hbWU6cGFzc3dvcmQ= decodes to username:password. This is why Basic Auth must only be used over HTTPS — the credentials are encoded, not encrypted.

3. JSON API Payloads

JSON does not support binary data natively. When APIs need to transmit files (images, PDFs, certificates), they Base64-encode the binary data:

{
  "filename": "report.pdf",
  "content": "JVBERi0xLjQKJeLjz9MKMSAw..."
}

4. Email Attachments (MIME)

SMTP (email protocol) only supports 7-bit ASCII text. Email attachments are Base64-encoded and wrapped in MIME multipart boundaries:

Content-Transfer-Encoding: base64
Content-Type: application/pdf; name="report.pdf"

JVBERi0xLjQKJeLjz9MKMSAwIG9iago8PC9UeXBl...

Base64URL: The URL-Safe Variant

Standard Base64 uses + and / characters, which have special meanings in URLs (+ means space, / is a path separator). Base64URL replaces them:

• + → - (hyphen)
• / → _ (underscore)
• = padding is often removed

Base64URL is used in:

• JWTs (all three segments are Base64URL-encoded)
• OAuth2 code challenges (PKCE)
• Filename-safe encoded values

When NOT to Use Base64

1. For "security": Base64 provides zero security. Use AES-256 or RSA for encryption.

2. For large files in APIs: The 33% size increase plus the CPU cost of encoding/decoding makes Base64 inefficient for large file transfers. Use multipart form uploads or direct binary streams instead.

3. For storing data in databases: Store binary data as BLOB/BYTEA columns, not as Base64 text strings. Base64 wastes storage space and adds encoding/decoding overhead.

4. For images over 10KB in data URIs: Larger Base64 data URIs bloat the HTML/CSS file size, prevent caching, and increase initial page load time.

Encoding in Different Languages

JavaScript (Browser):

// Encode
const encoded = btoa('Hello World');  // "SGVsbG8gV29ybGQ="

// Decode
const decoded = atob('SGVsbG8gV29ybGQ=');  // "Hello World"

// For Unicode text (btoa only handles Latin-1):
const utf8Encoded = btoa(unescape(encodeURIComponent('Hello 🌍')));

Python:

import base64

encoded = base64.b64encode(b'Hello World').decode()  # 'SGVsbG8gV29ybGQ='
decoded = base64.b64decode('SGVsbG8gV29ybGQ=').decode()  # 'Hello World'

# URL-safe variant:
url_safe = base64.urlsafe_b64encode(b'data').decode()

Command line:

# Encode
echo -n 'Hello World' | base64    # SGVsbG8gV29ybGQ=

# Decode
echo 'SGVsbG8gV29ybGQ=' | base64 --decode    # Hello World

Summary

Base64 is a binary-to-text encoding scheme that converts any data into printable ASCII characters. It increases data size by 33% and provides zero security. Use it for data URIs, HTTP Basic Auth, JSON binary payloads, and email attachments. Do not use it for security, large file transfers, or database storage. Always remember: encoding is not encryption.