Base64 Encoding Explained: When and Why Developers Use It

If you've been developing for any length of time you've encountered Base64 — a long string of seemingly random letters, numbers, plus signs, and slashes with an = or == at the end. It appears in auth headers, CSS files, JSON payloads, and email attachments. This guide explains what Base64 is, why it exists, and every situation where you'll encounter it.

Connect on LinkedIn →

What Base64 Is

Base64 converts binary data into a string of 64 printable ASCII characters: A–Z (26), a–z (26), 0–9 (10), plus + and /, with = for padding. Three bytes (24 bits) of input become exactly four Base64 characters, increasing size by approximately 33%.

Why Base64 Exists

The internet's core protocols were designed for 7-bit ASCII text. Email (SMTP), HTTP headers, and many other protocols couldn't reliably transmit binary data — certain byte values would be misinterpreted as control characters or protocol delimiters, corrupting the data. Base64 encodes binary into a subset of ASCII that is safe for any text-based protocol.

The = Padding Characters

Base64 encodes three bytes at a time. If the input isn't divisible by 3, padding characters are added: one = if 2 bytes remain, two == if 1 byte remains.

Base64URL vs Standard Base64

Standard Base64 uses + and / which are special characters in URLs. Base64URL replaces them with - and _ and often omits padding. You'll see Base64URL in JWTs, OAuth tokens, and URL-safe cookies.

Where You'll Encounter Base64

HTTP Basic Authentication

The string username:password is Base64-encoded in the Authorization header: Authorization: Basic dXNlcjpwYXNz. Decode it and you get the credentials. This is why Basic Auth is insecure over HTTP — Base64 is not encryption.

JSON Web Tokens (JWTs)

A JWT's three parts are Base64URL-encoded. The header and payload are readable by anyone with the token — only the signature requires the secret to verify. Never store sensitive data in a JWT payload.

Data URIs in CSS

.icon {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANS...");
}

Small images embedded directly in CSS eliminate HTTP requests. Useful for icons under 4–5KB; for larger images a separate file is more efficient.

Email Attachments

MIME email attachments are Base64-encoded within the message body. This is why raw email files are larger than their attachments and why opening a raw email shows encoded content.

Storing Binary Data in JSON

JSON is a text format and cannot contain raw binary. APIs that transfer files, images, or encrypted payloads via JSON Base64-encode them. This is common in document processing and image recognition APIs.

PEM Certificates and Keys

PEM files (.pem for SSL certificates, SSH keys) are Base64-encoded DER binary wrapped in -----BEGIN CERTIFICATE----- headers. When you copy an SSH public key, you're looking at Base64.

What Base64 Is NOT

Base64 is not encryption. Decoding requires no key — it's a completely reversible transformation that anyone can perform. Never use it as a security measure. Base64 is not compression — it makes data larger. Use gzip for compression; use Base64 when embedding binary in text.

Code Examples

// JavaScript (browser)
btoa("Hello, World!")           // "SGVsbG8sIFdvcmxkIQ=="
atob("SGVsbG8sIFdvcmxkIQ==")   // "Hello, World!"

// Node.js
Buffer.from("Hello").toString("base64")    // "SGVsbG8="
Buffer.from("SGVsbG8=", "base64").toString() // "Hello"

# Python
import base64
base64.b64encode(b"Hello").decode()   # "SGVsbG8="
base64.b64decode("SGVsbG8=")         # b"Hello"

/* Embedding a small PNG icon directly in CSS */
.icon {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...");
}

/* Embedding a font in CSS */
@font-face {
  src: url("data:font/woff2;base64,d09GMgABAAAAAAK...") format("woff2");
}

/* Inline image in HTML */
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0i..." alt="Logo">

// Standard Base64
SGVsbG8gV29ybGQ=

// Base64url (URL-safe)
SGVsbG8gV29ybGQ   ← no padding, - and _ instead of + and /