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. 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 (or any text) 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 fact that each Base64 digit represents 6 bits of data (2⁶ = 64). Three bytes of binary input (24 bits) become four Base64 characters (4 × 6 = 24 bits).

Example:

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

Base64 output is always about 33% larger than the original — a worthwhile trade-off when the destination can only handle text.

Real-world use cases

1. Data URIs in HTML and CSS

Instead of linking to an external image file, you can embed it directly:

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

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

This eliminates an HTTP request for small images and icons — useful for above-the-fold content where every millisecond counts.

2. JSON API payloads with binary data

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

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

3. HTTP Basic Authentication

The Authorization: Basic header uses Base64:

Authorization: Basic dXNlcm5hbWU6cGFzc3dvcmQ=

That’s username:password encoded in Base64. Note: this is not encryption — anyone can decode it. Always use HTTPS.

4. JWT tokens

JSON Web Tokens (JWTs) use Base64URL (a URL-safe variant that replaces + with - and / with _) for the header and payload sections. You can decode the payload part of any JWT to read its claims — the signature is what makes it tamper-proof.

5. Storing binary data in text fields

Databases and configuration files that only accept strings can store binary data as Base64. For example, storing a cryptographic key, an icon, or a certificate in an environment variable.

Base64 is not encryption

This is the most important thing to remember. Base64 is encoding — a reversible transformation with no secret key. Any tool (including the one on this page) can decode a Base64 string instantly. Never use Base64 to “hide” or “protect” sensitive data.

For actual security, use:

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 btoa() function in browsers 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 — matching the behaviour of server-side languages like Python and Node.js.

Try the Base64 Encoder & Decoder — encode any text to Base64 or decode any Base64 string, free and private, right in your browser.