Base64 Explained: What It Is, Where You’ll Meet It, and Why It Isn’t Encryption

Base64 shows up everywhere once you know what it looks like: the long string after data:image/png;base64, in a CSS file, the middle section of a JWT, the Authorization: Basic header, an email attachment in raw form, a certificate file. People regularly mistake it for encryption. It is not; it is a way of writing binary data using 64 printable characters so it survives systems that only handle text. This guide explains how it works, when to use it, when not to, and how to decode what you find.

How it works

Take the bytes, three at a time (24 bits). Split those into four groups of 6 bits. Each 6-bit value (0–63) maps to one character from this alphabet: A–Z, a–z, 0–9, +, /. If the input isn’t a multiple of three bytes, pad the output with = so it is a multiple of four characters.

“Hi!” is bytes 72, 105, 33 → in binary 01001000 01101001 00100001 → regrouped 010010 000110 100100 100001 → 18, 6, 36, 33 → SGkh. “Hi” (two bytes) becomes SGk=. The Base64 Encoder & Decoder does this for text, files and images in either direction.

Advertisement

The cost: output is 4⁄3 the size of the input, a 33% overhead, plus a little more if line breaks are inserted.

Variants

• Standard (RFC 4648): the alphabet above with + and /, padded with =.
• URL-safe: - and _ replace + and /, and padding is often dropped, because +, / and = have meanings in URLs. JWTs use this.
• MIME: standard alphabet with a line break every 76 characters, used in email.

If a decoder rejects a string that looks like Base64, the variant is usually the reason: swap -_ for +/ and add = padding until the length is divisible by four.

Where you’ll meet it

Context	What’s encoded	Note
Data URIs (data:image/svg+xml;base64,…)	Images, fonts, small files inline in HTML/CSS	Saves a request; costs 33% size and blocks caching
HTTP Basic auth	username:password	Not secure on its own; anyone can decode it. Only over HTTPS
JWT tokens	Header and payload JSON	Readable by anyone holding the token; the signature prevents tampering, not reading
Email (MIME)	Attachments, non-ASCII text	Why raw emails look like walls of gibberish
PEM certificates and keys	DER-encoded binary	Between -----BEGIN…----- and -----END…-----
API responses	Binary fields (file contents, thumbnails) inside JSON	JSON has no binary type
Config and env files	Secrets, multi-line values	Obscures, does not protect

Base64 is not security

This is the important point. Anything Base64-encoded can be decoded by anyone in one step with no key. A “hidden” API key in Base64 in a JavaScript bundle is not hidden. Basic auth credentials over plain HTTP are readable by anyone on the network. A JWT’s payload (user ID, email, roles) is readable by anyone who has the token, which is why sensitive data should not go in it. If you need confidentiality, encrypt; if you need integrity, sign. Base64 does neither. It only moves bytes safely through text-only channels.

When to use it (and when not to)

Use it for: small icons and fonts inlined into CSS (under ~2 KB, to save a request), binary fields in JSON, anything that has to pass through a text-only system.

Don’t use it for: large images in HTML (the 33% overhead and loss of caching outweigh the saved request; use a real file and the Image Compressor), hiding secrets, or anything where the recipient can handle raw binary.

Decoding what you find

1. Paste the string into the decoder. If it fails, check for the URL-safe variant, missing padding, or line breaks and whitespace that need stripping.
2. If the output is readable text or JSON, you’re done. Format the JSON with the JSON Formatter.
3. If the output is binary, look at the first bytes: ‰PNG is a PNG, ÿØÿ is a JPEG, %PDF is a PDF, PK is a ZIP. Save with the right extension.
4. For a JWT, decode only the middle segment (between the dots) to read the claims; the first segment is the algorithm header and the third is the signature.

In code

JavaScript: btoa("Hi!") → SGkh; atob("SGkh") → Hi!. For non-ASCII text encode to UTF-8 bytes first, or btoa throws. Node: Buffer.from(str).toString('base64'). Python: base64.b64encode(b"Hi!"). PHP: base64_encode(). Shell: echo -n "Hi!" | base64. Every language has it built in.

Frequently asked questions

Is Base64 encryption?

No. It is reversible by anyone with no key. It hides nothing.

Why does my Base64 string end with = or ==?

Padding, because the input length wasn’t a multiple of three bytes. One = for two leftover bytes, two for one.

Why is a Base64 image bigger than the original file?

Every three bytes become four characters, a 33% increase. That is the cost of representing binary as text.

Can I decode a JWT with a Base64 decoder?

Yes, the header and payload segments. Use URL-safe decoding and add padding. You cannot verify the signature this way; that needs the key.