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

Base64 is one of those things developers use constantly without fully understanding. You've probably seen it in JWTs, data URIs, email attachments, and API keys. This guide explains what Base64 is, how the encoding works, and when to use it.

What Is Base64?

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

The key insight: Base64 is encoding, not encryption. It doesn't protect data — anyone can decode it. Its purpose is to safely transport binary data through text-only channels.

How the Encoding Works

Base64 encoding follows a straightforward process:

1. 1Convert each character to its 8-bit binary representation.
2. 2Concatenate all the bits into one continuous binary string.
3. 3Split the binary string into groups of 6 bits (instead of 8).
4. 4Map each 6-bit group to a character in the Base64 alphabet.
5. 5Add = padding if needed to make the output a multiple of 4 characters.

Example: Encoding "Hi"

Text:     H         i
ASCII:    72        105
Binary:   01001000  01101001

Concatenated: 010010000110100 1
Split into 6-bit groups: 010010  000110  1001xx

Pad to fill last group: 010010  000110  100100

Base64 index:  18      6       36
Base64 char:   S       G       k

Add padding:   SGk=

Result: "Hi" → "SGk="

Three bytes of input become four Base64 characters. This is why Base64 encoded data is always about 33% larger than the original.

The Padding Character

The = character at the end is padding. Since Base64 works in groups of 3 bytes (24 bits = four 6-bit groups), padding fills the gap when the input length isn't divisible by 3:

• Input length divisible by 3: no padding
• 1 byte remainder: == (two padding characters)
• 2 byte remainder: = (one padding character)

"A"   → "QQ=="   (1 byte → 2 padding)
"Hi"  → "SGk="   (2 bytes → 1 padding)
"Hey" → "SGV5"   (3 bytes → no padding)

Where Base64 Is Used

Data URIs

Embed small images directly in HTML or CSS without a separate HTTP request:

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

Best for small images (under 10KB). For larger files, the 33% size increase makes separate files more efficient.

JSON Web Tokens (JWTs)

JWTs use Base64URL encoding (a URL-safe variant) for the header and payload sections. This lets tokens be safely included in URLs and HTTP headers. See our JWT tutorial for a deep dive.

Email Attachments (MIME)

Email was originally designed for ASCII text only. Base64 encoding lets email protocols (SMTP) carry binary attachments like images and PDFs by encoding them as text.

API Payloads

APIs sometimes accept binary data (file uploads, images) as Base64 strings in JSON payloads, since JSON can't represent raw binary:

{
  "filename": "avatar.png",
  "content": "iVBORw0KGgoAAAANSUh...",
  "encoding": "base64"
}

HTTP Basic Authentication

The Authorization header encodes credentials as username:password in Base64:

Authorization: Basic dXNlcjpwYXNzd29yZA==
// Decodes to: "user:password"

Remember: this is not secure on its own. Always use HTTPS with Basic Auth.

Base64 in Different Languages

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

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

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

// Decode
const decoded = Buffer.from(encoded, "base64").toString("utf-8");

import base64

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

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

import "encoding/base64"

// Encode
encoded := base64.StdEncoding.EncodeToString([]byte("Hello World"))

// Decode
decoded, _ := base64.StdEncoding.DecodeString(encoded)

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

# Decode
echo "SGVsbG8gV29ybGQ=" | base64 -d
# Hello World

Base64 vs Base64URL

Standard Base64 uses + and /, which have special meanings in URLs. Base64URL replaces them:

Common Mistakes

• Using Base64 for security. Base64 is trivially reversible. Never use it to "hide" passwords or sensitive data. Use proper encryption instead.
• Double encoding. Encoding data that's already Base64 encoded produces valid output but nonsense when decoded. Make sure you encode raw bytes, not an already-encoded string.
• Encoding large files as data URIs. Base64 increases size by 33%. A 1MB image becomes 1.33MB inline — and can't be cached separately by the browser. Use data URIs only for small assets.
• Forgetting Unicode. The browser's btoa() only handles Latin-1 characters. For Unicode text, encode to UTF-8 first: btoa(unescape(encodeURIComponent(text))).

Try It Yourself

Use our Base64 Encoder & Decoder to encode and decode text or files instantly in your browser. For converting images to Base64 data URIs, try the Image to Base64 Converter. And for a multi-format encoding tool that handles Base64, Base32, Hex, and more, check out the Encode/Decode Multi-Tool.