What Is Base64 Encoding? A Developer's Guide

The 30-second definition

Base64 is a binary-to-text encoding scheme that converts any binary data into a string of ASCII characters — specifically the 64 characters A-Z, a-z, 0-9, +, and / (with = for padding). It exists so binary data can survive transport through systems that only handle text safely: email, JSON, URLs, HTML, XML.

Why Base64 exists

The internet was built for text. Many protocols — SMTP, HTTP headers, early JSON pipelines — were designed to carry ASCII bytes and treat anything outside that range as control characters or garbage. If you try to send a raw PNG through email, mail gateways may strip or mangle bytes that look like line endings or control codes.

Base64 solves this by mapping every 3 bytes of binary data to 4 ASCII characters. The output is guaranteed to be safe for any text-only channel. The cost is size: the output is ~33% larger than the input.

How it actually works

Take the 3-byte sequence. Convert it to 24 bits. Split into four 6-bit groups. Each 6-bit group (0–63) indexes into the Base64 alphabet. If the input length isn't a multiple of 3, pad with = characters.

Example — encoding the text "Man":

• ASCII: M=77, a=97, n=110.
• Binary: 01001101 01100001 01101110.
• 6-bit groups: 010011 010110 000101 101110 = 19, 22, 5, 46.
• Alphabet lookup: TWFu.

So "Man" → TWFu. That's it.

Where you'll see Base64 in the wild

• Data URIs in HTML/CSS — <img src="data:image/png;base64,..."> embeds an image directly in markup. Great for tiny icons, terrible for large images (no caching, 33% bigger).
• JWT (JSON Web Tokens) — the header and payload are Base64url-encoded JSON. Try the JWT Decoder to inspect one.
• Email attachments (MIME) — the original use case. Your PDF gets Base64-encoded into the email body.
• Basic auth headers — Authorization: Basic <base64(user:pass)>.
• Source maps and inline scripts — bundlers encode source content as Base64.
• APIs that accept file uploads as JSON — common but usually a bad idea (see below).

Encoding and decoding in practice

In JavaScript:

// Encode (UTF-8 safe)
const encoded = btoa(
  new TextEncoder().encode("hello 世界").reduce(
    (s, b) => s + String.fromCharCode(b), ""
  )
);

// Decode (UTF-8 safe)
const decoded = new TextDecoder().decode(
  Uint8Array.from(atob(encoded), c => c.charCodeAt(0))
);

The naive btoa("hello 世界") throws because btoa only handles Latin-1. The TextEncoder/TextDecoder dance is the modern fix.

You can skip the boilerplate with the Base64 Encode and Base64 Decode tools — they handle UTF-8 correctly and show both directions.

Base64url — the URL-safe variant

Standard Base64 uses + and /, which collide with URL path and query syntax. Base64url replaces them with - and _, and drops the padding =. JWTs use Base64url for exactly this reason. Most modern libraries accept either, but if you're debugging by hand, watch for the alphabet.

When NOT to use Base64

• As a compression scheme. It makes things bigger, not smaller.
• As encryption. It's encoding, not encryption. Anyone can decode it. Don't put secrets in Base64 and call them "obfuscated."
• For large file uploads in JSON APIs. Use multipart/form-data instead. Base64 in JSON bloats memory, kills streaming, and doubles parse time.
• For storage of binary blobs in a database. Store as BLOB/BYTEA. Base64 in a text column wastes 33% and breaks indexing.

Conclusion

Base64 is a transport encoding, not a feature. Use it when you need to move binary through a text-only channel — JWTs, data URIs, MIME — and avoid it everywhere else. Bookmark the Base64 Encode and Base64 Decode tools for the next time you need to inspect a token or embed an image inline.