How to use it
Choose “Encode” or “Decode” under “Direction”.
- Encode: with “Input type” set to “Text”, what you type in “Original text” comes out in “Base64 result”.
HellogivesSGVsbG8=, andcafégivesY2Fmw6k=. Switch to “File” and a file drop area appears. - Decode: put Base64 or a
data:URL in “Base64 string” and the original text appears in “Decoded result”.
Next to the result, “Send result to decode input” and “Send result to encode input” move what you just got into the input of the opposite direction. They’re handy for decoding something you’ve just encoded to confirm it matches the original.
The “URL-safe (-_, no padding)” checkbox applies to both text encoding and decoding. File encoding doesn’t have this option.
Base64 carries bytes, not characters
Base64 is a notation that turns every 3 bytes into 4 characters. To encode text, the characters first have to become bytes, and this tool always uses UTF-8 for that step. The character € is 3 bytes in UTF-8, so in Base64 it’s exactly 4 characters: 4oKs.
When the byte count isn’t a multiple of 3, = is added at the end to fill out the last group of 4 characters. That’s padding.
| Original | Bytes | Base64 result |
|---|---|---|
a |
1 | YQ== |
ab |
2 | YWI= |
abc |
3 | YWJj |
€ |
3 | 4oKs |
😀 |
4 | 8J+YgA== |
Because 3 bytes become 4 characters, the result is about a third longer than the original. Turn a file into a data URL to embed it in HTML or CSS and its size grows by that much.
The browser’s built-in btoa function accepts only characters in the code point range 0–255, so it throws an error on a string that contains a character outside that range, such as € or an emoji. This tool doesn’t use that function. It converts the UTF-8 bytes directly, so it encodes any character, and decoding turns the bytes back into text as UTF-8 too.
What the URL-safe option changes
Besides upper- and lowercase English letters and digits, standard Base64 uses two more characters, + and /, and pads with =. All three mean something else in a URL, so turn on “URL-safe (-_, no padding)” when the result is going into an address, a query value, or a file name. JWTs (JSON Web Tokens) use this form.
| Original | Option off | Option on |
|---|---|---|
>>>??? |
Pj4+Pz8/ |
Pj4-Pz8_ |
a |
YQ== |
YQ |
When decoding, the option only has to match if the string contains +, /, -, or _. Put in Pj4-Pz8_ with the option off and you get an error about the invalid character -. Put in Pj4+Pz8/ with the option on and you get the same error for +. A string with none of those four characters, such as SGVsbG8=, decodes either way. Padding is optional regardless of the setting (SGVsbG8 is read as Hello too).
Files to data URLs, and Base64 back to files
Set “Input type” to “File” and you can drop in or choose a single file. Any type is accepted, up to 10MB. The result is a data URL with the file type in front, like data:image/png;base64,iVBORw0KG..., which you can use as is in an HTML img tag or a CSS url(). A file whose type the browser can’t work out is labeled application/octet-stream. Browsers can’t read a data URL written in the URL-safe form, so the result always uses the standard alphabet with padding.
The other direction happens in Decode. Put in Base64 or a data URL and a Download button appears next to the result, so you can save content that isn’t text as a file.
- With a data URL, only the part after
base64,is read, and it’s interpreted as standard Base64 even when the URL-safe checkbox is on. - The file is named
decodedplus an extension. If the data URL’s type is one of PNG, JPEG, GIF, WebP, SVG, ICO, PDF, TXT, CSV, JSON, ZIP, MP3, or MP4, the extension matches it (decoded.pngand so on). - For any other type, or for plain Base64 with no type information, you get
decoded.bin. If you know what the file really is, rename the extension after downloading. - A data URL without
;base64, such asdata:text/plain,hello, isn’t Base64, so you get an error about the invalid character:.
Three decoding errors
| Error message | Example input | What it means |
|---|---|---|
| This isn’t a valid Base64 character | Pj4-Pz8_ (option off) |
A character that doesn’t belong to the currently selected form. The message shows which one. |
| The Base64 length or padding (=) isn’t valid. | SGVsb, SGVsbG8== |
The character count is off, or there are too many = or one in the middle. Common when the end got cut off while copying. |
| The decoded bytes aren’t valid UTF-8 text. | iVBORw0KGgo= |
Fine as Base64, but the content isn’t text. |
In the third case, “View as hex” appears next to the result. Click it and the bytes are listed as two-digit hex values, and “View as text” switches back. The hex for iVBORw0KGgo= is 89 50 4e 47 0d 0a 1a 0a, and since the second through fourth bytes (50 4e 47) are the letters PNG, you can tell it’s the start of a PNG file. The Download button keeps working while this error is showing.