Base64 Explained: What It Is and When to Use It

How the encoding works

Base64 takes three bytes (24 bits) and re-slices them into four 6-bit groups. Each group indexes an alphabet of 64 printable characters: A–Z, a–z, 0–9, plus and slash. Because every output character is safe ASCII, the result survives systems that would mangle raw bytes.

Text      S        u        n
ASCII     83       117      110
Bits      010100 11 0111 0101 101110
6-bit     010100   110111   010110   1110xx -> regrouped
Base64    U        3        V        u

When the input length is not a multiple of three, the final group is padded with one or two = characters. That is all the trailing equals signs mean — they carry no data.

Why output is 33% larger

Four output characters represent three input bytes, so size grows by exactly 4/3, plus padding. A 3 MB image becomes about 4 MB of Base64 text. That overhead is the price of text safety, and it is the main reason not to inline large assets as data URLs.

Where you will encounter it

• Data URLs: data:image/png;base64,iVBORw0KGgo…
• HTTP Basic authentication headers
• MIME email attachments
• JWT headers and payloads (Base64URL, not standard Base64)
• PEM certificates and keys between the BEGIN and END lines
• Binary blobs squeezed into JSON, which has no binary type

Base64 vs Base64URL

Standard Base64 uses + and /, which have meaning inside URLs and file paths. The URL-safe variant substitutes - and _ and usually drops the padding. JWTs use this variant, which is why a JWT segment pasted into a plain Base64 decoder sometimes fails.

Encoding and decoding in code

// btoa/atob only handle Latin-1, so encode to UTF-8 bytes first
const toBase64 = (str) =>
  btoa(String.fromCharCode(...new TextEncoder().encode(str)));

const fromBase64 = (b64) =>
  new TextDecoder().decode(
    Uint8Array.from(atob(b64), (c) => c.charCodeAt(0))
  );

toBase64("café"); // "Y2Fmw6k="

import base64
base64.b64encode(b"Sun")          # b'U3Vu'
base64.urlsafe_b64decode(token + "==")

# shell
echo -n "Sun" | base64
echo "U3Vu" | base64 --decode

Common mistakes

If you are decoding a token rather than a plain blob, a dedicated JWT decoder splits the three segments and parses the JSON for you.