What Is Base64 Encoding and How Does It Work?

Base64 encoding is everywhere — JWTs, data URIs, email attachments, OAuth tokens — but its mechanics are rarely explained clearly. This guide covers why Base64 was invented, exactly how the encoding works, and when (and when not) to use it.

Why Base64 Was Invented

In the early days of email (SMTP, 1982), the protocol was designed to carry 7-bit ASCII text only. Binary attachments — images, executables, compressed files — contain arbitrary byte values including control characters and bytes with the high bit set, which SMTP relays would mangle or strip.

Base64 was created to solve this problem: it maps arbitrary binary data to a safe subset of 64 printable ASCII characters that survive transit through any text-based protocol. The name comes directly from the character set size — 64 characters, each representing 6 bits.

MIME (1992) standardised Base64 as the encoding for email attachments, and from there it spread to every protocol that needed to embed binary data in text: HTTP headers, HTML, CSS, JSON, XML, JWTs, and URLs.

How the Encoding Works: 3 Bytes → 4 Characters

Base64 operates on 3-byte groups (24 bits at a time):

1. Take 3 bytes of input (24 bits).
2. Split them into four 6-bit groups.
3. Map each 6-bit group to one of 64 printable characters using the Base64 alphabet.

Example: encoding the ASCII string Man:

Text:   M        a        n
ASCII:  77       97       110
Binary: 01001101 01100001 01101110
        ↓ split into 4 × 6-bit groups ↓
        010011  010110  000101  101110
          19      22       5      46
          T       W       F      u
Base64: TWFu

The three-byte input Man produces the four-character output TWFu. This 4/3 ratio is where the ~33% size overhead comes from.

The Base64 Alphabet

The 64 characters are: A–Z (values 0–25), a–z (26–51), 0–9 (52–61), + (62), and / (63). Padding uses =.

These 64 characters were chosen because they are present in every ASCII-compatible character set and are safe to transmit through any text-based protocol.

Standard vs URL-Safe Base64

The + and / characters in standard Base64 cause problems in URLs: + means space in HTML form encoding, and / is a path separator. Embedding a standard Base64 string in a URL without percent-encoding it breaks parsers.

Base64url (URL-safe Base64) solves this by substituting:

• + → -
• / → _
• Padding (=) is typically omitted

Base64url is used in JWTs (the header and payload sections), OAuth 2.0 PKCE code challenges, and anywhere an encoded value appears directly in a URL or filename.

Real-World Uses

Data URIs

Images, fonts, and other binary assets can be embedded directly in HTML or CSS as Base64-encoded data URIs:

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

This eliminates an HTTP request but increases the page weight by ~33%.

JWTs (JSON Web Tokens)

A JWT is three Base64url-encoded strings joined by dots: header.payload.signature. The header and payload are JSON objects encoded as Base64url (not encrypted — anyone can decode them). Only the signature verifies authenticity.

MIME Email Attachments

Email attachments are Base64-encoded in the MIME envelope so binary files (PDFs, images, executables) can be sent through SMTP, which only handles 7-bit ASCII reliably.

HTTP Basic Authentication

The Authorization: Basic ... header encodes username:password in standard Base64. This is not encryption — anyone who intercepts the header can decode it instantly. Always use HTTPS with Basic Auth.

When NOT to Use Base64

• For security. Base64 is encoding, not encryption. Never use it to obscure sensitive data.
• For large binary transfers. The 33% size overhead makes Base64 inefficient for large files. Send binary data as multipart/form-data or via a binary protocol instead.
• When the receiver expects binary. If an API endpoint accepts binary blobs directly (most modern REST APIs do via application/octet-stream), Base64 adds unnecessary overhead.

Encode and Decode Base64 Online

Need to quickly encode or decode a Base64 string without writing code? The Base64 tool on DevEssentials handles text encoding, file encoding, and URL-safe Base64 — all client-side, no data sent to any server.

Ready to encode or decode? Open the Base64 Encoder/Decoder →