PRACTICAL GUIDE
What Is Base64, and When Should You Actually Use It?
Base64 turns binary data into text that survives systems built for text. It is not compression and it is not encryption — here is what it is for.
Last updated
The problem it solves
Plenty of systems were designed to carry text and behave unpredictably when handed arbitrary bytes: email bodies, JSON string fields, HTTP headers, XML documents, configuration files. A raw binary value dropped into any of them may be mangled, truncated at a null byte, or rejected outright.
Base64 takes any sequence of bytes and re-expresses it using 64 characters that every text system agrees on: A to Z, a to z, 0 to 9, plus and slash. The result travels safely and decodes back to the exact original bytes.
What it costs
Every three bytes become four characters, so the encoded form is about 33 percent larger than the input, plus one or two padding characters at the end. Base64 makes data bigger, never smaller. If someone describes it as compressing a file, they have it backwards.
It is not security
Base64 is a reversible encoding with no key. Anyone can decode it in a second, and the characteristic shape of the output — mixed case letters and digits, often ending in one or two equals signs — makes it instantly recognisable. Storing a password base64-encoded is storing it in the clear with an extra step. HTTP Basic authentication uses base64 for exactly the transport reason above, which is why it depends entirely on HTTPS for its confidentiality.
Where you legitimately meet it
Data URLs, where a small image or font is embedded directly in HTML or CSS rather than fetched as a separate file.
JSON payloads that need to carry a binary blob — a certificate, a signature, a thumbnail — through a field that only accepts strings.
JWTs, whose header and payload are base64url-encoded.
Email attachments, which have been encoded this way since long before the web.
The URL-safe variant
Plus and slash both have their own meaning inside a URL, and the equals sign is awkward in a query string. The base64url variant substitutes minus and underscore for those two characters and usually drops the padding. It is what you see in JWTs and in most token formats. The two variants are not interchangeable: decoding one with a strict decoder for the other will fail.
The Unicode trap
The classic browser functions for this, btoa and atob, operate on characters in the 0 to 255 range. Give btoa a string containing an accented letter, an emoji or any non-Latin script and it throws an error. The fix is to convert the text to UTF-8 bytes first and encode those. Our encoder does this, so 'olá' and '日本語' round-trip correctly rather than failing.
When not to reach for it
If you are sending a file over a channel that handles binary perfectly well — a normal HTTP upload, for example — base64 just adds a third to the payload for nothing. Use it when the surrounding format forces text on you, not as a default.
Frequently asked questions
Why does base64 output often end in one or two equals signs?
That is padding. Base64 works on groups of three bytes; when the input length is not a multiple of three, the final group is padded so the output length stays a multiple of four. One leftover byte produces two equals signs, two leftover bytes produce one.
Is base64 the same as encryption?
No. Encryption requires a key and is designed to be irreversible without it. Base64 requires nothing and is reversible by anyone, by design. They solve entirely different problems.
Can I base64 an image and paste it into CSS?
Yes, as a data URL. It is a reasonable technique for very small assets such as an icon, since it removes a network request. For anything larger it inflates your stylesheet by a third of the file size and prevents the browser from caching the image separately.
Why did my base64 string fail to decode?
Common causes are line breaks introduced by copying from an email or terminal, missing padding, or a base64url string being fed to a strict standard decoder — the minus and underscore characters are not valid in the standard alphabet.