Base64 Encoding Explained: Encode and Decode Text the Right Way

Why Base64 exists

Plenty of systems were designed to carry plain text, not raw binary: email bodies, JSON fields, URLs, HTML attributes, HTTP headers. Push binary data through them unmodified and bytes get mangled by newline handling or character-set assumptions. Base64 solves this by re-encoding arbitrary bytes into a safe 64-character alphabet — A–Z, a–z, 0–9, + and / — that survives any text channel intact. You see it in data URIs, Basic Auth headers, embedded images and JWT segments every day.

How it works

Base64 takes three bytes (24 bits) at a time and slices them into four 6-bit groups. Each 6-bit value (0–63) indexes into the alphabet, producing four printable characters for every three input bytes. That is where the roughly 33% size increase comes from. When the input length is not a multiple of three, the output is padded with one or two = characters so decoders know how many real bytes the final group held.

• Man (3 bytes) → TWFu (4 chars, no padding)
• Ma (2 bytes) → TWE= (one =)
• M (1 byte) → TQ== (two =)

A practical walkthrough — and the Unicode trap

Browsers ship btoa() and atob(), but they operate on Latin-1 (each character must be 0–255). Feed them an emoji or accented letter and they throw:

btoa("café");
// ❌ InvalidCharacterError: character out of range

The correct approach encodes the string to UTF-8 bytes first, then Base64s those bytes:

function encodeBase64(str) {
  const bytes = new TextEncoder().encode(str);      // UTF-8
  let bin = "";
  bytes.forEach(b => bin += String.fromCharCode(b));
  return btoa(bin);
}
function decodeBase64(b64) {
  const bin = atob(b64);
  const bytes = Uint8Array.from(bin, c => c.charCodeAt(0));
  return new TextDecoder().decode(bytes);           // back to UTF-8
}

encodeBase64("café");     // "Y2Fmw6k="
decodeBase64("Y2Fmw6k=");     // "café"

A good tool handles this for you. The Base64 Encode / Decode tool encodes and decodes full Unicode correctly, right in your browser, with nothing uploaded to a server.

Common pitfalls and tips

• Base64 is not encryption: It is trivially reversible and offers zero security. Never use it to hide passwords or secrets — anyone can decode it instantly.
• URL-safe variant: Standard Base64 uses + and /, which have special meaning in URLs. The URL-safe variant swaps them for - and _ and often drops the padding. Match the variant your target expects.
• Whitespace and newlines: Some encoders wrap output at 76 characters (MIME style). Most decoders ignore embedded whitespace, but strip it if a strict parser complains.
• Padding: Do not remove the = characters unless the consumer explicitly uses unpadded Base64; many decoders require them.

Once text is encoded you may want related helpers: URL Encode / Decode for query strings, or Base64 to Image when the Base64 is actually an encoded picture.

Conclusion

Base64 is the reliable way to move binary through text-only channels, trading a 33% size bump for safety. Understand the 3-bytes-to-4-characters mechanics, always encode to UTF-8 before calling btoa, pick the right alphabet variant, and remember it is encoding — not encryption. With those basics, you can encode and decode with confidence.