If you've worked with APIs, email systems, or embedded images in HTML, you've almost certainly encountered Base64. But what is it, exactly? Why does it exist? And when should you actually use it?

This guide covers everything — from the fundamental concept to practical examples you can try right now.

What is Base64?

Base64 is an encoding scheme that converts binary data into a string of ASCII characters. The name "Base64" comes from the fact that it uses 64 different characters to represent data: the letters A–Z (uppercase and lowercase), the digits 0–9, and the symbols + and /, with = used for padding.

Here's a simple example:

Plain text:   Hello, World!
Base64:       SGVsbG8sIFdvcmxkIQ==

And going the other way:

Base64:       U3Vkb1JvZ3Vl
Decoded:      SudoRogue

Why Does Base64 Exist?

The internet and many older protocols were designed to handle text — specifically ASCII text. But a lot of data we need to transmit is binary: images, audio files, PDFs, cryptographic keys, and more.

When you try to send binary data through a system that only understands ASCII text, things break. Control characters get misinterpreted, null bytes cause string termination, and line endings get mangled depending on the operating system.

Base64 solves this by converting any binary data into a subset of printable ASCII characters that are safe to transmit through any text-based system — email servers, HTTP headers, JSON files, HTML attributes, and more.

How Does Base64 Work?

The algorithm works in groups of 3 bytes (24 bits) at a time:

  1. Take 3 bytes of input (24 bits total)
  2. Split those 24 bits into four 6-bit groups
  3. Look up each 6-bit value in the Base64 alphabet table (0–63 → A–Z, a–z, 0–9, +, /)
  4. Output the 4 corresponding characters

Because 3 bytes become 4 characters, Base64 encoding increases data size by approximately 33%.

If the input isn't divisible by 3, = padding characters are appended to make the output length a multiple of 4. One = means 1 byte of padding; == means 2 bytes.

Common Use Cases

1. Email Attachments (MIME)

Email was originally designed only for ASCII text. Base64 is used by MIME (Multipurpose Internet Mail Extensions) to encode binary attachments — images, PDFs, Office files — for safe transmission through email servers.

2. Data URLs in HTML/CSS

You can embed images directly in HTML or CSS without a separate file request using a data URL:

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

This is useful for small icons and inline SVGs, especially in email templates where external image loading may be blocked.

3. HTTP Basic Authentication

When you use HTTP Basic Auth, your username and password are encoded as Base64 and sent in the Authorization header:

Authorization: Basic dXNlcm5hbWU6cGFzc3dvcmQ=

Important: This is encoding, not encryption. Anyone who intercepts the header can decode it instantly. Always use HTTPS with Basic Auth.

4. JWT Tokens

JSON Web Tokens (JWTs) use a variant called Base64URL (which replaces + with - and / with _) to encode their header and payload sections. If you've ever decoded a JWT, you've used Base64.

5. Storing Binary Data in JSON

JSON only supports text. When an API needs to return binary data (like a generated image or a file), it Base64-encodes the binary and includes it as a string in the JSON response.

Base64 is NOT Encryption

This is the most important thing to understand: Base64 provides zero security. It is trivially reversible by anyone who sees the encoded string. Never use Base64 to "hide" sensitive data. Use it only for encoding, not protection.

For security, use proper encryption (AES, RSA) or hashing (SHA-256, bcrypt for passwords).

Try It Now

You can encode and decode Base64 strings instantly — completely in your browser — using our free tool:

🔡 Open Base64 Encoder/Decoder →

Base64 in JavaScript

Browsers provide built-in functions for Base64:

// Encode
const encoded = btoa("Hello, SudoRogue!");
// → "SGVsbG8sIFN1ZG9Sb2d1ZSE="

// Decode
const decoded = atob("SGVsbG8sIFN1ZG9Sb2d1ZSE=");
// → "Hello, SudoRogue!"

// For Unicode support (handles non-ASCII characters):
const encodeUnicode = str => btoa(unescape(encodeURIComponent(str)));
const decodeUnicode = str => decodeURIComponent(escape(atob(str)));

Summary