Base64 Encoding Explained: How It Works, When to Use It & Security Guide

What is Base64 Encoding?

Base64 is a group of binary-to-text encoding schemes that represent binary data in an ASCII string format. The name "Base64" comes from the fact that it uses 64 different ASCII characters to represent data: the uppercase letters A-Z (26), lowercase letters a-z (26), digits 0-9 (10), and two additional characters + and / (2), totaling 64 characters.

Base64 was originally designed for sending binary data through systems that only support text, such as email (MIME) and early internet protocols. Today, it is used extensively in web development for embedding images in HTML/CSS, encoding data in URLs, transmitting binary data in JSON APIs, and storing binary content in text-based databases.

The encoding process takes every 3 bytes (24 bits) of input data and splits them into 4 groups of 6 bits each. Each 6-bit group maps to one of the 64 characters in the Base64 alphabet. If the input length is not a multiple of 3, padding characters (=) are added to the output.

How Base64 Encoding Works

Let us walk through encoding the text "Hi!" step by step:

The Base64 alphabet is: ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/

Where A=0, B=1, C=2, ... Z=25, a=26, b=27, ... z=51, 0=52, 1=53, ... 9=61, +=62, /=63.

Padding in Base64

Since Base64 processes data in 3-byte chunks, input that is not a multiple of 3 bytes requires padding. The = character is used as padding:

• Input length % 3 == 0: No padding needed (e.g., "Hi!" → "SGkh")
• Input length % 3 == 1: Two padding characters added (e.g., "H" → "SA==")
• Input length % 3 == 2: One padding character added (e.g., "Hi" → "SGk=")

Some implementations (like URL-safe Base64) omit padding since the decoder can infer the original length from the encoded string length.

Base64 in JavaScript

JavaScript provides built-in functions for Base64 encoding and decoding:

// Browser: btoa() and atob()
const encoded = btoa("Hello, World!"); // "SGVsbG8sIFdvcmxkIQ=="
const decoded = atob("SGVsbG8sIFdvcmxkIQ=="); // "Hello, World!"

// Handle Unicode (btoa only supports Latin1)
function encodeUnicode(str) {
  return btoa(encodeURIComponent(str).replace(
    /%([0-9A-F]{2})/g,
    (_, p1) => String.fromCharCode(parseInt(p1, 16))
  ));
}

// Node.js: Buffer
const encoded = Buffer.from("Hello").toString("base64");
const decoded = Buffer.from(encoded, "base64").toString("utf-8");

// URL-safe Base64
function toBase64Url(base64) {
  return base64.replace(/+/g, "-").replace(///g, "_").replace(/=+$/, "");
}
function fromBase64Url(base64url) {
  let b64 = base64url.replace(/-/g, "+").replace(/_/g, "/");
  while (b64.length % 4) b64 += "=";
  return b64;
}

Base64 in Python

import base64

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

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

# URL-safe Base64
url_safe = base64.urlsafe_b64encode(b"Hello").decode("utf-8")
decoded = base64.urlsafe_b64decode(url_safe).decode("utf-8")

# Encode a file
with open("image.png", "rb") as f:
    encoded = base64.b64encode(f.read()).decode("utf-8")
    data_uri = f"data:image/png;base64,{encoded}"

Common Use Cases for Base64

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

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

{ "filename": "report.pdf", "content": "JVBERi0xLjQK..." }

Security Considerations

• Base64 is reversible — No key is needed to decode. It is a simple encoding, not encryption.
• Do not use for passwords — Use bcrypt, scrypt, or Argon2 for password hashing.
• Do not use for API keys — Store secrets in environment variables or secret managers.
• HTTPS is still required — Base64-encoded data in transit is just as vulnerable as plaintext without TLS.
• Size overhead — Base64 adds ~33% size overhead. For large files, consider binary transfer instead.

Base64 Variants