What is Base64?

Base64 is a binary-to-text encoding scheme that converts arbitrary binary data into a string of 64 printable ASCII characters. It was originally designed to allow binary attachments (images, PDFs, executables) to be transmitted safely over email systems that were built for plain 7-bit ASCII text. Today it appears in JWT tokens, data URIs, API authentication headers, and anywhere else binary data needs to travel through a text-only channel.

The Base64 alphabet

The 64 characters are: A–Z (26), a–z (26), 0–9 (10), + (1), and / (1). Each character represents exactly 6 bits. Base64 works by taking 3 bytes (24 bits) of input at a time and splitting them into four 6-bit groups, each mapped to one of the 64 characters.

Input:  "Man"  (3 bytes = 24 bits)
Bytes:   77       97       110
Binary:  01001101 01100001 01101110

Split into 4 × 6-bit groups:
         010011 | 010110 | 000101 | 101110
Values:  19       22       5        46
Base64:  T        W        F        u

Output:  "TWFu"

Padding with =

When the input length is not a multiple of 3, the output is padded with = characters to reach a length that is a multiple of 4:

"M"    → 1 byte  → TQ==   (2 padding chars)
"Ma"   → 2 bytes → TWE=   (1 padding char)
"Man"  → 3 bytes → TWFu   (no padding)

Some systems (notably JWT) omit the trailing = padding entirely. Decoders that follow the spec can infer the padding from the string length.

Base64url — the URL-safe variant

Standard Base64 uses + and / which have special meanings in URLs. Base64url replaces these with - and _ respectively, producing output safe for use in URLs, file names, and HTTP headers without percent-encoding. JWT tokens use Base64url for their header and payload — that's why decoded JWT headers always start with { when you decode the leading eyJ.

# Decode a JWT header in bash:
echo "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9" | base64 -d
# → {"alg":"HS256","typ":"JWT"}

Embedding images as data URIs

A data URI lets you embed file content directly in HTML or CSS instead of referencing an external file. The format is:

data:[mediatype];base64,[base64-encoded-data]

<!-- Small icon embedded directly in HTML -->
<img src="data:image/png;base64,iVBORw0KGgoAAAANS..." alt="icon" />

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

Data URIs eliminate the HTTP request for the asset, which can improve page load time for small files. The trade-off: Base64 encoding increases file size by approximately 33%, and data URIs cannot be cached by the browser separately from the HTML/CSS that embeds them. Use data URIs for small, frequently-used assets (icons, small logos); use external files for large images.

Base64 is NOT encryption

This is the most important thing to understand. Base64 is an encoding scheme, not an encryption scheme. Anyone can decode a Base64 string instantly — there is no key, no secret, and no protection. Encoding something in Base64 does not make it private, secure, or hidden.

Common mistakes: storing API keys or credentials in Base64 inside source code (visible to anyone who reads the code), sending sensitive data "encoded" in Base64 in a JSON field (trivially decodable), or describing Base64-encoded data as "encrypted" in documentation. If you need to protect data, use actual encryption (AES-256, ChaCha20) or a secrets management service — not Base64.

Privacy

All encoding and decoding is performed locally in your browser using standard Web APIs (btoa(), atob(), FileReader). Your files and text never leave your device.