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

What Is Base64 Encoding?

Base64 is a binary-to-text encoding scheme that converts binary data into a string of 64 printable ASCII characters. It was originally designed to safely transmit binary data over channels that only support text — like email (SMTP), HTML, CSS, JSON, and URLs.

The name “Base64” comes from its use of a 64-character alphabet: the uppercase letters A-Z (26), lowercase a-z (26), digits 0-9 (10), and two special characters + and / (2). The = character is used for padding.

The formal specification is defined in RFC 4648. You encounter Base64 every day — in JWT tokens, data URIs, email attachments, HTTP Basic Auth headers, and embedded images in CSS. Understanding how it works will help you debug encoding issues, optimize payload sizes, and avoid common security mistakes.

How the Base64 Algorithm Works (Step by Step)

Let's encode the string Hi! to Base64 by hand. This walkthrough shows exactly what happens inside btoa() and every other Base64 encoder.

Step 1: Convert Characters to ASCII Values

Step 2: Concatenate All Bits into One Stream

01001000 01101001 00100001
↓ join into one stream
010010000110100100100001

We now have 24 bits (3 bytes × 8 bits).

Step 3: Split into 6-Bit Groups

Base64 uses 6-bit groups instead of 8-bit bytes, because 2⁶ = 64 — exactly the size of the Base64 alphabet.

010010 000110 100100 100001
  18      6     36     33

Step 4: Map Each 6-Bit Value to the Base64 Alphabet

Result

Three input bytes become four output characters — this is why Base64 always increases size by roughly 33%. The ratio is always 4:3. You can verify this result instantly with our Base64 Encoder.

The Base64 Alphabet

The standard Base64 alphabet (RFC 4648) consists of 64 characters plus a padding character:

Padding with =: When the input length isn't divisible by 3, Base64 adds = padding to make the output length a multiple of 4. One leftover byte produces ==, two leftover bytes produce =.

"A"     → "QQ=="   (1 byte  → 2 chars + 2 padding)
"AB"    → "QUI="   (2 bytes → 3 chars + 1 padding)
"ABC"   → "QUJD"   (3 bytes → 4 chars + 0 padding)
"ABCD"  → "QUJDRA==" (4 bytes → next multiple of 4)

6 Real-World Use Cases for Base64

<!-- Inline a 1x1 red pixel -->
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg==" />

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

// JWT structure:
// header.payload.signature
eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiIxMjM0NTY3ODkwIn0.dozjgNryP4J3jVmNHl0w5N_XgL0n3I9PlFUP0THsR8U

// Decode the payload:
atob("eyJzdWIiOiIxMjM0NTY3ODkwIn0")
// → '{"sub":"1234567890"}'

// Authorization: Basic <base64(username:password)>
Authorization: Basic dXNlcjpwYXNzd29yZA==

// Decoded: "user:password"

{
  "certificate": "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8A...",
  "format": "base64-der"
}

Want to decode a JWT token? Our JWT Decoder can decode the Base64URL-encoded header and payload instantly, with human-readable timestamps for expiry fields.

When NOT to Use Base64

Base64 is widely misused. Here are the most common mistakes:

Need actual hashing for passwords or data integrity? Check out our Hash Generator for MD5, SHA-256, SHA-512, and HMAC — and understand the difference between encoding, hashing, and encryption.

Base64 in Code: JavaScript, Python, and CLI

JavaScript (Browser)

// Encode
const encoded = btoa("Hello, World!");
// → "SGVsbG8sIFdvcmxkIQ=="

// Decode
const decoded = atob("SGVsbG8sIFdvcmxkIQ==");
// → "Hello, World!"

// ⚠️ btoa/atob only handle Latin-1 characters.
// For Unicode (emojis, CJK, etc.), use this:
function toBase64(str) {
  return btoa(String.fromCharCode(...new TextEncoder().encode(str)));
}

function fromBase64(b64) {
  return new TextDecoder().decode(
    Uint8Array.from(atob(b64), (c) => c.charCodeAt(0))
  );
}

toBase64("Hello 🌍");  // works with Unicode
fromBase64("SGVsbG8g8J+MjQ=="); // → "Hello 🌍"

Node.js

// Encode
const encoded = Buffer.from("Hello, World!").toString("base64");
// → "SGVsbG8sIFdvcmxkIQ=="

// Decode
const decoded = Buffer.from("SGVsbG8sIFdvcmxkIQ==", "base64").toString("utf-8");
// → "Hello, World!"

// Encode a file
const fs = require("fs");
const imageBase64 = fs.readFileSync("photo.png").toString("base64");

Python

import base64

# Encode
encoded = base64.b64encode(b"Hello, World!").decode("utf-8")
# → "SGVsbG8sIFdvcmxkIQ=="

# Decode
decoded = base64.b64decode("SGVsbG8sIFdvcmxkIQ==").decode("utf-8")
# → "Hello, World!"

# URL-safe variant (for JWT, URL params)
url_safe = base64.urlsafe_b64encode(b"Hello, World!").decode("utf-8")
# → "SGVsbG8sIFdvcmxkIQ=="

Command Line (Linux / macOS)

# Encode a string
echo -n "Hello, World!" | base64
# → SGVsbG8sIFdvcmxkIQ==

# Decode a string
echo "SGVsbG8sIFdvcmxkIQ==" | base64 --decode
# → Hello, World!

# Encode a file
base64 photo.png > photo.b64

# Decode a file
base64 --decode photo.b64 > photo_restored.png

Don't want to write code? Our Base64 Encoder / Decoder handles text, files, and image previews — all in your browser with zero server calls.

Base64 vs Base64URL Encoding

Standard Base64 uses + and /, which are reserved characters in URLs. Base64URL (RFC 4648 Section 5) replaces them with URL-safe alternatives:

JWT tokens always use Base64URL — that's why you can safely put them in URL query parameters and HTTP headers without additional URL-encoding. Our JWT Decoder handles Base64URL automatically. If you need to encode or decode URL parameters, check the String Encoder / Decoder which supports both URL encoding and Base64 in a pipeline.

Frequently Asked Questions

Related Tools & Articles