What is Base64 Encoding? How It Works and When to Use It

If you've spent any time reading API responses, JWT tokens, or HTML source code, you've almost certainly stumbled across something like this:

SGVsbG8gV29ybGQh

That's not random noise — it's "Hello World!" encoded in Base64. It looks cryptic, but it follows a completely predictable set of rules. Once you understand those rules, you'll recognize Base64 everywhere.

This guide covers what Base64 encoding actually is, how the algorithm works under the hood, and the real-world situations where you'll use it as a developer.

What Is Base64 Encoding?

Base64 is an encoding scheme that converts binary data into a plain-text string using only 64 printable ASCII characters. The name comes directly from that character set size.

Those 64 characters are:

• Uppercase letters: A–Z (26 characters)
• Lowercase letters: a–z (26 characters)
• Digits: 0–9 (10 characters)
• Two symbols: + and /
• Padding character: = (used to align output length)

The core problem Base64 solves: many systems — email protocols, JSON payloads, HTML attributes — are designed to handle text only. Binary data like images, PDFs, and audio files can't pass through those systems safely without corruption. Base64 gives you a reliable way to represent any binary content as a string that any text-based system can handle.

How Base64 Encoding Works

3 bytes in, 4 characters out

The algorithm processes input 3 bytes (24 bits) at a time, splitting each group into four 6-bit blocks. Each 6-bit value (0–63) maps to one character in the Base64 alphabet, producing 4 output characters per 3 input bytes.

Take the word Man as an example:

Result: Man → TWFu. Every 3 bytes of input becomes exactly 4 characters of output.

Size overhead: ~33% larger

Because 3 bytes become 4 characters, Base64-encoded data is always roughly 33% larger than the original. This is a trade-off worth knowing — Base64 is an encoding scheme, not a compression format. If you need to reduce size, pair it with gzip or Brotli compression before encoding.

Base64 vs. Base64URL

Standard Base64 uses +, /, and = — characters that carry special meaning inside URLs. Base64URL replaces them: + → -, / → _, and padding is often omitted entirely. You'll see this variant in JWT tokens, OAuth state parameters, and any context where the encoded value ends up in a URL.

When Developers Actually Use Base64

Embedding images directly in HTML or CSS

Instead of making a separate HTTP request for a small icon, you can inline it as a data URI:

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

This saves a network round-trip, which matters for above-the-fold icons and favicons. The general rule of thumb: keep it under 5–10 KB. Larger images encoded this way will bloat your HTML and hurt performance more than the saved request helps.

Sending binary data in JSON APIs

JSON is text-only, so you can't include raw binary. Base64 is the standard workaround:

{
  "filename": "invoice.pdf",
  "content":  "JVBERi0xLjMKJeLjz9MK..."
}

Common in file upload APIs, email sending services (SendGrid, Mailgun), and any REST API that needs to transport binary payloads.

Email attachments (MIME encoding)

Every email attachment you've ever sent was Base64-encoded behind the scenes. The MIME standard specifies Base64 as the transfer encoding for binary content in email. View the raw source of any email with an attachment and you'll see it.

HTTP Basic Authentication

Basic Auth encodes credentials as username:password in Base64 and sends them in the request header:

Authorization: Basic dXNlcjpwYXNzd29yZA==

Important: this is encoding, not encryption. Anyone who intercepts the request can decode it instantly. Always use Basic Auth over HTTPS — never over plain HTTP.

Quick reference: Base64 in common languages

# Python
import base64
base64.b64encode(b"Hello World!")   # encode
base64.b64decode("SGVsbG8gV29ybGQh")  # decode

// JavaScript (browser)
btoa("Hello World!")   // encode
atob("SGVsbG8gV29ybGQh")  // decode

// Node.js
Buffer.from("Hello World!").toString("base64")
Buffer.from("SGVsbG8gV29ybGQh", "base64").toString()

Frequently Asked Questions

Is Base64 encoding the same as encryption?

No — and this is the most important thing to understand. Base64 is reversible by anyone with zero knowledge of a key or secret. It offers no confidentiality whatsoever. Never use it to protect passwords or sensitive data. For actual encryption, use AES (symmetric) or RSA (asymmetric) algorithms.

Why does Base64 make files bigger?

Every 3 bytes of input becomes 4 ASCII characters of output — a 4:3 ratio, or roughly 33% overhead. There's no way around this; it's inherent to the encoding. If file size matters, compress first (gzip or Brotli), then encode. Many HTTP APIs do exactly this.

When should I use Base64URL instead of standard Base64?

Use Base64URL any time the encoded string will appear in a URL, cookie, or filename. Standard Base64 uses + and /, which are reserved characters in URLs and need percent-encoding. Base64URL swaps them for - and _, which are URL-safe. JWTs always use Base64URL for this reason.

How do I decode a Base64 string online?

Paste the string into the Base64 Decoder tool on this site — it handles both standard Base64 and Base64URL, and shows the decoded output instantly in your browser without sending data to any server.

Key Takeaways

• Base64 converts binary data into a 64-character ASCII string so it can pass through text-only systems
• Every 3 bytes of input produces 4 characters of output — encoded data is ~33% larger
• Base64URL replaces +/= with -_ for safe use in URLs and JWTs
• It is not encryption — anyone can decode it with a single function call
• Common uses: data URIs, JSON file transfers, email attachments, HTTP Basic Auth

Base64 is one of those fundamentals that quietly underpins dozens of web standards. Now that you know how it works, you'll spot it everywhere — and you'll know exactly when to reach for it.