What Is Base64? And When You Should Actually Use It

What Is Base64? And When You Should Actually Use It

You've seen strings like SGVsbG8h in links, emails and databases — that's Base64, the web's most common encoding. Let's understand it past the usual confusion.

What It Actually Does

Base64 converts any binary data into safe text — using only 64 characters (A-Z, a-z, 0-9, +, /). Every 3 bytes become 4 characters.

Critical point: Base64 is not encryption. Anyone decodes it instantly — never hide passwords with it.

Why We Need It

Legacy systems (SMTP) were designed for text only — binary through them corrupts. Base64 wraps binary in a text-safe envelope:

• Email attachments: files ride as Base64 under the hood
• Data URIs: embedding small images directly in HTML/CSS
• Auth tokens: JWTs consist of three Base64 pieces
• Cookies & links: binary through text-only media

The Arabic (Unicode) Trap

The classic problem: btoa("مرحبا") throws! btoa only handles 0–255 — Arabic characters exceed it.

The fix: convert to UTF-8 first, then encode:

js
// Encode (Unicode-safe)
btoa(String.fromCodePoint(...new TextEncoder().encode("hello")))
// Decode
new TextDecoder().decode(Uint8Array.from(atob(s), c => c.charCodeAt(0)))

Our Base64 tool applies this correctly automatically.

Size Bloat: The Hidden Cost

3 bytes → 4 characters = 33% increase. A 1MB image becomes 1.33MB of text. Therefore:

• ✅ Embed tiny icons (under 2KB) in CSS
• ❌ Never embed large images — breaks caching, bloats HTML

Bottom Line

Base64 is a transport bridge — not security, not compression. Use it to move binary through text-only channels, and never forget UTF-8 for non-Latin text.