Base64 Encoder Guide: Encode Text, Binary & Files Online

How Base64 Encoding Works

Base64 takes 3 bytes of binary input and converts them to 4 printable ASCII characters. The 64 characters used are: A–Z (26), a–z (26), 0–9 (10), + and / (2) — 64 total, plus = for padding.

Input:  H     e     l
Bytes:  72    101   108
Binary: 01001000 01100101 01101100
Groups: 010010 000110 010101 101100
Index:  18     6      21     44
Output: S      G      V      s   → "SGVs"

This 3-to-4 expansion means Base64 output is always 33% larger than the input — a 1MB image becomes a 1.37MB Base64 string.

Standard vs URL-Safe Base64

Two variants of Base64 exist. Knowing which to use matters:

The + character becomes a space in URLs, and / is a path separator. Using standard Base64 in a URL breaks parsing. Always use URL-safe encoding for anything that will appear in a URL, cookie, or HTTP header value.

Our encoder lets you toggle between both variants — choose URL-safe when generating tokens, code verifiers, or any value that will end up in a URL.

Common Use Cases

Data URIs — embedding assets in CSS and HTML

Instead of a separate HTTP request for an image, you can embed it directly:

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

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

When to use data URIs:

• Small icons (under 2–4KB) where the HTTP overhead exceeds the transfer savings
• Images that must render without an additional network request (above-the-fold critical images)
• Inline SVGs in emails (where external image loading may be blocked)

When not to:

• Large images — the 33% size overhead plus the inability to cache the URI separately makes large data URIs worse than separate requests
• Images used on multiple pages — a separate file gets cached once; an embedded Base64 string is downloaded with every page

Encoding API request bodies

Some APIs require binary data (PDFs, images) submitted as Base64-encoded strings in JSON payloads:

{
  "filename": "invoice.pdf",
  "content": "JVBERi0xLjQKJeLjz9MKCjEgMCBvYmoK...",
  "encoding": "base64"
}

Encode the file content in our encoder, then paste it into the JSON payload. Validate the full request structure with our JSON Formatter before sending.

HTTP Basic Authentication header

Credentials for Basic Auth are sent as Base64(username:password):

const credentials = btoa("alice:my-password");
// → "YWxpY2U6bXktcGFzc3dvcmQ="

fetch('/api/resource', {
    headers: {
        'Authorization': `Basic ${credentials}`
    }
});

Note: Basic Auth over plain HTTP is insecure — the credentials are trivially decodable. Always use HTTPS. For generating secure API credentials, use our Password Generator.

Encoding binary configuration values

Some configuration systems (Kubernetes Secrets, .env files) store binary values as Base64:

# Kubernetes Secret
apiVersion: v1
kind: Secret
data:
  database-password: cGFzc3dvcmQxMjM=  # Base64 of "password123"

Kubernetes Secrets store values as Base64 — not encrypted. Anyone with access to the Secret object can decode the value. Use Sealed Secrets, External Secrets Operator, or HashiCorp Vault for actual secret management.

UTF-8 Encoding — Handling Non-ASCII Input

JavaScript's native btoa() only accepts Latin-1 character codes. Encoding a string with characters above Unicode code point 255 throws a DOMException:

// Throws: "The string to be encoded contains characters outside of the Latin1 range"
btoa("Hello 😊");

// Correct approach — encode UTF-8 bytes then Base64
const bytes = new TextEncoder().encode("Hello 😊");
const base64 = btoa(String.fromCharCode(...bytes));
// → "SGVsbG8g8J+Yig=="

Our encoder applies this UTF-8 → Base64 pipeline automatically. Emoji, accented characters, Arabic, CJK, and any other Unicode text encodes correctly.

Performance Considerations

Base64 is CPU-light — encoding a 1MB input takes milliseconds. But the 33% size overhead affects:

Network transfer: A 1MB image becomes 1.37MB when Base64-encoded. For high-traffic applications, this overhead adds up. Benchmark whether an extra HTTP request costs more than 370KB of additional payload.

Memory: Base64 strings are held in memory as JavaScript strings, which use UTF-16 encoding internally — doubling the memory footprint again. A 1MB image embedded as Base64 occupies roughly 2.7MB of JavaScript heap.

CSS parsing: Large Base64 data URIs in CSS slow down stylesheet parsing and layout calculation. Google Lighthouse flags data URIs above 4KB in CSS.

For anything above a few kilobytes, serving the binary directly (with proper Cache-Control headers) is almost always the better choice.

What Base64 Is Not

• Not encryption — Base64 provides zero confidentiality. Decoding is trivial for anyone
• Not compression — output is larger than input
• Not a signature — it doesn't verify authenticity

For encryption, use the Web Crypto API's SubtleCrypto.encrypt(). For secure tokens with integrity guarantees, see our JWT Debugger which covers signed tokens. For hashing to verify integrity, use our Hash Generator.

Privacy: Why Encoding Locally Matters

Base64-encoded strings often contain sensitive information: credentials embedded in configs, tokens, or API payloads. Sending these to a cloud-based encoder means the plaintext traverses the network and potentially lands in server logs before or after encoding.

Our encoder runs btoa() and TextEncoder entirely in your browser — nothing is transmitted. This is the right approach when working with authentication values, configuration secrets, or any data that shouldn't appear in third-party logs.

After encoding, combine with our CSS Formatter to properly format stylesheets containing data URIs, or use our Markdown Editor to document encoding decisions for your team.