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

March 22, 2026 · 8 min read

Base64 is everywhere — data URIs in CSS, email attachments, API authentication headers, JWTs. But what is it actually doing? Why does SGVsbG8gV29ybGQ= mean "Hello World"? This guide explains Base64 from the ground up, with practical examples in every language you'd use it in.

Encode & Decode Base64 Online

Paste text or upload a file — get Base64 output instantly.

Open Base64 Encoder/Decoder

What Is Base64?

Base64 is a binary-to-text encoding scheme. It takes any binary data (text, images, files) and represents it using only 64 printable ASCII characters: A-Z, a-z, 0-9, +, and /, plus = for padding.

The key insight: many systems (email protocols, JSON, URLs, HTML attributes) can only handle text, not raw binary. Base64 lets you safely embed binary data inside text-only channels.

Base64 is not encryption. It's encoding — anyone can decode it. It provides zero security. Don't use it to hide secrets.

How Base64 Works — Step by Step

Let's encode the string Hi! to Base64:

Step 1: Get the ASCII byte values

H  = 72  = 01001000
i  = 105 = 01101001
!  = 33  = 00100001

Step 2: Concatenate the bits

010010000110100100100001 (24 bits total)

Step 3: Split into 6-bit groups

Base64 uses 6 bits per character (2^6 = 64 possible values):

010010 | 000110 | 100100 | 100001
  18       6       36       33

Step 4: Map to the Base64 alphabet

= S
= G
= k
= h

Result: SGkh

That's it. Hi! in Base64 is SGkh.

What About Padding?

Base64 works on 3-byte (24-bit) chunks. If the input isn't a multiple of 3 bytes, the output is padded with =:

1 byte input → 2 Base64 chars + ==
2 bytes input → 3 Base64 chars + =
3 bytes input → 4 Base64 chars (no padding)

// Examples
"A"    → "QQ=="   (1 byte → 2 chars + ==)
"AB"   → "QUI="   (2 bytes → 3 chars + =)
"ABC"  → "QUJD"   (3 bytes → 4 chars, no padding)
"ABCD" → "QUJDRA==" (4 bytes → wraps to next group)

Base64 Size Overhead

Every 3 bytes of input become 4 bytes of output. That's a 33% size increase. A 1 MB image becomes ~1.33 MB in Base64. This matters when you're embedding images in CSS or sending large payloads.

Base64 in JavaScript

Browser: btoa() and atob()

// Encode
const encoded = btoa("Hello World");
// "SGVsbG8gV29ybGQ="

// Decode
const decoded = atob("SGVsbG8gV29ybGQ=");
// "Hello World"

Warning: btoa() only works with ASCII. For Unicode text, you need to encode to UTF-8 first:

// Unicode-safe Base64 encode
function toBase64(str) {
  return btoa(
    new TextEncoder().encode(str)
      .reduce((data, byte) => data + String.fromCharCode(byte), '')
  );
}

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

toBase64("Hello 🌍");   // "SGVsbG8g8J+MjQ=="
fromBase64("SGVsbG8g8J+MjQ=="); // "Hello 🌍"

Node.js: Buffer

// Encode
Buffer.from("Hello World").toString("base64");
// "SGVsbG8gV29ybGQ="

// Decode
Buffer.from("SGVsbG8gV29ybGQ=", "base64").toString("utf-8");
// "Hello World"

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

Base64 in Python

import base64

# Encode
encoded = base64.b64encode(b"Hello World").decode("ascii")
# "SGVsbG8gV29ybGQ="

# Decode
decoded = base64.b64decode("SGVsbG8gV29ybGQ=").decode("utf-8")
# "Hello World"

# Encode a file
with open("image.png", "rb") as f:
    b64 = base64.b64encode(f.read()).decode("ascii")

Base64 in the Command Line

# Encode a string
echo -n "Hello World" | base64
# SGVsbG8gV29ybGQ=

# Decode a string
echo "SGVsbG8gV29ybGQ=" | base64 --decode
# Hello World

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

# Decode a file
base64 --decode image.b64 > image.png

Common Uses of Base64

1. Data URIs in HTML/CSS

Embed small images directly in your HTML or CSS, avoiding an extra HTTP request:

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

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

Best for images under 5-10 KB. Larger images are better served as separate files (the 33% size increase outweighs the saved HTTP request).

2. HTTP Basic Authentication

// Authorization: Basic base64(username:password)
const credentials = btoa("admin:secret123");
fetch("/api/data", {
  headers: { Authorization: `Basic ${credentials}` }
});

Remember: this is encoding, not encryption. Always use HTTPS with Basic Auth.

3. Email Attachments (MIME)

Email protocols (SMTP) only handle 7-bit ASCII text. Binary attachments are Base64-encoded in MIME format. Your email client handles this automatically.

4. JSON Payloads

JSON has no binary type. When APIs need to transfer binary data (file uploads, images, certificates), Base64-encoding it into a JSON string is the standard approach:

{
  "filename": "report.pdf",
  "content": "JVBERi0xLjQK...",
  "contentType": "application/pdf"
}

5. JWTs (JSON Web Tokens)

JWTs use Base64URL encoding (a variant of Base64 that's URL-safe — uses - and _ instead of + and /):

eyJhbGciOiJIUzI1NiJ9.eyJ1c2VyIjoiYWxpY2UifQ.abc123
|-- header (base64) --|.|----- payload (base64) -----|.signature

Base64 Variants

Standard Base64 — Uses A-Za-z0-9+/ with = padding. Defined in RFC 4648.
Base64URL — Replaces + with - and / with _. Safe for URLs and filenames. Used in JWTs.
MIME Base64 — Same alphabet as standard, but inserts line breaks every 76 characters. Used in email.

Common Mistakes

Using Base64 for "security" — It's trivially reversible. Use encryption (AES, RSA) for security.
Base64-encoding large files inline — The 33% overhead adds up. A 5 MB image becomes 6.67 MB. Use file references instead.
Forgetting UTF-8 — btoa("café") throws in the browser. Encode to UTF-8 bytes first.
Double-encoding — Base64-encoding something that's already Base64 gives garbled results. Check if your data is already encoded before encoding it.

Try It Now

Need to encode or decode Base64 quickly? Use the free Base64 encoder/decoder on UtilShed — supports text, files, and images.

Related tools:

Base64 Image Decoder — decode Base64-encoded images visually
Image to Base64 Converter — convert images to data URIs
JWT Decoder — decode and inspect JWT tokens (which use Base64URL)
URL Encoder/Decoder — for URL-safe encoding (different from Base64)
Hash Generator — for one-way hashing (SHA-256, MD5, etc.)