Base64 Encoding: What It Actually Is (And When You Need It)

That Time I Broke Email Attachments for a Week

Look, I'm going to admit something embarrassing. In 2022, I shipped code that corrupted every PDF attachment our system sent. For six days. Nobody noticed until a client asked why their invoices looked like abstract art.

The fix? One line. Buffer.from(file).toString('base64'). I'd been sending raw binary through a JSON API like an absolute donkey.

Here's the thing—I'd been coding for six years at that point. Still made this mistake. So let's talk about what Base64 actually is, because clearly I needed this explained to me too.

So What Is It, Really?

Base64 takes any data—text, images, whatever—and turns it into a string of boring, safe characters. Letters, numbers, plus signs, slashes, and equals signs for padding. That's it.

Why bother? Because the internet was built by people in the 80s who didn't anticipate us sending cat GIFs through email. Old systems choke on binary data. They see a byte that looks like a control character and just... die.

Base64 says "hey, I'll translate your weird binary into alphabet soup that won't break anything." The tradeoff? Your data gets about 33% bigger. Three bytes become four characters. Math.

When You'll Actually Use This

Embedding stuff in CSS. Ever seen this nightmare?

background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...);

That's a whole image, inline. No extra HTTP request. Useful for tiny icons—terrible for anything bigger than like 2KB because your CSS file becomes enormous.

Sending files through APIs. JSON doesn't do binary. Full stop. If you need to POST a file, Base64 is usually how. (Or use multipart/form-data, but that's a whole thing.)

Those JWT tokens everyone loves. That eyJhbGciOiJIUzI1NiIsInR5cCI6... gibberish? Base64-encoded JSON. Three chunks, separated by dots. Not encrypted—literally anyone can decode it and read your claims. So uh, don't put secrets in there.

Basic auth headers. Authorization: Basic dXNlcjpwYXNz is just user:pass encoded. Again: not encrypted. If you're not on HTTPS, you're sending credentials in plaintext with extra steps.

The Tool (Because I Got Tired of Googling)

Half the Base64 tools online look like they haven't been updated since 2004. Some of them might be logging your input—who knows. I got paranoid enough to build one that runs entirely in your browser.

Base64 Encoder/Decoder — paste, click, done. No server. I use it almost daily.

Stuff That'll Trip You Up

Here's where I've watched junior devs (and, okay, myself) mess up:

It's not encryption, for the love of— I've reviewed PRs where someone "secured" passwords by Base64 encoding them before storing. Please. No. Anyone with a free online tool can decode it in two seconds. It's encoding, not encryption. Different words, different meanings.

URL-safe Base64 exists. Regular Base64 uses + and /, which break URLs. There's a variant that swaps those for - and _. If your encoded string is going into a query parameter, you need the URL-safe version or you'll have a bad time.

Whitespace will ruin your day. Some encoders add line breaks every 76 characters (old email standard). Some don't. If your decoder is failing mysteriously, check for stray newlines. I've lost hours to this.

UTF-8 vs whatever else. "Hello" in UTF-8 produces different Base64 than "Hello" in UTF-16. If you're decoding something and getting garbage, check your character encoding first.

Quick Cheat Sheet

| Input | Output | Notes | | ----- | -------- | ---------------- | | Hi | SGk= | Padding! | | Hello | SGVsbG8= | Still padding | | 🔥 | 8J+UpQ== | Emoji works fine |

That = sign is padding. Base64 works in groups of 3 bytes → 4 characters. If your input length isn't divisible by 3, you get equals signs to fill the gap.

Anyway, stop using sketchy websites. Here's the tool.