Base64: Encode Anything, Decode Everything

Base64 converts binary data into ASCII text. It uses 64 characters — A-Z, a-z, 0-9, +, and / — so any byte sequence can travel through text-only channels like email, JSON, HTTP headers, and data URIs.

How it works

Every 3 bytes of input become 4 characters of output. The bits are regrouped into 6-bit chunks, each mapping to one of 64 characters:

Input:  H   e   l        (3 bytes = 24 bits)
Bytes:  72 101 108
Bits:   01001000 01100101 01101100
6-bit:  010010 000110 010101 101100
Base64: S      G      V      s

→ "SGVs"

The = padding character fills the last group when the input length isn't divisible by 3.

URL-safe Base64

Standard Base64 uses + and /, which break in URLs. The URL-safe variant replaces them:

Standard:  a+b/c==
URL-safe:  a-b_c==

JWTs use URL-safe Base64 for their header and payload segments. If you're decoding a JWT in the browser, swap the characters first:

function base64UrlDecode(str) {
  const base64 = str.replace(/-/g, '+').replace(/_/g, '/')
  return atob(base64)
}

Data URIs for images

You can embed small images directly in HTML or CSS as Base64 data URIs, avoiding an extra HTTP request:

.logo {
  background-image: url(data:image/png;base64,iVBORw0KGgo...);
}

This is useful for icons and sprites under ~4KB. For larger images, the ~33% size overhead and parsing cost outweigh the request savings — use a CDN instead.

Decoding to files

Paste a Base64 string and the decoder auto-detects the MIME type from the first bytes — PNG, JPEG, PDF, audio — and previews or downloads the original file. No upload, no server round-trip.

The Base64 Encoder / Decoder handles text, files, images, URL-safe encoding, JWT payloads, and Basic Auth headers — all 100% client-side.