🔐 Base64 Encoding Explained: What It Does, When to Use It, and When Not To

Base64 converts arbitrary binary data into ASCII text. It takes groups of 3 bytes (24 bits), splits them into 4 groups of 6 bits, and maps each 6-bit value to a character from a 64-character alphabet: A-Z (0-25), a-z (26-51), 0-9 (52-61), + (62), / (63). The output is ~33% larger than the input (3 bytes → 4 characters). Padding with = ensures the output length is a multiple of 4. The purpose is purely to make binary data safe for transport through text-only systems — email (SMTP), JSON APIs, HTML, CSS, XML, URL query strings. It is not encryption, not compression, and not hashing.

• Data URIs: Embedding small images, fonts, or SVGs directly in CSS/HTML to avoid extra HTTP requests. The HTTP Archive shows data URIs are used on ~30% of websites, mostly for small icons and loader GIFs. Limit to <1KB files — larger images as data URIs block HTML parsing and can't be cached independently.
• Email attachments (MIME): SMTP is text-only. Binary attachments (images, PDFs, zip files) are Base64-encoded so they survive the journey through mail servers.
• JSON Web Tokens (JWT): The header and payload are Base64URL-encoded JSON. Copied from rfc-editor.org: RFC 7519 specifies Base64URL encoding (the URL-safe variant) for JWTs.
• HTTP Basic Authentication: Authorization: Basic base64(username:password). Note: Basic Auth over HTTP (not HTTPS) sends credentials in the clear — Base64 provides zero security.
• CSS background images: Small repeating patterns or icons embedded as Base64 data URIs eliminate HTTP requests for tiny assets.

• "Encrypting" passwords or secrets: Base64 is trivially reversible. Anyone can decode it in 2 seconds. Use bcrypt, argon2, or scrypt for password hashing.
• Compressing data: Base64 increases size by 33%. Use gzip, brotli, or zstd for actual compression.
• Large images as data URIs: A 500KB photo as a Base64 data URI in CSS: (a) blocks rendering until CSS is parsed, (b) can't be cached by the browser, (c) inflates to 666KB (33% overhead), (d) is downloaded on every page load even if the image hasn't changed. Use <img> with a real URL and caching headers instead.
• Storing binary data in databases as Base64: Store binary data as binary (BYTEA in PostgreSQL, BLOB in MySQL, Buffer in MongoDB). Base64 encoding increases storage by 33% and adds encode/decode CPU overhead on every read/write. Many databases have native binary types for exactly this reason.

Standard Base64 uses + and /, which have special meanings in URLs (+ means space, / is a path separator). Base64URL replaces + with - and / with _, and strips the = padding. Use Base64URL for: JWT tokens, query string parameters, URL path segments. Use standard Base64 for: data URIs, email attachments, localStorage storage.

Quick reference for the most common languages:

// JavaScript (Browser) — Note: btoa/atob only handle ASCII
btoa("Hello World");                     // "SGVsbG8gV29ybGQ="
atob("SGVsbG8gV29ybGQ=");               // "Hello World"

// JavaScript (Browser, UTF-8 safe)
btoa(unescape(encodeURIComponent("你好")));  // Encode UTF-8
decodeURIComponent(escape(atob(encoded)));   // Decode UTF-8

// Node.js
Buffer.from("Hello World").toString("base64");
Buffer.from("SGVsbG8gV29ybGQ=", "base64").toString("utf-8");

// Python
import base64
base64.b64encode(b"Hello World").decode()
base64.b64decode("SGVsbG8gV29ybGQ=").decode()

// Command line (Linux/macOS)
echo -n "Hello World" | base64
echo -n "SGVsbG8gV29ybGQ=" | base64 -d

For quick encoding/decoding without writing code, use the Base64 Encoder/Decoder — paste text or upload a file, choose encode or decode, and copy the result. All processing happens in your browser.