Base64 Encoding Explained: What It Is, How It Works, and When to Use It

If you've worked with APIs, embedded images in HTML, or handled file uploads, you've encountered Base64 encoding. Despite being everywhere in web development, many developers use Base64 without fully understanding what it does or why.

Whether you need to decode a Base64 string online or figure out how to embed binary data in a JSON payload, this guide explains Base64 from the ground up—what it is, how the algorithm works, when to use it, and when not to.

What Is Base64 Encoding?

Base64 is a method of converting binary data into a text string using only 64 printable ASCII characters. It's not encryption (there's no secret key), and it's not compression (the output is actually 33% larger). It's simply a way to represent binary data as text. For a broader look at how computers handle text and character sets, see our guide to text encoding.

The 64 Characters

Base64 uses this character set:

A-Z (26 characters)
a-z (26 characters)
0-9 (10 characters)
+   (1 character)
/   (1 character)
=   (padding character)

These 64 characters are safe to transmit through virtually any text-based system without being misinterpreted or corrupted.

Why Does Base64 Exist?

Many communication protocols and data formats were designed to handle text, not binary data:

Email (SMTP): Originally designed for 7-bit ASCII text
JSON: Can only contain text strings
XML: Text-based format
URLs: Limited character set
HTML: Text-based markup
HTTP headers: Text-only

When you need to send binary data (images, files, encrypted content) through these text-only channels, you have a problem. Base64 solves it by converting binary to text that safely passes through any text-based system.

How Base64 Encoding Works

Step-by-Step Process

1. Convert input to binary

Take the ASCII value of each character and convert to 8-bit binary:

Text:   "Hi"
ASCII:  H=72, i=105
Binary: 01001000 01101001

2. Split into 6-bit groups

Rearrange the binary into groups of 6 bits (instead of 8):

8-bit groups: 01001000 01101001
6-bit groups: 010010 000110 1001xx

If the last group has fewer than 6 bits, pad with zeros:

6-bit groups: 010010 000110 100100

3. Map to Base64 characters

Convert each 6-bit group to its decimal value and look up the Base64 character:

010010 = 18 → S
000110 = 6  → G
100100 = 36 → k

4. Add padding

The output length must be a multiple of 4. If not, add = padding:

Result: SGk=

So "Hi" encoded in Base64 is SGk=.

Why 33% Larger?

The math is straightforward: 3 bytes of input (24 bits) produces 4 Base64 characters (4 × 6 = 24 bits). You're representing 3 bytes with 4 characters, so the output is always 4/3 = 133% of the input size.

Input:  3 bytes  → Output: 4 characters
Input:  6 bytes  → Output: 8 characters  
Input:  1 MB     → Output: ~1.33 MB

Common Use Cases

1. Embedding Images in HTML/CSS

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

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

.icon {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0i...);
}

When to use this: Small images (icons, logos under 5KB) where reducing HTTP requests improves performance. When you Base64-encode an image for embedding, compressing the image first keeps the encoded string as small as possible.

When NOT to: Large images—the 33% size increase and inability to cache separately make this counterproductive.

2. API Authentication

HTTP Basic Authentication uses Base64 to encode credentials:

Username: admin
Password: secret123
Combined: admin:secret123
Base64:   YWRtaW46c2VjcmV0MTIz

Header: Authorization: Basic YWRtaW46c2VjcmV0MTIz

Important: This is encoding, NOT encryption. Anyone who intercepts this header can decode it immediately. Always use HTTPS with Basic Auth.

3. Email Attachments

MIME (Multipurpose Internet Mail Extensions) uses Base64 to encode file attachments:

Content-Type: application/pdf
Content-Transfer-Encoding: base64

JVBERi0xLjQKMSAwIG9iago8PCAvVHlwZSAvQ2F0YWxv...

This is why email attachments have file size limits—the 33% Base64 overhead is on top of the original file size.

4. Data URIs

Embed any type of data directly in URLs or HTML:

data:[mediatype][;base64],data

Examples:

data:text/plain;base64,SGVsbG8gV29ybGQ=
data:image/png;base64,iVBORw0KGgo...
data:application/pdf;base64,JVBERi0...

5. JSON Data Transport

When APIs need to transport binary data in JSON (a JSON formatter helps you inspect these payloads):

{
  "filename": "document.pdf",
  "content": "JVBERi0xLjQKMSAwIG9iago...",
  "encoding": "base64"
}

6. Storing Binary in Databases

Some databases store small binary objects as Base64 text rather than using BLOB fields, simplifying import/export operations.

Base64 Variants

Standard Base64 (RFC 4648)

Characters: A-Za-z0-9+/ with = padding

URL-Safe Base64

Characters: A-Za-z0-9-_ (replaces + with - and / with _)

Used in URLs and filenames where + and / have special meaning. When embedding Base64 data in a query string, you may also need to URL-encode the surrounding parameters:

Standard: SGVsbG8gV29ybGQ+Lw==
URL-safe: SGVsbG8gV29ybGQ-Lw==

MIME Base64

Same as standard, but inserts line breaks every 76 characters (required by email standards).

Base64 in Different Languages

JavaScript

// Encode
const encoded = btoa("Hello World");
// "SGVsbG8gV29ybGQ="

// Decode
const decoded = atob("SGVsbG8gV29ybGQ=");
// "Hello World"

// For Unicode strings
const encoded = btoa(unescape(encodeURIComponent("Héllo")));
const decoded = decodeURIComponent(escape(atob(encoded)));

Python

import base64

# Encode
encoded = base64.b64encode(b"Hello World")
# b'SGVsbG8gV29ybGQ='

# Decode
decoded = base64.b64decode("SGVsbG8gV29ybGQ=")
# b'Hello World'

Command Line

# Encode
echo -n "Hello World" | base64
# SGVsbG8gV29ybGQ=

# Decode
echo "SGVsbG8gV29ybGQ=" | base64 --decode
# Hello World

Common Misconceptions

"Base64 is encryption"

No. Base64 is encoding—it's completely reversible by anyone without any key. Never use Base64 as a security measure. It provides zero protection.

"Base64 compresses data"

Opposite. Base64 always makes data larger (33% increase). Use actual compression (gzip, zlib) if you need smaller data.

"Base64 is only for images"

Base64 can encode any binary data—documents, audio, video, executables, encrypted content, or plain text.

"I should Base64 encode everything for APIs"

Only encode binary data that needs to travel through text-only channels. Text strings, numbers, and booleans don't need Base64 encoding in JSON.

Performance Considerations

When Base64 Helps Performance

Reducing HTTP requests: Inlining tiny images (< 2KB) eliminates separate requests
Avoiding CORS issues: Data URIs bypass cross-origin restrictions
Single-file distribution: Embedding assets in HTML creates self-contained files

When Base64 Hurts Performance

Large files: 33% size overhead adds latency
No caching: Inline Base64 data can't be cached separately by browsers
CPU cost: Encoding/decoding consumes processing power
Memory: Decoded Base64 string uses more memory than the original binary

Rule of Thumb

Inline Base64 for files under 2-5KB (small icons, simple SVGs). Use regular file references for anything larger.

Security Best Practices

Never use Base64 as security: It's encoding, not encryption — use a hash generator for data integrity checks
Validate decoded data: Base64-decoded content could be malicious
Set size limits: Prevent DoS attacks via massive Base64 strings
Use HTTPS: If sending Base64-encoded credentials, always encrypt the transport layer
Sanitize before encoding: Don't assume encoding makes data safe

Conclusion

Base64 is a simple but essential tool in web development. Understanding when and why to use it helps you make better architectural decisions:

Use Base64 when sending binary data through text-only channels (email, JSON, URLs)
Inline small assets as Base64 data URIs to reduce HTTP requests
Don't use Base64 for security, compression, or large files
Remember the 33% overhead when making performance decisions

The encoding and decoding process is straightforward—and you don't need to do the math manually. Use a tool to handle the conversion reliably.