Base64 Encoding: When and Why

Base64 encoding converts binary data into a text representation using 64 printable ASCII characters. It is one of the most commonly used encoding schemes in web development — appearing in data URIs, email attachments, API authentication headers, and JWT tokens. Yet many developers confuse encoding with encryption, or use Base64 in situations where it adds overhead without benefit.

This guide explains how Base64 works, when to use it, and when not to.

How Base64 Works

Base64 takes every 3 bytes (24 bits) of input and splits them into 4 groups of 6 bits each. Each 6-bit group maps to one of 64 characters:

• A-Z (0-25)
• a-z (26-51)
• 0-9 (52-61)
• + (62) and / (63)
• = for padding when the input length is not a multiple of 3

For example, the text "Hi" (2 bytes: 0x48 0x69):

Binary:    01001000 01101001
6-bit:     010010 000110 1001xx
Padded:    010010 000110 100100
Base64:    S      G      k      =
Result:    "SGk="

The = padding ensures the encoded output length is always a multiple of 4.

Base64 Variants

The URL-safe variant replaces + with - and / with _ because the standard characters have special meaning in URLs and filenames.

When to Use Base64

1. Embedding binary data in text formats

HTML, CSS, JSON, and XML are text formats. To include an image, font, or other binary data inline, Base64 encode it:

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

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

2. HTTP Basic Authentication

The Authorization: Basic header encodes username:password in Base64:

Authorization: Basic YWxpY2U6cGFzc3dvcmQ=

This is encoding, not encryption — the credentials are readable by anyone who sees the header. Always use HTTPS.

3. Email attachments (MIME)

Email was designed for 7-bit ASCII text. Binary attachments are Base64-encoded within MIME (Multipurpose Internet Mail Extensions) parts so they survive transit through mail servers.

4. Storing binary data in JSON

JSON has no binary type. Binary values like cryptographic keys, hashes, or file content are commonly Base64-encoded as strings:

{
  "publicKey": "MIIBIjANBgkqhki...",
  "signature": "MEUCIQC7..."
}

When NOT to Use Base64

Not for security

Base64 is not encryption. It is a reversible encoding with no key — anyone can decode it. Never Base64-encode passwords, tokens, or secrets and consider them "hidden."

Not for large files

Base64 increases data size by approximately 33% (3 bytes become 4 characters). A 1 MB image becomes ~1.37 MB when Base64-encoded. For large assets, use direct binary transfer (multipart upload, binary HTTP body) instead.

Not for URL parameters (usually)

While Base64url exists, URL-encoding the original data is often simpler. Base64 is warranted when the data is binary; for text data, URL encoding (encodeURIComponent) is more appropriate.

Base64 in Code

JavaScript

// Encode
btoa('Hello World')           // "SGVsbG8gV29ybGQ="

// Decode
atob('SGVsbG8gV29ybGQ=')     // "Hello World"

// For Unicode text (btoa only handles Latin-1)
const encode = (str) => btoa(new TextEncoder().encode(str).reduce((s, b) => s + String.fromCharCode(b), ''));
const decode = (b64) => new TextDecoder().decode(Uint8Array.from(atob(b64), c => c.charCodeAt(0)));

Python

import base64

# Encode
base64.b64encode(b'Hello World')        # b'SGVsbG8gV29ybGQ='

# Decode
base64.b64decode('SGVsbG8gV29ybGQ=')    # b'Hello World'

# URL-safe
base64.urlsafe_b64encode(b'data')       # b'ZGF0YQ=='

Command Line

# Encode
echo -n 'Hello World' | base64

# Decode
echo 'SGVsbG8gV29ybGQ=' | base64 -d

Common Mistakes

1. Using btoa() with Unicode — btoa() only handles Latin-1 characters. Encoding emoji or non-Latin text throws an error. Use TextEncoder first.
2. Double encoding — encoding data that is already Base64-encoded. The output is valid Base64 but decoding once gives you Base64 text, not the original data.
3. Missing padding — some systems strip = padding. Most decoders handle this, but some strict parsers reject unpadded input.
4. Standard vs URL-safe confusion — using + and / in URLs causes parsing errors. Use Base64url (- and _) for anything that goes in a URL or filename.

Try It

StackCache Base64 Encoder & Decoder converts between text and Base64 (standard and URL-safe), URL encoding, and HTML entities — all locally in your browser with no upload.