Base64 Encoder and Decoder

It is a way of representing binary data using only 64 safe text characters: letters, digits, plus and slash. It is not encryption and it is not compression, it is a reversible translation anyone can undo. It exists because some channels only accept text — an email body, an HTML attribute, a JSON field, an HTTP header — and you cannot push raw binary through them. The price is size: encoded data takes 33 % more room than the original.

No, not at all. Base64 protects nothing: decoding it requires no key, it is a public operation any browser performs in one click. Seeing an unreadable-looking string in a token or a config file and assuming it is protected is a common and serious mistake. If you need confidentiality, use encryption; if you need integrity, use a hash.

Because JavaScript btoa() only accepts single-byte characters, and an ñ, an accent or an emoji takes several in UTF-8. Passing them straight in throws an error or produces garbage. The correct fix is converting the text to UTF-8 bytes before encoding, with TextEncoder, and reversing the path with TextDecoder when decoding. This tool does exactly that, so Spanish text and emoji work as they are.

It is a variant replacing plus and slash with hyphen and underscore, and it usually drops the trailing equals padding. It is needed because plus, slash and equals have their own meaning inside a URL and would break travelling in a path or a parameter. It is the variant JWTs and many API identifiers use. If you paste a token and decoding fails, try ticking this option.

They are padding. Base64 processes the input in groups of three bytes turned into four characters; when the input bytes are not a multiple of three, there is leftover room and it is filled with one or two equals so the result is always a multiple of four. They carry no information and some systems omit them, which is valid as long as the decoder tolerates it.

Only very small ones. Encoding an image as a data URI avoids a server request, which pays off for tiny icons or a logo of a few kilobytes. Beyond that it works against you: the file grows 33 %, the browser cannot cache it separately, and the CSS or HTML containing it bloats and blocks rendering. The usual rule is to stay within a few kilobytes.