What Is Base64 and Why Does It Keep Showing Up
That weird text string in your code isn't gibberish. Here's what it actually means.
You're debugging an API. Somewhere in the response, you see this:
SGVsbG8gV29ybGQh
Or you're looking at an email's raw source and find chunks of text that look like keyboard mashing. Or your CSS has a background image that starts with data:image/png;base64, followed by a wall of characters.
That's Base64. It's everywhere once you start looking.
What Base64 Actually Is
Binary data—images, files, anything that isn't plain text—doesn't play nice with systems designed for text. Email was built for ASCII characters. URLs have restricted character sets. JSON doesn't handle raw binary.
Base64 converts binary data into a string of 64 "safe" characters: A-Z, a-z, 0-9, +, and /. Any binary file becomes a text string that won't break when passed through text-only systems.
It's not encryption. It's not compression. It's just encoding—a different way of representing the same data.
Where You'll See It
Email attachments. When you send a PDF via email, it gets Base64 encoded, transmitted as text, then decoded on the other end.
Data URIs. That data:image/png;base64,... syntax embeds images directly in HTML or CSS. No separate file request needed.
API authentication. Basic auth sends username:password as a Base64 string. (This is why basic auth over HTTP is insecure—Base64 isn't encryption.)
JWTs. JSON Web Tokens are three Base64-encoded JSON objects joined by dots.
Binary data in JSON. JSON can't include raw bytes, so binary gets Base64 encoded first.
Encoding vs Encryption
People confuse these constantly.
Base64 encoding: Reversible by anyone. No key needed. Not secure. Just reformatting.
Encryption: Reversible only with the correct key. Actually secure.
If you can decode something without a password, it's not encrypted. Base64 "hides" data only from people who don't know what Base64 is—which is nobody who would actually want to read it.
Don't store passwords as Base64. Don't assume Base64 data in an API is private. It's just text that looks weird.
The Size Problem
Base64 increases data size by about 33%. A 100KB image becomes ~133KB when Base64 encoded.
This matters for data URIs. Embedding a large image as Base64 in your CSS makes the file bigger and can't be cached separately. Good for tiny icons. Bad for hero images.
Practical Uses
Debugging. See Base64 in an API response? Decode it to see what's inside.
Embedding small images. Icons under 1-2KB are often worth embedding as data URIs to save HTTP requests.
Passing binary through text channels. Need to include file contents in JSON? Base64 encode them.
Reading JWTs. Decode each section to see the header, payload, and understand what claims the token contains.
Base64 isn't complicated. It's just a way to turn any data into a text string. Recognize it, decode when needed, and know it's not providing any security—just compatibility.