Base64 Encoding Explained: What It Is, How It Works, and When Developers Use It
Published: July 6, 2025 · 6 min read
If you've ever looked at a data: URL in CSS, inspected a JWT token, or peeked at the raw source of an email with an image attachment, you've seen Base64. Those long strings of seemingly random letters, numbers, and plus signs — ending with one or two equals signs — are Base64-encoded data. But what is it actually doing, and why do developers reach for it so often?
What Is Base64? The Core Concept
Computers store everything as binary — sequences of 0s and 1s. But many systems in the digital world — email protocols, JSON, HTML, URLs — are designed to handle text, not raw binary. Try embedding raw image bytes into a JSON string and you'll corrupt the payload. Try sending binary data through an email server from 1982 and it'll strip out anything that isn't plain ASCII text.
Base64 is a binary-to-text encoding scheme. It takes arbitrary binary data (images, PDFs, cryptographic signatures, audio) and converts it into a string of 64 safe, printable ASCII characters:
A–Z (26 chars) + a–z (26 chars) + 0–9 (10 chars) + "+" and "/" = 64 characters
The = character is used as padding at the end when the input doesn't divide evenly into the encoding scheme. That's why you'll see Base64 strings end with = or ==.
How Base64 Works (The Short Version)
Under the hood, Base64 works by taking 3 bytes of binary data (24 bits), splitting those 24 bits into 4 groups of 6 bits each, and mapping each 6-bit value to one of the 64 characters in the Base64 alphabet. If the input isn't a multiple of 3 bytes, padding is applied.
A quick visual of the encoding flow:
Input: "Man" Binary: 01001101 01100001 01101110 (3 bytes = 24 bits) 6-bit: 010011 | 010110 | 000101 | 101110 Decimal: 19 | 22 | 5 | 46 Base64: T | W | F | u Output: "TWFu"
Notice that 3 bytes of input became 4 characters of output — that's the ~33% size increase you always get with Base64 encoding. It's not compression; it's representation.
Base64 Is Encoding — Not Encryption
This is the most important thing to understand: Base64 provides zero security. It is trivially reversible. Anyone who sees a Base64 string can decode it back to the original data in milliseconds. If you need to protect data, use actual encryption (AES, RSA). If you just need to safely transport binary data through a text-only channel, use Base64.
Think of Base64 like putting a document in an envelope with a clear window. Anyone can still read it — you've just changed the packaging.
4 Practical Use Cases Every Developer Encounters
1. Data URLs: Embedding Images Directly in HTML and CSS
Instead of linking to an external image file, you can embed the image data directly in your HTML or CSS using a data URL. The image bytes are Base64-encoded and placed right in the src attribute:
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHx gljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot">
This eliminates an HTTP request at the cost of a ~33% larger file and uncacheable image data. Use data URLs for tiny, frequently used icons (favicons, UI sprites under 1 KB). Avoid them for photos — the size penalty outweighs the request savings.
2. HTTP Basic Authentication
When you access a password-protected resource via HTTP Basic Auth, the browser Base64-encodes your credentials and sends them in the Authorization header:
username:password → Base64 → dXNlcm5hbWU6cGFzc3dvcmQ= Authorization: Basic dXNlcm5hbWU6cGFzc3dvcmQ=
This is exactly why Basic Auth must always be paired with HTTPS. Without TLS encryption, anyone intercepting the request can decode the Base64 string and recover the credentials in plain text. Base64 adds no secrecy — it only ensures the credentials are transmitted as safe ASCII characters.
3. JSON Web Tokens (JWT)
JWTs are the backbone of modern API authentication. A JWT looks like three Base64-encoded segments separated by dots:
eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiIxMjM0NTY3ODkwIn0.dozjgNryP4J3jV sNHoxk8QeJHJ2Q2N8YhrZGq7vXhSo
The first segment is the header (algorithm info), the second is the payload (user data, expiration), and the third is the cryptographic signature. The header and payload are Base64-encoded — not encrypted. Anyone can decode them and read the contents. The signature is what prevents tampering, not secrecy.
4. Email Attachments (MIME)
Email was originally designed for plain ASCII text. When you attach an image or PDF to an email, your email client Base64-encodes the binary file so it can travel safely through SMTP servers — some of which still run software written decades ago. The MIME standard specifies Base64 as the content-transfer-encoding for binary attachments.
Before and After: See Base64 in Action
Here's a small piece of text before and after Base64 encoding:
Original text: "Hello, World!" Base64 encoded: "SGVsbG8sIFdvcmxkIQ=="
And here's what happens when you encode a tiny 1×1 pixel red PNG:
Base64: iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8 /5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg==
The size inflation is visible even at tiny scales — but the benefit is that this binary image data can now live anywhere text can live.
Try It Yourself with Our Free Base64 Tool
The best way to understand Base64 is to play with it. Encode a string, decode it back, encode a tiny image — see it in action. Our free Base64 Encoder / Decoder lets you encode text to Base64 and decode Base64 back to text instantly, all in your browser. No data leaves your machine. Try the Base64 tool →
Base64 is one of those unglamorous, behind-the-scenes technologies that quietly powers huge swaths of the internet. Once you understand what it does — and what it doesn't do — you'll start seeing it everywhere. And now you'll know exactly what those trailing equal signs mean.