Base64 Encoding Explained (With Actual Examples)

Base64 shows up everywhere: JWT tokens, email attachments, CSS data URIs, API auth headers. Most developers learn to use it without really understanding what it's doing or why. Here's the real explanation.

The Problem Base64 Solves

The internet was built on text protocols. HTTP, SMTP (email), JSON — they all assume you're sending text. But images, PDFs, and executables are binary data: every possible byte value from 0 to 255. Binary data contains bytes that text protocols interpret as control characters — line endings, null bytes, special signals. Transmitting raw binary through text channels corrupts it.

Base64 takes that binary data and converts it entirely into printable ASCII characters. The resulting string looks like gibberish but is valid text that travels safely through any text-based system.

What Base64 Actually Does

It takes 3 bytes of binary data and converts them to 4 characters chosen from a 64-character alphabet (A-Z, a-z, 0-9, +, /). The '=' at the end is padding when the input isn't divisible by 3. That's it. The math is simple, the output is predictable, and the whole thing is reversible without any key or secret.

Real-World Uses You'll Encounter

• HTTP Basic Auth: credentials are Base64-encoded as 'username:password'. The header looks like 'Authorization: Basic dXNlcm5hbWU6cGFzc3dvcmQ='. Decode it and you get plaintext credentials — Base64 is not security here, just encoding.
• Data URIs in CSS/HTML: embed small images directly in code without a separate HTTP request. 'background-image: url(data:image/png;base64,iVBOR...)' This works well for icons under 4KB.
• JWT tokens: the header and payload sections of JWTs are URL-safe Base64 (with = padding removed). You can decode them without any key — only the signature needs the secret.
• Email attachments: MIME encoding uses Base64 to attach binary files to text-based email messages.
• API responses: some APIs return binary files (images, PDFs) as Base64 strings inside JSON responses.

When NOT to Use Base64

Storing large files in a database as Base64. The 33% size inflation, combined with the CPU cost of encoding/decoding, adds up fast. Store binary files in object storage (S3, Cloudflare R2) and keep only the URL in your database.

For security. As mentioned, Base64 is trivially reversible. Anyone with the encoded string has the original data. Never use it as a substitute for encryption.

Decoding Base64 You Find in the Wild

See a suspicious-looking string in an HTTP request? Paste it in our decoder. A lot of Base64 in the wild is just encoded JSON — configuration data, feature flags, or user data that got Base64-encoded for transport. Sometimes you find interesting things by decoding JWT payloads. It's a useful debugging skill.