You need to put a file somewhere that only accepts text. Maybe an image has to go inline in a stylesheet, a small certificate has to sit in a JSON config, or a binary blob has to pass through a field that strips anything unusual. Base64 solves this by rewriting the file using a handful of safe characters, so binary data can travel as plain text. Here is what that means, when to reach for it, and how to get the file back.
TL;DR Base64 turns a file’s bytes into plain text so it can be embedded or pasted where only text is allowed. A data URI wraps that text with a type prefix for inline use in HTML and CSS. The encoded string is about a third larger than the file. Decoding rebuilds the original exactly. Convert both ways in your browser with the file to Base64 encoder, nothing uploaded.
What is Base64 and why convert to it?
Base64 is a way of writing any data using 64 text characters: the letters A to Z in both cases, the digits 0 to 9, and two extra symbols. Because those characters are safe almost everywhere, you can take a file that is full of bytes a text field would choke on and express it as a tidy text string instead.
The reasons to do this come up more often than you might expect:
- Embedding assets inline. A small icon or font can be written straight into HTML or CSS as Base64, saving a separate network request.
- Pasting binary into config or JSON. Many config formats only hold text. Base64 lets you store a small file, like a key or a logo, as a string value.
- Passing through text-only channels. Some forms, logs and APIs accept text but mangle raw binary. Encoding first keeps the data intact end to end.
Base64 is not encryption and not compression. It does not hide the data or make it smaller. It only changes how the same bytes are represented, so they survive a trip through a text-only path.
Plain Base64 or a data URI?
These are two flavours of the same output, and which you want depends on where it is going.
Plain Base64 is just the encoded characters, nothing else. Use it when the thing receiving it already knows what the data is, such as a specific JSON field or an API parameter that expects the raw string.
A data URI wraps that same Base64 with a prefix like data:image/png;base64, so it is self-describing. A browser reading a data URI knows the type immediately and can use it directly as an image source or a CSS background. Reach for this when you want to paste the result into markup and have it just work.
The encoder gives you either with a single toggle, so you can match whatever the destination expects.
Why the encoded text is larger
Encoding to Base64 makes the output roughly a third bigger than the original file. This is expected, not a fault. Base64 packs every three bytes of the file into four text characters, and that four-for-three ratio is where the growth comes from.
The practical takeaway is to use Base64 for small files. An inline icon, a tiny font, a short certificate: these are fine. A large image or a video would balloon and slow down whatever loads it, so those are better left as real files and linked to normally.
How to decode Base64 back into a file
Decoding is the exact reverse of encoding, so the file you get back is byte for byte identical to the one that went in. Paste the string, and the bytes are reconstructed and handed back as a downloadable file.
One detail matters here. If you decode a full data URI, the type travels with it, so the result already knows what it is. If you decode a bare Base64 string with no prefix, nothing in the text says whether it was a PNG, a PDF or a ZIP. Give the decoded file the right name and extension yourself so it opens with the correct program.
A quick sanity check
If a decoded file refuses to open, the usual culprit is a truncated string. Base64 has to be complete to decode cleanly, so a copy that dropped the last few characters will fail or produce a corrupt file. Re-copy the whole string and try again. For files where correctness really matters, compare a checksum of the original against the decoded copy, covered in the guide on verifying a file checksum, and confirm the two match.
The whole conversion runs on your own machine. The file to Base64 encoder reads and rebuilds files in your browser, so nothing is uploaded, which matters when the file is a key, a credential or anything else you would rather not send to a server.