Base64 Encoding Explained (and Why It Isn't Encryption)
How Base64 works byte by byte, when to use Base64 and Base64URL, the 33% size overhead, and how to handle Unicode correctly in JavaScript.
Last updated · 2026-09-16
The problem Base64 solves
Many protocols were built for text. Email (SMTP), JSON, XML and HTTP headers can mangle raw binary bytes such as null characters or line breaks. Base64 maps arbitrary bytes onto 64 safe characters so binary data can travel through text-only channels intact.
How it works
Base64 takes 3 bytes (24 bits) at a time and splits them into four 6-bit groups. Each 6-bit value (0–63) maps to a character: A–Z, a–z, 0–9, + and /. If the input is not a multiple of 3 bytes, = padding is added. The word 'Man' becomes 'TWFu'.
Because 3 bytes become 4 characters, encoded data is always about 33% larger than the original.
Base64 is not security
Anything encoded in Base64 can be decoded by anyone in a millisecond with our Base64 tool. HTTP Basic authentication sends 'user:password' in Base64 — it is only safe over HTTPS. Never 'hide' API keys this way in front-end code.
Base64URL
Standard Base64 uses + and /, which have special meanings in URLs. Base64URL replaces them with - and _ and usually omits padding. JWTs, WebAuthn and many web APIs use this variant.
Unicode in JavaScript
The browser's btoa() only accepts characters in the Latin-1 range, so btoa('café ☕') throws. Convert text to UTF-8 bytes first.
const toB64 = (s) => btoa(String.fromCharCode(...new TextEncoder().encode(s)));
const fromB64 = (b) => new TextDecoder().decode(Uint8Array.from(atob(b), c => c.charCodeAt(0)));
// Node.js: Buffer.from(s, "utf8").toString("base64")Data URIs: when to inline images
Base64 lets you embed small images directly in HTML or CSS as data URIs, saving an HTTP request. That makes sense for icons under a few kilobytes. For anything larger, separate files are better because browsers cache them and the 33% overhead disappears. Our image to Base64 tool generates data URIs when you need them.