Base64 Encoding Explained

You've seen it in data URIs (data:image/png;base64,iVBORw0KG...), email attachments, and API tokens. Base64 looks like gibberish, but it's actually a clever way to represent binary data as text. Let's demystify it.

What is Base64 Encoding?

Base64 is an encoding scheme that converts binary data (images, files, bytes) into ASCII text using 64 characters: A-Z, a-z, 0-9, +, and / (with = for padding).

Original text:  "Hello"
Base64 encoded: "SGVsbG8="

Why Base64? The Problem It Solves

Computers speak binary (1s and 0s). But many systems—email protocols, URLs, JSON—only safely handle text. Base64 bridges this gap by representing binary data as text.

How Base64 Encoding Works

Base64 takes 3 bytes (24 bits) of binary data and splits them into 4 groups of 6 bits each. Each 6-bit group maps to one of 64 ASCII characters.

Step-by-Step Example: Encoding "Hi"

Step 1: Convert to binary
H = 01001000
i = 01101001

Step 2: Combine into 16 bits
01001000 01101001

Step 3: Pad to multiple of 24 bits (add 8 zeros)
01001000 01101001 00000000

Step 4: Split into 6-bit groups
010010 | 000110 | 100100 | 000000

Step 5: Convert each to decimal
18 | 6 | 36 | 0

Step 6: Map to Base64 alphabet
S  | G  | k  | A

Step 7: Add padding (= for each missing byte)
Result: "SGk="

The Base64 Alphabet

Common Use Cases for Base64

1. Data URIs (Inline Images)

Embed images directly in HTML/CSS without separate files:

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

Pro: One HTTP request instead of two
Con: 33% size increase, no caching

2. Email Attachments

Email protocols (SMTP) were designed for text. Base64 encodes attachments for safe transmission:

Content-Type: application/pdf; name="document.pdf"
Content-Transfer-Encoding: base64

JVBERi0xLjQKJeLjz9MKNCAwIG9iago8PC9UeXBlL...

3. JWT Tokens (Authentication)

JSON Web Tokens use Base64 URL-safe encoding for header and payload:

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIn0.dozjgNryP4J3jVmNHl0w5N_XgL0n3I9PlFUP0THsR8U
   ↑ Header (Base64)      ↑ Payload (Base64)      ↑ Signature

4. API Requests (Binary Data)

Send files or binary data in JSON APIs:

{
  "filename": "logo.png",
  "content": "iVBORw0KGgoAAAANSUhEUgAA...",
  "encoding": "base64"
}

5. CSS Background Images

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

Base64 Variants

Standard Base64

Uses + and / characters. Good for most uses.

Base64 URL-Safe

Replaces + with - and / with _. No padding =. Used in URLs and filenames.

Standard:  SGVsbG8+V29ybGQ/
URL-Safe:  SGVsbG8-V29ybGQ_

Base64 MIME

Breaks output into 76-character lines for email compatibility.

Base64 in Different Languages

JavaScript

// Browser
const encoded = btoa("Hello World");  // "SGVsbG8gV29ybGQ="
const decoded = atob(encoded);        // "Hello World"

// Node.js
const encoded = Buffer.from("Hello World").toString('base64');
const decoded = Buffer.from(encoded, 'base64').toString('utf8');

Python

import base64

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

# URL-safe variant
encoded_url = base64.urlsafe_b64encode(b"Hello+World/")
decoded_url = base64.urlsafe_b64decode(encoded_url)

PHP

$encoded = base64_encode("Hello World");  // "SGVsbG8gV29ybGQ="
$decoded = base64_decode($encoded);        // "Hello World"

Important: Base64 is NOT Encryption

Advantages of Base64

• ✅ Text-safe: Works in systems that only accept ASCII
• ✅ Universal: Supported in every programming language
• ✅ Inline data: Embed images/files in JSON, HTML, CSS
• ✅ No special chars: Safe for URLs (URL-safe variant)

Disadvantages of Base64

• ❌ 33% size increase: 3 bytes become 4 characters
• ❌ CPU overhead: Encoding/decoding takes processing
• ❌ No compression: Base64 data doesn't compress well
• ❌ Not human-readable: Debugging is harder

When to Use Base64

Real-World Example: Email Signature

Let's embed a company logo in an email signature using Base64:

<div style="font-family: Arial, sans-serif;">
  <p>Best regards,<br>John Doe</p>
  <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA..." 
       alt="Company Logo" 
       width="100" />
</div>

Benefit: Logo displays even if recipient's email blocks external images.

Performance Considerations

Base64 increases data size by ~33%. For a 100KB image:

• Original: 100KB
• Base64: ~133KB
• With HTML overhead: ~135KB

Rule of thumb: Base64 is good for files under 10KB. Above that, use separate file uploads.

Common Base64 Mistakes

Tools and Resources

• Base64 Encoder - Encode text or files to Base64
• Base64 Decoder - Decode Base64 back to original
• Base64 Encode Guide - Detailed encoding tutorial
• Base64 Decode Guide - Decoding best practices