Base64 Encoding Explained

What Is Base64?

Base64 is a binary-to-text encoding scheme. It takes raw bytes and represents them using 64 printable ASCII characters (A–Z, a–z, 0–9, +, /). Every 3 bytes of input become 4 characters of output. The result is safe to transmit over text-based protocols (email, JSON, URLs) that could corrupt raw binary.

How Base64 Works (3 bytes -> 4 chars)

Base64 groups bytes into 24-bit chunks (3 bytes) and then splits them into four 6-bit values. Each 6-bit value is mapped to a printable character from the Base64 alphabet. A classic example:

Input: "Man"
ASCII bytes: 0x4d 0x61 0x6e
Base64: TWFu

If the input is not a multiple of 3 bytes, output is padded with = so the Base64 length is a multiple of 4.

Common Uses

• Data URIs: Embed images or fonts in HTML/CSS as data:image/png;base64,...
• Email: MIME encodes attachments as Base64 so they survive old mail systems.
• APIs: Binary payloads in JSON are often Base64-encoded strings.
• Basic Auth: HTTP Basic encodes username:password as Base64 (obfuscation only, not security).

Browser vs Node.js

In Node, Base64 is built into Buffer. In browsers, btoa/atob only work reliably with binary strings (Latin-1). For UTF-8 text, convert to bytes first.

// Node.js
Buffer.from('hello', 'utf8').toString('base64')
// "aGVsbG8="\n\n// Node.js
Buffer.from('aGVsbG8=', 'base64').toString('utf8')
// "hello"

// Browser (UTF-8 safe)
const bytes = new TextEncoder().encode('hello');
let binary = '';
for (const b of bytes) binary += String.fromCharCode(b);
const b64 = btoa(binary);
// "aGVsbG8="\n\n// Browser (UTF-8 safe)
const binary = atob('aGVsbG8=');
const bytes = Uint8Array.from(binary, (c) => c.charCodeAt(0));
const text = new TextDecoder().decode(bytes);
// "hello"

Why Does Base64 Inflate Size?

Base64 uses 4 characters per 3 input bytes, so output is about 33% larger. The trade-off is compatibility: many systems only handle 7-bit ASCII safely.

Data URI Size Math

If you inline assets as data URIs, budget for the size increase. A good rule of thumb:

base64Bytes ≈ ceil(originalBytes * 4 / 3)

Example: a 10 KB PNG becomes roughly 13.4 KB of Base64, plus the data:image/png;base64, prefix. Inlining can reduce requests, but can also increase HTML/CSS size and hurt caching. Use it selectively.

Padding

Output length must be a multiple of 4. If the input is not a multiple of 3 bytes, padding characters = are appended. One = means 2 bytes of input; two = means 1 byte. Some systems use "Base64 without padding"; our encoder uses standard padding.

URL-Safe Base64

Standard Base64 uses + and /, which are unsafe in URLs and form data. URL-safe Base64 replaces them with - and _. Our tool outputs standard Base64; for URL-safe, use a library or swap characters after encoding.

// Standard Base64 -> Base64url (no padding)
base64.replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, '')

If you're embedding Base64 inside query parameters, you may also need URL encoding. See our URL encoding guide.

Base64 Is Not Encryption

Base64 is trivially reversible. Anyone can decode it. Never use it to protect passwords, tokens, or secrets. For credentials, use proper auth flows. For integrity, use hashes (see our Hash Generator). Base64 only makes binary data safe to pass through text channels.

If you're deciding between hashing and encryption, see Hashes vs Encryption.

UTF-8 and Unicode

To encode text with accented characters or emoji, the text must be UTF-8 encoded first. Our tool handles UTF-8 correctly: it encodes the UTF-8 bytes of your input and decodes back to Unicode.

When Base64 Fails

• Whitespace in input: Some Base64 strings include newlines. Strip whitespace before decoding.
• Missing padding: Some systems omit = padding. Add it back (or use a decoder that supports no-padding).
• Wrong alphabet: Base64url uses - and _. Standard Base64 uses + and /.
• Binary vs text confusion: Decoding returns bytes. If you assume UTF-8 but the content is actually binary, the decoded text will look corrupted.