Base64 Encoding Explained: What It Is and When to Use It

Base64 shows up everywhere in web development — in JWT tokens, data URIs, email attachments, and API authentication headers. Here’s a clear explanation of what it is, how it works, and when you actually need it.

What is Base64?

Base64 is an encoding scheme that converts binary data into a string of 64 printable ASCII characters: A–Z, a–z, 0–9, +, and /. The = character is used as padding at the end.

The name comes from the math: each Base64 digit represents 6 bits (2⁶ = 64). Three bytes of binary input (24 bits) become four Base64 characters (4 × 6 = 24 bits). The trade-off is size — Base64 output is always about 33% larger than the original.

Input:  "Hello"
UTF-8:  48 65 6C 6C 6F
Base64: SGVsbG8=

That size increase is worth it when the destination only handles text.

Real-world use cases

Data URIs in HTML and CSS

Instead of linking to an external file, you can embed a small image directly into your HTML or stylesheet:

<img src="data:image/png;base64,iVBORw0KGgo...">

background-image: url("data:image/svg+xml;base64,PHN2Zy...");

This eliminates an HTTP request, which matters for small icons and above-the-fold content. For larger images, the size overhead usually outweighs the benefit.

JSON API payloads with binary data

JSON only supports text. To include a PDF, image, or audio clip in a JSON body, you Base64-encode it:

{
  "filename": "report.pdf",
  "content": "JVBERi0xLjQK..."
}

This is common in document upload APIs and webhook payloads that carry file attachments.

HTTP Basic Authentication

The Authorization: Basic header encodes credentials in Base64:

Authorization: Basic dXNlcm5hbWU6cGFzc3dvcmQ=

That’s username:password — decode it and you get the plaintext. This is not encryption. Anyone who intercepts the header can read it. Always use HTTPS with Basic Auth.

JWT tokens

JSON Web Tokens use Base64URL — a URL-safe variant that replaces + with - and / with _ — for the header and payload sections. You can decode the payload of any JWT to read its claims without knowing the secret. The signature is what prevents tampering, not the encoding.

Storing binary data in text fields

Databases and config files that only accept strings can store binary data as Base64. Cryptographic keys, certificates, and small icons frequently end up encoded this way in environment variables or YAML configs.

Base64 is not encryption

This is worth stating plainly. Base64 is encoding — a reversible transformation with no secret key. Any tool, including the one on this page, can decode a Base64 string in milliseconds. Never use it to hide or protect sensitive data.

For actual security:

• AES or ChaCha20 for symmetric encryption
• RSA or ECDSA for asymmetric operations
• bcrypt, Argon2, or PBKDF2 for password hashing

How our encoder handles Unicode

The browser’s built-in btoa() function only accepts Latin-1 characters. To handle emoji, Cyrillic, CJK, and other Unicode text, our Base64 Encoder uses TextEncoder to convert the string to UTF-8 bytes first, then encodes those bytes. This matches the behavior of server-side implementations in Python and Node.js, so your encoded strings are interoperable.

---

Try the Base64 Encoder & Decoder — encode any text or decode any Base64 string, entirely in your browser with no data sent anywhere.