Base64 Encoding: How It Works and When to Use It

Base64 is a binary-to-text encoding scheme that converts arbitrary binary data into a string of 64 printable ASCII characters. It does not encrypt — it only encodes. The goal is to represent binary data in a form that can safely travel through text-based channels.

You encounter Base64 everywhere: data URIs in CSS, JWT tokens, email attachments, API request bodies. Understanding how and when to use it prevents common mistakes like double-encoding or encoding large files that should be stored as URLs.

What is Base64 encoding

Base64 is defined in RFC 4648. It represents binary data using 64 characters: A–Z (26), a–z (26), 0–9 (10), + and / (2). The = character is used for padding. Every 3 bytes of binary input produce 4 Base64 characters — a 4/3 (33%) size overhead. The name "Base64" refers to the 64-character alphabet used, analogous to Base16 (hex) and Base2 (binary).

How Base64 works (the algorithm)

The encoding algorithm splits the input bytes into 6-bit groups (64 = 2^6). Each 6-bit group maps to one character in the alphabet. Three input bytes (24 bits) produce four 6-bit groups, hence four output characters. If the input length is not a multiple of 3, padding characters (=) are appended to make the output length a multiple of 4. Decoding reverses the process: each character maps back to 6 bits, groups of 4 characters decode to 3 bytes.

Base64 in data URIs

A data URI embeds file content directly in a URL. The format is data:[mediatype];base64,[data]. This allows images, fonts, and other assets to be inlined in HTML or CSS without separate HTTP requests. For small files (under 5KB), the eliminated request outweighs the 33% size overhead. For larger files, separate URLs with CDN caching are more efficient.

<!-- Inline image as data URI -->
<img src="data:image/png;base64,iVBORw0KGgo..." />

/* Inline font in CSS */
@font-face {
  src: url('data:font/woff2;base64,d09GMgAB...');
}

Base64 in APIs and JSON payloads

JSON only supports text — binary data cannot be directly embedded. Base64 solves this: binary content (images, PDFs, audio) is encoded to a Base64 string and included as a JSON field. Common patterns: OpenAI Vision API accepts base64-encoded images, email sending APIs accept base64-encoded attachments, and webhook payloads often include base64-encoded file content. Always document whether your API endpoint expects raw binary or Base64 in HTTP headers.

Base64 in email (MIME)

Email was originally designed for 7-bit ASCII text. Binary attachments (images, PDFs, executables) must be encoded for transmission. MIME (Multipurpose Internet Mail Extensions) uses Base64 as the standard encoding for attachments. The Content-Transfer-Encoding: base64 header signals that the body is Base64-encoded. Most email clients handle this automatically, but understanding it helps debug malformed attachments.

Encoding vs encryption

Base64 is encoding, not encryption. It provides no security — any Base64 string can be trivially decoded. Never use Base64 to "hide" sensitive data. For security, use encryption (AES, RSA) which requires a key to decode. Base64 is sometimes confused with encryption because encoded strings look scrambled. The distinction matters critically for security-sensitive applications.

Frequently Asked Questions