In this article
You open a config file and see dXNlcjpzZWNyZXQ= next to a field called password. It looks like gibberish, so surely it is protected. It is not. Anyone can turn it back into user:secret in about a second, and so can you.
Base64 is one of those things everyone has seen and few have thought about. Understanding it takes five minutes and clears up two common mistakes: trusting it for secrecy, and using it where it quietly bloats your page.
The problem it solves
Some systems can only carry plain text safely: email bodies, JSON, URLs, HTML. Raw binary data, like an image or a PDF, contains bytes that those systems would mangle. Base64 is a way to write any bytes using only 64 safe characters: A to Z, a to z, 0 to 9, plus and slash.
How it works
Take three bytes. That is 24 bits. Cut those 24 bits into four groups of six bits. Each group is a number from 0 to 63, and each number is looked up in the 64-character alphabet. Three bytes in, four characters out.
| Text | As Base64 | Why |
|---|---|---|
| Man | TWFu | 3 bytes, exactly 4 characters |
| Hi | SGk= | 2 bytes, so one = of padding |
| Hello | SGVsbG8= | 5 bytes, so one = of padding |
The equals sign pads the end when the input is not a multiple of three bytes. It carries no data.
The cost: about 33 percent more
Three bytes become four characters, so the output is always about four thirds the size of the input, plus a little padding. There is no way around it, because you are spending 8 bits of storage to carry 6 bits of data per character.
100 KB is 102,400 bytes, which becomes 136,536 characters. A 1 MB file turns into about 1.33 MB. Compression on the server can win some of it back, but never all.
It is encoding, not encryption
Encryption needs a key. Without the key, the result cannot be read. Base64 has no key: the alphabet is public and the method is fixed, so decoding is trivial. It is a format, like writing a number in hexadecimal.
When it is the right tool
- Tiny inline images. A very small icon as a data URI saves one network request. Keep it to a few kilobytes at most.
- Email attachments. The mail format uses Base64 to carry files through text-only channels.
- Binary inside JSON. When an API has to return a small file in a JSON field, Base64 is the usual answer.
- Tokens. The parts of a JWT use a URL-safe variant, which swaps plus and slash for minus and underscore and drops the padding.
When to avoid it
Putting a large photo in your HTML as Base64 makes the page a third heavier, stops the browser from caching the image on its own, and delays the first paint while the text is parsed. For anything bigger than a small icon, serve a normal image file.
One trap with non-English text
Base64 encodes bytes, not letters. Text must first be turned into bytes, normally with UTF-8. The browser function btoa skips that step and throws an error on characters outside basic Latin, such as Hindi or emoji. A good tool encodes to UTF-8 first, so “नमस्ते” round trips correctly.
Questions people ask
Is Base64 encryption?
No. It is a reversible encoding with no key, so anyone can decode it instantly. Do not use it to protect passwords or private data.
Why is Base64 larger than the original?
Every 3 bytes become 4 characters, so the output is about 33 percent bigger, plus up to two padding characters at the end.
What does the = at the end mean?
It is padding. When the input length is not a multiple of three bytes, one or two equals signs fill the last group. It holds no data.
What is Base64url?
A variant that replaces plus with minus and slash with underscore, and usually drops the padding, so the text is safe inside URLs and file names. JWTs use it.
Why does decoding give garbled text?
The original bytes may not be text, for example an image, or they may use a different character encoding than the one used to decode. Decode as UTF-8 for text.