Base64 Encoder & Decoder: What Every Developer Needs to Know About Base64 Encoding

What Is Base64 Encoding?

Base64 is a binary-to-text encoding scheme that represents binary data in an ASCII string format. It converts data into a radix-64 representation using 64 characters: A-Z, a-z, 0-9, +, and /. The = character is used for padding.

The name "Base64" comes from the fact that it uses 64 characters (2^6), meaning each character represents 6 bits of binary data. Three bytes (24 bits) of input become four Base64 characters.

Why Base64 Exists

The internet was designed to handle text, not binary data. Early email systems (SMTP) could only transmit 7-bit ASCII characters. Binary data — images, zip files, encrypted content — would get corrupted during transmission because some byte values were interpreted as control characters.

Base64 solves this by encoding arbitrary binary data into a safe, printable ASCII format. The encoded data is about 33% larger than the original, but it can pass through any text-based system without corruption.

When Developers Use Base64

Email Attachments (MIME)

Email attachments are Base64-encoded. When you send a photo via email, your email client converts it to Base64, transmits it as text, and the recipient's client decodes it back to binary. This is why email works reliably with attachments.

Data URIs in HTML and CSS

Data URIs embed small files directly in HTML or CSS using Base64:

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

This eliminates HTTP requests for small images, icons, and fonts. The tradeoff is a ~33% size increase and no browser caching of the embedded resource.

API Authentication

Basic authentication headers use Base64 encoding for username:password pairs:

`Authorization: Basic dXNlcjpwYXNz`

Important: Base64 is encoding, not encryption. The encoded string is trivially decoded. Always use HTTPS when transmitting Base64-encoded credentials.

Storing Binary Data in JSON

JSON can't natively represent binary data. Developers encode binary data as Base64 strings within JSON objects, then decode on the client side.

Base64 Variants

| Variant | Characters | Use Case |

|---------|-----------|----------|

| Standard Base64 | A-Z, a-z, 0-9, +, / | General purpose |

| URL-safe Base64 | A-Z, a-z, 0-9, -, _ | URLs and filenames |

| MIME Base64 | Standard + line breaks | Email attachments |

URL-safe Base64 replaces + with - and / with _, making it safe for use in URLs without additional encoding.

How to Encode and Decode Base64

In JavaScript, the built-in functions are straightforward:

// Encode a string to Base64

const encoded = btoa("Hello World")

// Output: SGVsbG8gV29ybGQ=

// Decode Base64 to string

const decoded = atob("SGVsbG8gV29ybGQ=")

// Output: Hello World

For Unicode text, use encodeURIComponent first:

const encoded = btoa(encodeURIComponent("Café"))

const decoded = decodeURIComponent(atob(encoded))

Common Base64 Mistakes

**Treating Base64 as encryption.** Base64 is encoding, not encryption. Never use it to protect sensitive data. A child with a text editor can decode Base64.

**Forgetting about padding.** Base64 uses = padding to ensure the output length is a multiple of 4. Some decoders handle missing padding, but others don't.

**Using standard Base64 in URLs.** The + and / characters in standard Base64 have special meaning in URLs. Use URL-safe Base64 or encode the string.

**Ignoring size increase.** Base64 increases data size by approximately 33%. Don't use it for large files when other transfer methods are available.

Should You Use Base64?

Use Base64 when:

Avoid Base64 when:

Conclusion

Base64 encoding is a fundamental tool in every developer's toolkit. It solves the real problem of transmitting binary data through text-based systems and enables everything from email attachments to embedded images.

Encode and decode Base64 instantly with our free Base64 Encoder & Decoder at txt.tools. Supports standard and URL-safe variants, works with Unicode, and runs entirely in your browser.