Base64 Encoding: What It Is, How It Works and When to Use It

Why Base64 Exists

Computers store data as binary — sequences of 0s and 1s. But many systems that transmit data — email protocols, HTTP headers, URLs, databases — were designed to handle text (ASCII characters), not arbitrary binary data.

The problem: if you try to send a binary file (like an image or document) through a text-only channel, the binary values may include control characters (values 0-31 in ASCII) that have special meanings in the protocol. For example, ASCII 10 is a newline and ASCII 0 is a null terminator. Including these in transmitted data can corrupt or truncate it.

The solution: encode the binary data into a representation that uses only safe, printable ASCII characters. This is exactly what Base64 does.

Base64 takes any binary input and represents it using 64 printable characters: uppercase A-Z (26), lowercase a-z (26), digits 0-9 (10) and the symbols + and / (2). All 64 of these characters are safe in virtually every text-based protocol.

How Base64 Encoding Works

The encoding process works in steps:

1. 1Take the input bytes (binary data).
2. 2Group them into sets of 3 bytes (24 bits).
3. 3Split each 24-bit group into four 6-bit groups.
4. 4Each 6-bit group (values 0-63) maps to one character in the Base64 alphabet.
5. 5If the input length is not divisible by 3, add = padding characters to make the output length a multiple of 4.

Example: encoding the text "Man" M = ASCII 77 = 01001101 a = ASCII 97 = 01100001 n = ASCII 110 = 01101110

Combined bits: 010011010110000101101110 Split into 4 groups of 6: 010011 | 010110 | 000101 | 101110 Decimal values: 19, 22, 5, 46 Base64 characters: T, W, F, u Result: TWFu

This is why Base64 output is always 33% longer than the input — three bytes become four characters.

Common Uses of Base64 in Web Development

Data URIs — embedding images directly in HTML or CSS without a separate HTTP request: <img src="data:image/png;base64,iVBORw0KGgo..." /> background-image: url("data:image/svg+xml;base64,PHN2Zy...")

This eliminates a network request for small icons and inline graphics, improving page load for critical above-the-fold content.

HTTP Basic Authentication — credentials are encoded as Base64 in the Authorization header: Authorization: Basic dXNlcm5hbWU6cGFzc3dvcmQ= (This is NOT encryption — the credentials are trivially decodable. Always use HTTPS.)

JWT tokens — JSON Web Tokens use Base64URL (a variant that replaces + with - and / with _ for URL safety) to encode the header and payload. JWT tokens have three Base64-encoded parts separated by dots.

Email attachments — the MIME standard uses Base64 to encode binary attachments in email messages, which are transmitted as text.

API responses — some APIs return binary data (images, PDFs, documents) as Base64-encoded strings in JSON responses.

Base64 in Code: JavaScript, Python and PHP

JavaScript (Browser): btoa(string) — encodes a string to Base64 atob(base64string) — decodes Base64 to string

For encoding binary files or non-ASCII text in the browser, use the FileReader API or TextEncoder: const encoded = btoa(String.fromCharCode(...new Uint8Array(binaryData)))

JavaScript (Node.js): Buffer.from('Hello').toString('base64') // encode Buffer.from('SGVsbG8=', 'base64').toString() // decode

Python: import base64 encoded = base64.b64encode(b'Hello').decode('utf-8') decoded = base64.b64decode('SGVsbG8=').decode('utf-8')

PHP: $encoded = base64_encode('Hello'); $decoded = base64_decode('SGVsbG8=');

Go: import "encoding/base64" encoded := base64.StdEncoding.EncodeToString([]byte("Hello")) decoded, _ := base64.StdEncoding.DecodeString("SGVsbG8=")

Base64 Is Encoding, Not Encryption

The most important thing to understand: Base64 is a reversible encoding, not a security measure. Anyone can decode a Base64 string instantly without any key or password.

Do NOT use Base64 to: • Hide sensitive information — it provides zero security • "Encrypt" passwords or tokens — completely insecure • Protect API keys in client-side code — equally visible in the source

Base64-encoded strings are often recognizable by their character pattern and the == or = padding at the end. Any developer seeing a Base64 string can decode it in seconds.

For actual security, use: • TLS/HTTPS — for securing data in transit • AES-256 — for encrypting data at rest • bcrypt or Argon2 — for hashing passwords • HMAC-SHA256 — for message authentication

Base64 is a tool for encoding, not securing. Use it correctly: to safely transmit binary data over text channels, not to hide information.