Base64 Encode
Private: nothing leaves your browser
Waiting for text
Turn text into Base64 as you type, in the standard alphabet or the URL safe one. Drop a file on the box to get a complete data: URI you can paste straight into CSS or HTML. Emoji and accented letters encode correctly.
About encoding to Base64
Encoding to Base64 is how bytes get carried through a channel that only accepts text. The usual reasons are an image inlined in a stylesheet as a data URI, a small file put inside a JSON field, credentials for an HTTP Basic auth header, or a binary attachment in an email. Four characters for every three bytes, using only 64 safe ones.
The detail that trips people up is anything outside plain English. The browser's own btoa throws on the first accented letter, because it only accepts characters under 256. This encodes the UTF-8 bytes instead, so "café" and an emoji both encode and decode back exactly as they went in. If the value is going into a URL, a cookie or a JSON Web Token, tick URL safe alphabet: + and / become - and _ and the padding is dropped, which is what RFC 4648 calls the URL and filename safe variant.
Remember that encoding grows the data by about a third. That is the price of using a text channel for bytes, and it is why inlining a large image as a data URI is usually a false economy: you save one request but send more bytes, and the browser can no longer cache the image separately from the page. Shrinking the picture first with the image compressor takes far more off the result than the encoding ever adds.
How to encode text as Base64
- Type or paste your text. The Base64 appears as you go, nothing to press.
- Tick URL safe alphabet for a value that goes into a URL, a cookie or a token.
- Drop a file onto the box to get a full
data:URI for it, ready for CSS or HTML. - Press Copy to take the result.
- Paste Base64 instead and the direction flips on its own, so you get the decoded text.
Common questions about Base64 encoding
Does a file I drop on the box get uploaded?
Why does my Base64 differ from another tool's?
How do I make a data URI for an image?
data:image/png;base64,... string including the media type, which is the part people usually have to add by hand. Paste it into a CSS url() or an img src. It works well for a small icon and badly for a photograph.
Can I encode an emoji or a non-English name?
btoa throw an error instead, which is the bug behind most "invalid character" messages you will find online.
Does Base64 encoding protect anything?
Next