Base64 Encoding Explained: What It Is, How It Works, and When to Use It

What Is Base64?

Base64 is an encoding scheme that represents arbitrary binary data as a string of 64 printable ASCII characters. It was invented to safely transmit binary data (images, audio, encrypted blobs) through systems originally designed only for plain text — like email via SMTP or embedding data in HTML attributes.

The 64-character alphabet consists of: A-Z (26), a-z (26), 0-9 (10), the + and / characters (2), and = for padding. Every character in the output is a safe, printable ASCII character — no control codes, no null bytes, no ambiguous whitespace.

How Base64 Encoding Works

The algorithm takes input bytes in groups of 3 (24 bits) and encodes each group as 4 Base64 characters (6 bits each):

1. Take 3 input bytes: e.g., "Man" = 77, 97, 110
2. Combine into 24 bits: 010011010110000101101110
3. Split into four 6-bit groups: 010011 | 010110 | 000101 | 101110
4. Map each group (19, 22, 5, 46) to the alphabet: T, W, F, u
5. Result: TWFu

Because 3 bytes become 4 characters, Base64 output is always exactly 33% larger than the input. When the input length is not divisible by 3, padding characters (=) are appended to make the output a multiple of 4.

Real-World Use Cases

Data URIs (embedding images in HTML/CSS)

Base64-encode an image and embed it directly — no separate file, no HTTP request:

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

Useful for small icons in CSS or HTML emails. Avoid for large images: the 33% size overhead and loss of browser caching make separate files more efficient for anything over ~10 KB.

JWT Token Structure

Both the header and payload of a JSON Web Token are Base64url-encoded (a URL-safe variant). This means any JWT payload is fully readable by anyone who has the token — just split on dots and decode the middle part:

// Decode a JWT payload in the browser console
const token = "eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1c2VyXzEyMyJ9.sig";
const payload = JSON.parse(atob(token.split('.')[1]));
// { sub: "user_123" }

HTTP Basic Authentication

The Authorization: Basic header carries username:password Base64-encoded. This is not encryption — it is only encoding to avoid character escaping issues in HTTP headers. Always use HTTPS with Basic Auth.

Storing Binary Data in JSON

JSON has no binary type. Cryptographic keys, file contents, and image data must be Base64-encoded to include them in a JSON payload. This is standard practice in APIs returning file uploads, web crypto operations, or binary certificates.

Standard vs URL-Safe Base64

Standard Base64 uses + and / which are reserved characters in URLs and would need percent-encoding (%2B, %2F). URL-safe Base64 (RFC 4648) makes two substitutions:

• + becomes -
• / becomes _
• Trailing = padding is often omitted

URL-safe Base64 is used in JWTs, Firebase document IDs, AWS signatures, and any context where the encoded value appears in a URL.

The Most Important Thing: Base64 Is Not Encryption

For actual security: use real encryption (AES-GCM via Web Crypto API), proper key management, and for passwords specifically — always use a slow hash function (bcrypt, Argon2).

Base64 in JavaScript

// Standard encode / decode (browser built-ins)
const encoded = btoa("Hello, World!");     // "SGVsbG8sIFdvcmxkIQ=="
const decoded = atob("SGVsbG8sIFdvcmxkIQ=="); // "Hello, World!"

// URL-safe Base64 (for JWTs, tokens)
function toUrlSafe(b64) {
  return b64.replace(/+/g, '-').replace(///g, '_').replace(/=/g, '');
}
function fromUrlSafe(b64url) {
  const pad = b64url + '=='.slice(b64url.length % 4);
  return pad.replace(/-/g, '+').replace(/_/g, '/');
}

// Encode a binary file (from a File input)
async function fileToBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => resolve(reader.result.split(',')[1]);
    reader.onerror = reject;
    reader.readAsDataURL(file);
  });
}