Base64 explained: what it is, when to use it and when not to

Base64 is everywhere: email attachments, data URLs in CSS, JSON APIs, JSON Web Tokens and HTTP Basic authentication. Here's what it actually does.

The idea

Many systems were designed to carry text, not arbitrary bytes. Base64 represents any binary data using only 64 safe characters: A–Z, a–z, 0–9, + and /, with = for padding.

Every 3 bytes of input become 4 characters of output. That's why Base64 data is about 33% larger than the original.

Try it with the Base64 encoder: “Hello, world!” becomes SGVsbG8sIHdvcmxkIQ==.

Text must be encoded as bytes first

Base64 works on bytes, so text has to be converted to bytes first, normally as UTF-8. The browser's built-in btoa() function fails on accented letters and emoji for this reason; the encoder here handles UTF-8 correctly.

Base64URL

Standard Base64 uses + and /, which have special meanings in URLs. Base64URL replaces them with - and _ and usually drops the = padding. JSON Web Tokens use Base64URL — which is why you can read any JWT's content with the JWT decoder.

Base64 is not encryption

Anyone can decode Base64 instantly with a Base64 decoder. Never use it to hide passwords, API keys or personal data. HTTP Basic authentication sends username:password in Base64 — which is exactly why it must only be used over HTTPS.

When to use it (and when not to)

• ✅ Embedding very small icons in CSS or HTML as data URLs.
• ✅ Sending binary data inside JSON or XML.
• ❌ Inlining large images: the 33% overhead and loss of caching make pages slower.
• ❌ “Protecting” anything.