Base64 Encoder & Decoder: The Complete Guide

What is Base64?

Base64 is a binary-to-text encoding scheme that represents binary data in an ASCII string format by translating it into a radix-64 representation. It is widely used for transmitting data over media that are designed to handle textual data, such as email (MIME), JSON APIs, data URIs in HTML, and storing binary data in databases.

The name "Base64" comes from the fact that it uses 64 characters: A-Z (26), a-z (26), 0-9 (10), plus + and /, with = used for padding. This set ensures the encoded output consists only of safe, printable ASCII characters that will not be corrupted by systems that might misinterpret raw binary bytes.

Base64 is not encryption — it is encoding. Anyone can decode Base64 back to the original data without a key. It does not provide any security; its purpose is to ensure data integrity across text-based transport layers.

How Base64 Encoding Works

The algorithm processes data in 3-byte (24-bit) chunks and converts each chunk into four 6-bit values, each mapped to a character in the Base64 alphabet.

Step-by-Step Process

1. Take 3 bytes of input (24 bits total)
2. Split them into four 6-bit groups
3. Convert each 6-bit value (0–63) to the corresponding Base64 character
4. If fewer than 3 bytes remain, pad with = characters

// Encoding "Man" to Base64
// M = 0x4D (77), a = 0x61 (97), n = 0x6E (110)
// Binary: 01001101 01100001 01101110
// 6-bit groups: 010011 010110 000101 101110
// Decimal:    19     22     5      46
// Base64:     T      W      F      u
// Result: "TWFu"

Padding

When the input length is not a multiple of 3, padding is added with = characters:

Common Use Cases

Data URIs in HTML/CSS

Instead of making a separate HTTP request for a small image, you can embed it directly as a Base64 data URI. This reduces HTTP requests at the cost of roughly 33% more bytes:

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

/* CSS background image */
.small-icon {
  background: url('data:image/svg+xml;base64,PHN2Zy...');
}

Email Attachments (MIME)

Email protocols are text-based. Attachments like PDFs, images, and ZIP files are Base64-encoded within the email body using MIME headers:

Content-Type: application/pdf; name="report.pdf"
Content-Transfer-Encoding: base64
Content-Disposition: attachment; filename="report.pdf"

JVBERi0xLjQKMSAwIG9iago8PAovVHlwZSAvQ2F0YWxvZw...
[Base64-encoded PDF content]

Storing Binary Data in JSON

JSON cannot natively represent binary data. APIs that need to return images, cryptographic keys, or serialized objects use Base64 to safely embed them in JSON strings:

{
  "userId": 42,
  "avatar": "data:image/jpeg;base64,/9j/4AAQSkZJRg...",
  "publicKey": "LS0tLS1CRUdJTiBSU0EgUFVCTElDIEtFWS0tLS0t..."
}

Cryptographic Keys and Certificates

SSL/TLS certificates, SSH keys, and JWTs all use Base64 encoding (often with URL-safe variants) to represent binary cryptographic data as portable text:

// PEM-encoded certificate
-----BEGIN CERTIFICATE-----
MIIDXTCCAkWgAwIBAgIJALZ...
-----END CERTIFICATE-----

// JWT payload (Base64Url encoded)
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9

Base64 Variants

Several variants of Base64 exist for different contexts. Our tool supports the standard variant, but it helps to know the differences:

Base64URL replaces + with - and / with _ to avoid characters that have special meaning in URLs. It also omits padding. JWTs use Base64URL encoding for their header, payload, and signature segments.

Practical Examples

Decoding a JWT Token

JWT tokens are three Base64URL-encoded segments separated by dots. Decode the middle payload segment to inspect its contents:

// JWT token (payload only)
eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkFsaWNlIiwiaWF0IjoxNTE2MjM5MDIyfQ

// Standard Base64 (replace - with +, _ with /, add padding)
eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkFsaWNlIiwiaWF0IjoxNTE2MjM5MDIyfQ==

// Decoded JSON
{"sub":"1234567890","name":"Alice","iat":1516239022}

Converting an Image to a Data URI

Use the file upload feature to convert any image to a Base64 data URI, then embed it directly in HTML or CSS. This is especially useful for small icons, spinner animations, and placeholder images:

// Upload an image file, click "Encode to Base64"
// Result (data URI):
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...

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

Storing Binary Data in localStorage

Browsers only support string storage in localStorage. Base64 allows you to serialize binary data for caching:

// Encoding for storage
const data = new Uint8Array([0, 1, 2, 3, 255]);
const base64 = btoa(String.fromCharCode(...data));
localStorage.setItem('cached-data', base64);

// Retrieving and decoding
const stored = localStorage.getItem('cached-data');
const bytes = Uint8Array.from(atob(stored), c => c.charCodeAt(0));

Best Practices

• Use for data, not security: Base64 is encoding, not encryption. Never rely on Base64 to hide sensitive data. It is trivially reversible.
• Avoid for large files in data URIs: Base64 increases size by ~33% and prevents browser caching of the original file. Embed only small assets (under 10 KB) as data URIs.
• Use Base64URL for web contexts: When encoding for URLs, JWT tokens, or filenames, prefer the URL-safe variant to avoid + and / issues.
• Handle padding correctly: Some decoders are strict about padding. If decoding fails, ensure the string length is a multiple of 4 and add = padding if needed.
• Consider alternatives for large data: For large binary payloads, consider using Blob URLs, multipart uploads, or streaming instead of Base64 to avoid memory overhead.
• Validate before decoding: Not every Base64 string is valid. Our tool shows clear error messages for malformed input. Always check validity in your code with try/catch.