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

Base64 is one of those encoding schemes that developers encounter constantly but rarely stop to understand. It's in HTTP headers, JWTs, API keys, email attachments, and data URIs. Understanding what it actually does — and what it doesn't do — prevents a class of bugs and security misconceptions.

What Is Base64?

Base64 encodes binary data into a string of 64 printable ASCII characters. The character set is:

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

The algorithm takes 3 bytes (24 bits) of input and encodes them as 4 Base64 characters (6 bits each):

Input:  M     a     n
Binary: 01001101 01100001 01101110
Groups: 010011 010110 000101 101110
Base64: T      W      F      u

Why Base64 Exists

Binary data (images, executables, cryptographic keys) contains bytes that have special meaning in text protocols. HTTP headers, email bodies (SMTP), XML, and JSON are all text-based and may misinterpret raw binary bytes.

Base64 converts arbitrary binary into safe printable ASCII, allowing binary data to be embedded anywhere a string is acceptable.

Concrete Examples

Embedding images in CSS:

.icon {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...');
}

Encoding credentials in HTTP Basic Auth:

Authorization: Basic dXNlcjpwYXNzd29yZA==

Decoded: user:password — note that Base64 is not encryption. Anyone who sees this header can decode it.

Storing binary data in JSON:

{
  "file_content": "SGVsbG8sIFdvcmxkIQ==",
  "content_type": "text/plain"
}

The Overhead

Base64 increases data size by approximately 33%. Every 3 bytes becomes 4 characters. Padding adds up to 2 extra = characters to make the output length a multiple of 4.

Input:  3 bytes  → Output: 4 chars  (33.3% overhead)
Input:  6 bytes  → Output: 8 chars
Input: 12 bytes  → Output: 16 chars

For large binary files, consider binary-safe transmission alternatives (multipart/form-data, binary protocol) rather than Base64 if overhead is a concern.

URL-Safe Base64

Standard Base64 uses + and /, which have special meaning in URLs. URL-safe Base64 replaces these:

Standard:  +  /  =
URL-safe:  -  _  (padding often omitted)

JWT tokens use URL-safe Base64 (Base64URL) without padding for their header and payload sections.

// Decoding a JWT payload
const payload = jwtToken.split('.')[1];
const decoded = atob(payload.replace(/-/g, '+').replace(/_/g, '/'));

Base64 Is Not Encryption

This is the most important thing to understand: Base64 encodes, it does not encrypt. Anyone can decode it instantly. It provides no security.

echo "SGVsbG8sIFdvcmxkIQ==" | base64 --decode
# Hello, World!

Base64-encoded API keys, passwords, or sensitive data in source code or logs are completely exposed to anyone who reads them.

Encoding and Decoding in Code

// Browser
const encoded = btoa('Hello, World!');           // "SGVsbG8sIFdvcmxkIQ=="
const decoded = atob('SGVsbG8sIFdvcmxkIQ==');   // "Hello, World!"

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

import base64

encoded = base64.b64encode(b'Hello, World!').decode()  # SGVsbG8sIFdvcmxkIQ==
decoded = base64.b64decode('SGVsbG8sIFdvcmxkIQ==').decode()  # Hello, World!

# URL-safe variant
url_encoded = base64.urlsafe_b64encode(b'Hello+World').decode()

Common Mistakes

Decoding multi-line Base64: Some implementations insert line breaks every 76 characters (PEM format). Strip whitespace before decoding:

const clean = base64String.replace(/s/g, '');
const decoded = atob(clean);

Forgetting padding: URL-safe Base64 often omits = padding. Add it back before standard decoding:

const padded = base64url + '='.repeat((4 - base64url.length % 4) % 4);

Binary files: atob in browsers returns a string, not a Uint8Array. For binary data use Uint8Array operations rather than string methods.

Encode and Decode in Your Browser

The Base64 Tool on InfraHub encodes and decodes text and files using standard or URL-safe Base64, directly in your browser. Useful for decoding JWT payloads, inspecting Basic Auth headers, encoding binary data for API testing, or verifying PEM certificate contents — with no server processing and no data retention.