Base64 Explained: When to Encode and When Not To

Base64 encoding shows up constantly in web development — in Authorization headers, data URIs, email attachments, and JWT tokens. But it’s widely misunderstood and frequently misused. This guide explains exactly what Base64 is, how it works, and the common mistakes developers make with it.

What Is Base64?

Base64 is an encoding scheme that converts binary data into a string of 64 printable ASCII characters (A–Z, a–z, 0–9, +, /). The name comes from the 64-character alphabet used.

It solves a specific problem: many systems and protocols are designed to handle text, not arbitrary binary data. Base64 lets you safely transport binary data (images, files, binary blobs) through text-only channels.

How Base64 Encoding Works

Base64 works by:

1. Taking 3 bytes (24 bits) of binary input at a time
2. Splitting them into 4 groups of 6 bits each
3. Mapping each 6-bit group to one of 64 printable characters
4. Adding = padding if the input isn’t a multiple of 3 bytes

The result is always approximately 33% larger than the original — 3 bytes become 4 characters.

Real-World Base64 Use Cases

• HTTP Basic Auth — credentials are encoded as Base64(username:password) in the Authorization header
• Data URIs — embed small images directly in CSS/HTML: src="data:image/png;base64,iVBORw0..."
• JWT tokens — the header and payload sections are Base64URL encoded (a URL-safe variant)
• Email attachments — MIME encoding uses Base64 to attach binary files to text-based email
• API payloads — passing binary data (like images) inside JSON fields

When NOT to Use Base64

Base64 is encoding, not encryption. These are critical mistakes:

• Don’t use it to hide sensitive data — anyone can decode Base64 instantly. dXNlcjpwYXNz is just user:pass.
• Don’t use it to compress data — it makes data 33% larger, not smaller
• Don’t store large images as Base64 in databases — it bloats your database significantly; use file storage instead
• Don’t use it in URLs without URL-safe variant — standard Base64 uses + and / which break URLs; use Base64URL instead

Base64 vs Base64URL

Standard Base64 uses + and / which have special meaning in URLs. Base64URL replaces them with - and _ and omits padding. This is used in JWTs, OAuth tokens, and any context where the encoded string appears in a URL.

Frequently Asked Questions

Is Base64 the same as encryption?

No — Base64 is reversible encoding with no secret key. Anyone can decode it. Encryption (AES, RSA, etc.) requires a key and produces output that cannot be reversed without it. Never use Base64 to protect sensitive information.

Why does Base64 end in = or ==?

Base64 processes input in 3-byte chunks. If the input length isn’t divisible by 3, one or two = padding characters are added to complete the final 4-character group. Two = means 1 byte of padding; one = means 2 bytes of padding.

How do I encode in Base64 in JavaScript?

In browsers: btoa(string) encodes, atob(string) decodes. For Node.js: Buffer.from(string).toString('base64') encodes, Buffer.from(b64string, 'base64').toString() decodes.

Can Base64 encode any file type?

Yes — Base64 encodes raw bytes, so it works on any file type (images, PDFs, zip files, executables). The encoded string has no information about the original file type; you need to track that separately (e.g., in a MIME type header).