Base64 Encoding Explained: JWT, Data URIs & API Auth

Open your browser's developer tools, inspect a network request, and you'll almost certainly encounter Base64-encoded strings — in Authorization headers, in JWT tokens, in src attributes of images, and in cookie values. Base64 is one of the most widely used encoding schemes in computing, yet it's also one of the most frequently misunderstood. This guide explains what Base64 is, how it works, and exactly where you'll encounter it as a developer.

Why Does Base64 Exist?

The root problem Base64 solves is this: many communication systems and protocols were designed for plain ASCII text and cannot reliably transmit arbitrary binary data. Email was the canonical example — SMTP, the original email protocol, was designed to transfer 7-bit ASCII text only. Sending a binary file (like a JPEG image or PDF) directly over SMTP would result in corruption.

Base64 was invented to bridge this gap. By converting binary data into a text-safe representation using only 64 printable ASCII characters, any binary content can be safely embedded in or transmitted through text-only systems. The 64 characters used are: uppercase A–Z (26), lowercase a–z (26), digits 0–9 (10), plus + and / (2), totalling 64. The = character is used as padding to ensure output length is always a multiple of 4.

How Does Base64 Encoding Work?

The algorithm processes input in 3-byte (24-bit) chunks. Each 24-bit chunk is split into four 6-bit groups. Each 6-bit value (0–63) maps to one of the 64 characters in the Base64 alphabet. This is why Base64 output is always exactly 4/3 the length of the input — 3 bytes in produce 4 characters out, meaning a 33% size increase.

Input bytes:  M=77 (01001101)  a=97 (01100001)  n=110 (01101110)
24 bits:      010011 010110 000101 101110
Base64 index: 19     22     5      46
Base64 chars: T      W      F      u
Result: TWFu

If the input is not a multiple of 3 bytes, padding characters (=) are added to make the output a multiple of 4 characters. One padding = means one extra byte was added; == means two bytes were padded.

Base64 vs. Base64URL

Standard Base64 uses + and /, which are meaningful characters in URLs. To safely use Base64 in URLs and filenames without percent-encoding, the Base64URL variant replaces + with - and / with _, and omits padding = characters. JWT tokens use Base64URL encoding for this reason.

Where You'll Encounter Base64 as a Developer

1. JSON Web Tokens (JWT)

JWTs are arguably the most common place developers encounter Base64 in modern web development. A JWT has three sections separated by dots: header.payload.signature. The header and payload are each Base64URL-encoded JSON objects. The signature is a cryptographic hash that is also Base64URL-encoded.

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.
eyJzdWIiOiJ1c2VyXzEyMyIsInJvbGUiOiJhZG1pbiIsImV4cCI6MTcxNzAwMDAwMH0.
[signature]

Decoded payload:
{"sub":"user_123","role":"admin","exp":1717000000}

2. HTTP Basic Authentication

The HTTP Basic Auth scheme transmits credentials as a Base64-encoded string in the Authorization header. The format is username:password encoded to Base64.

// username:password → Base64
admin:s3cr3t → YWRtaW46czNjcjN0

Authorization: Basic YWRtaW46czNjcjN0

Important: Basic Auth over plain HTTP is insecure because Base64 is trivially reversible. Always use HTTPS with Basic Auth.

3. Data URIs (Inline Images & Fonts)

Data URIs allow you to embed binary content directly into HTML or CSS without a separate HTTP request. The binary content (e.g., a PNG image) is Base64-encoded and included inline.

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

This technique reduces HTTP requests and is useful for small images like icons and logos. However, it increases HTML/CSS file size and prevents the browser from caching the image independently, so use it judiciously.

4. Email Attachments (MIME)

MIME (Multipurpose Internet Mail Extensions) uses Base64 to encode email attachments so they can be safely transmitted over the SMTP protocol. Every time you receive an email with a PDF or image attachment, the binary file has been Base64-encoded by your email client before sending.

5. API Credentials & Secrets

Many cloud services and APIs use Base64 encoding for credentials, public keys, and certificates. For example, Google Cloud service account credentials contain Base64-encoded private key data, and Stripe's webhook signing secrets are Base64-encoded strings.

Base64 Encoding in Code

$encoded = base64_encode("Hello, World!");
// → "SGVsbG8sIFdvcmxkIQ=="

$decoded = base64_decode("SGVsbG8sIFdvcmxkIQ==");
// → "Hello, World!"

// Encode
btoa("Hello, World!");
// → "SGVsbG8sIFdvcmxkIQ=="

// Decode
atob("SGVsbG8sIFdvcmxkIQ==");
// → "Hello, World!"

// For Unicode strings, use TextEncoder:
const bytes = new TextEncoder().encode("café");
const b64 = btoa(String.fromCharCode(...bytes));

Common Misconceptions

• Base64 is NOT encryption. Anyone can decode it instantly. It is purely an encoding scheme for safe text transmission, not a security measure.
• Base64 does NOT compress data. It makes data ~33% larger. If you need compression, use gzip or Brotli before or after encoding.
• Base64 is NOT hashing. Hashing is a one-way transformation; Base64 is fully reversible.