Base64 Encoding Explained: How It Works and When to Use It

Base64 encoding is one of those fundamental concepts that every developer encounters but few take the time to fully understand. Whether you’ve seen it in email headers, embedded images in CSS, or API authentication tokens, Base64 is everywhere. This guide breaks down exactly how the algorithm works and when you should (and shouldn’t) use it.

What Is Base64 Encoding?

Base64 is a binary-to-text encoding scheme that represents binary data using 64 printable ASCII characters. It was designed to safely transmit binary data over channels that only support text, such as email protocols (SMTP) or JSON-based APIs.

The name “Base64” comes from the fact that it uses a set of 64 characters to represent data:

• Uppercase letters: A-Z (26 characters)
• Lowercase letters: a-z (26 characters)
• Digits: 0-9 (10 characters)
• Two special characters: + and / (2 characters)
• Padding character: =

Base64 is an encoding, not encryption. It provides zero security — anyone can decode a Base64 string instantly.

How the Base64 Algorithm Works

The encoding process converts every 3 bytes (24 bits) of input into 4 Base64 characters (6 bits each). Here’s the step-by-step process:

Step 1: Convert Input to Binary

Take the ASCII (or UTF-8) values of each character and convert them to 8-bit binary:

Input: "Hi!"
H = 72  → 01001000
i = 105 → 01101001
! = 33  → 00100001

Combined: 010010000110100100100001

Step 2: Split Into 6-Bit Groups

Divide the 24-bit stream into four 6-bit groups:

010010 | 000110 | 100100 | 100001
  18       6       36       33

Step 3: Map to Base64 Characters

Use each 6-bit value as an index into the Base64 alphabet:

18 → S
 6 → G
36 → k
33 → h

Result: "SGkh"

Handling Padding

When the input length isn’t divisible by 3, padding is added:

Input Bytes	Binary Bits	Base64 Chars	Padding
3 bytes	24 bits	4 characters	None
2 bytes	16 bits + 2 zeros	3 characters	1x =
1 byte	8 bits + 4 zeros	2 characters	2x =

When to Use Base64

Email Attachments (MIME)

SMTP only supports 7-bit ASCII. Base64 encodes binary attachments (images, PDFs) so they can travel through email servers without corruption.

Data URIs in HTML/CSS

Embed small images directly in your code to eliminate extra HTTP requests:

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

API Authentication

HTTP Basic Auth encodes the username:password pair in Base64 before sending it in the Authorization header:

Authorization: Basic dXNlcjpwYXNzd29yZA==

Storing Binary in JSON/XML

JSON doesn’t support raw binary. Base64 lets you embed file data, cryptographic keys, or certificates in text-based formats.

When NOT to Use Base64

• As encryption: Base64 offers no security whatsoever
• For large files: The 33% size overhead adds up quickly
• When binary transport is available: Protocols like HTTP/2 with multipart uploads handle binary natively
• For URL parameters: Use Base64URL variant (replaces +/ with -_) or proper URL encoding instead

Performance Considerations

Factor	Impact	Recommendation
Size overhead	+33% larger output	Avoid for files larger than 10KB in data URIs
CPU cost	Minimal (bitwise operations)	Safe even on constrained devices
Caching	Inline data URIs can’t be cached separately	Use external files for repeated assets
Bandwidth	More data over the wire	Weigh against savings from fewer HTTP requests

Base64 Variants

Different contexts require slightly different character sets:

• Standard (RFC 4648): Uses + and / with = padding
• Base64URL: Uses - and _ instead — safe for URLs and filenames
• MIME: Standard Base64 with line breaks every 76 characters

Quick Reference: JavaScript Base64

// Encode a string to Base64
const encoded = btoa("Hello, World!");
// Result: "SGVsbG8sIFdvcmxkIQ=="

// Decode Base64 back to string
const decoded = atob("SGVsbG8sIFdvcmxkIQ==");
// Result: "Hello, World!"

// For Unicode strings, encode to UTF-8 first
const unicodeEncode = btoa(
  encodeURIComponent("Héllo").replace(
    /%([0-9A-F]{2})/g,
    (_, p1) => String.fromCharCode(parseInt(p1, 16))
  )
);

Try it yourself: Encode and decode Base64 strings instantly with our free Base64 Encoder & Decoder — all processing happens in your browser, no data is sent to any server.