Encoding / Data Representation

Base64

Binary-to-text encoding · Interactive triplet-by-triplet visualization
01 / What is Base64

Binary data in a text-safe suit

Base64 is an encoding scheme that converts arbitrary binary data into a sequence of 64 printable ASCII characters. It was created to safely transmit binary content through systems — like email — that only handle text.

The core trick: take 3 bytes (24 bits), split them into 4 groups of 6 bits, and map each 6-bit value (0–63) to a character from the Base64 alphabet (A–Z, a–z, 0–9, +, /). Every 3 bytes of input become exactly 4 characters of output — a 33% size overhead.

Base64 is not encryption. It provides no confidentiality — anyone can decode it instantly. Its purpose is purely representational: making binary data safe to embed in text contexts.

Core transformation
3 bytes → split 24 bits → 4 × 6-bit groups → 4 Base64 chars
alphabet = A–Z (0–25), a–z (26–51), 0–9 (52–61), + (62), / (63) padding = "=" appended when input length % 3 ≠ 0 overhead = ⌈n/3⌉ × 4 bytes output for n bytes input (~33%)
Base64 vs alternatives
Base64HexBase58URL%enc
Overhead33%100%~37%up to 200%
URL-safe variantYesYesYesNative
Human readableNoPartialPartialNo
Padding chars= (1–2)NoneNoneNone
Whitespace safeYesYesYesNo
Common useWidelyDebugCryptoURLs
02 / When it's used

Real-world use cases

Data URIs
Embed images, fonts, and files directly in HTML/CSS without a separate HTTP request. The browser decodes inline.
src="data:image/png;base64,iVBORw0KGgo..."
JWT Tokens
All three parts of a JWT (header, payload, signature) are Base64URL encoded — making the token a safe single-line string.
eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1c2VyIn0.sig
HTTP Basic Auth
Credentials in HTTP Basic Auth are Base64-encoded (not encrypted!) and sent in the Authorization header.
Authorization: Basic dXNlcjpwYXNzd29yZA==
Email Attachments
MIME email encodes binary attachments as Base64 so they survive the text-only SMTP protocol intact.
Content-Transfer-Encoding: base64
API Keys & Tokens
Random bytes from a CSPRNG are Base64-encoded to produce the printable API keys and secrets you copy from dashboards.
sk_live_4dF3... ← 32 random bytes → Base64
JSON Payloads
Binary blobs (images, certificates, keys) embedded in JSON must be Base64 since JSON has no native binary type.
{ "cert": "MIIBIjANBgkqhkiG9w0B..." }
03 / How it's used in code

Implementation in 3 languages

// Standard Base64
const encoded = Buffer.from('Hello, World!').toString('base64');
// → 'SGVsbG8sIFdvcmxkIQ=='

const decoded = Buffer.from(encoded, 'base64').toString('utf8');
// → 'Hello, World!'

// URL-safe Base64 (no + / or padding)
const urlSafe = Buffer.from('Hello, World!')
  .toString('base64url');
// → 'SGVsbG8sIFdvcmxkIQ'

// Encode binary (e.g. random bytes for an API key)
import { randomBytes } from 'crypto';
const apiKey = randomBytes(32).toString('base64url');
import base64

# Standard Base64
encoded = base64.b64encode(b'Hello, World!')
# → b'SGVsbG8sIFdvcmxkIQ=='

decoded = base64.b64decode(encoded).decode('utf-8')
# → 'Hello, World!'

# URL-safe Base64 (replaces + → -, / → _)
url_safe = base64.urlsafe_b64encode(b'Hello, World!')
# → b'SGVsbG8sIFdvcmxkIQ=='

# Strip padding for tokens
token = base64.urlsafe_b64encode(
    secrets.token_bytes(32)
).rstrip(b'=').decode()
import "encoding/base64"

// Standard Base64
encoded := base64.StdEncoding.EncodeToString([]byte("Hello, World!"))
// → "SGVsbG8sIFdvcmxkIQ=="

decoded, err := base64.StdEncoding.DecodeString(encoded)
// → []byte("Hello, World!")

// URL-safe Base64 (safe in URLs and filenames)
urlSafe := base64.URLEncoding.EncodeToString([]byte("Hello, World!"))

// No padding variant (common for tokens)
raw := base64.RawURLEncoding.EncodeToString([]byte("Hello, World!"))
// → "SGVsbG8sIFdvcmxkIQ"
// Common mistakes
Base64 ≠ encryption

Base64 is trivially reversible by anyone. Never use it to "hide" passwords, secrets, or sensitive data. Use proper encryption (AES-GCM) or hashing (bcrypt) for those.

Standard vs URL-safe variant

Standard Base64 uses + and / which are special in URLs. Use base64url (replaces them with - and _) for JWTs, tokens, and anything in a URL or filename.

Padding issues

Some systems strip = padding; others require it. When comparing or parsing Base64 tokens, normalize padding first. RawEncoding variants omit it entirely.

Size overhead in hot paths

Base64 inflates data by ~33%. Avoid repeatedly encoding large binaries (e.g. images) in tight loops. Encode once, cache, or stream. Use binary protocols (protobuf, MessagePack) when size matters.

// Interactive Demo — watch each byte triplet transform into 4 Base64 characters
Enter text and click Encode to watch each 3-byte triplet transform into 4 Base64 characters — bit by bit.