DEV Community

zhihu wu
zhihu wu

Posted on • Originally published at codetoolbox.pro

How Base64 Actually Works (And Why Every Developer Should Know)

Base64 encoding is one of those things every developer encounters but few bother to understand. You see it in JWT tokens, data URIs, email attachments — it's everywhere. But what actually happens when you encode something to Base64?

Why Base64 Exists

Computers work with binary — raw bytes. But many systems (email, JSON, HTML) are text-based and can't handle arbitrary binary data safely. Try stuffing raw image bytes into a JSON payload and you'll get corrupted data or parser errors.

Base64 solves this by converting any binary data into a string of 64 safe ASCII characters: A-Z, a-z, 0-9, +, and /. Every character represents exactly 6 bits, which means 3 bytes (24 bits) become 4 Base64 characters. If the input isn't a multiple of 3 bytes, = padding fills the gap.

Where You See It Every Day

  • JWT tokens: That long string after eyJ...? Base64-encoded JSON. The payload between the two dots decodes right back to readable claims.
  • Data URIs: data:image/png;base64,iVBORw0K... — inline images in CSS and HTML use Base64 to avoid extra HTTP requests.
  • HTTP Basic Auth: Authorization: Basic dXNlcjpwYXNz — that's literally username:password in Base64. (And no, it's not encryption — anyone can decode it.)
  • Email attachments (MIME): Every file attachment in email gets Base64-encoded for safe transport.

The Gotcha: Base64 vs Base64URL

If your Base64 string has - and _ instead of + and /, you're looking at Base64URL — a variant used in URLs and JWT tokens where + and / would cause problems. To decode Base64URL, swap -+ and _/ first.

Base64 Is NOT Encryption

This trips up beginners constantly. Base64 provides zero security. It's encoding, not encryption — anyone can decode it in milliseconds. If you're storing passwords as Base64, you're storing them as plain text. Use bcrypt or Argon2 for that.

Try It Yourself

Understanding Base64 is one thing — being able to encode and decode it instantly is another. I built a free Base64 encoder/decoder that runs entirely in your browser. Paste text or upload a file, and it encodes to Base64 instantly. Paste a Base64 string and it decodes back. It also handles Base64URL, data URIs, and JWT payloads automatically.

No signup, no server uploads — everything stays on your machine. Give it a try next time you're debugging a JWT or embedding an icon in CSS.

Top comments (0)