🔁 Base64 Encoder / Decoder
Convert text to Base64 and back with correct UTF-8 handling. Includes the URL-safe variant and a file-to-data-URI converter. Nothing leaves your browser.
📎 File to Base64 data URI
Useful for embedding a small icon or font directly in CSS, or for checking what a data URI in someone else's stylesheet actually contains. The file is read locally by your browser and is never uploaded.
How to use the Base64 encoder
Type in the top box to get Base64 in the bottom box, or paste Base64 in the bottom box to get text back — both directions work as you type. Switch Alphabet to URL-safe when the string is going into a URL, a filename, or a JWT. Leave Keep = padding ticked unless the receiving system rejects the trailing equals signs.
How Base64 actually works
Base64 reads the input as raw bytes and regroups them. Every 3 bytes is 24 bits; those 24 bits are cut into four 6-bit numbers; each 6-bit number (0–63) is mapped to one printable character from the 64-character alphabet. Three bytes in, four characters out — a ratio of 4:3.
| Input | Bytes (UTF-8) | Base64 | Why |
|---|---|---|---|
| Hello | 48 65 6C 6C 6F (5 bytes) | SGVsbG8= | 5 bytes is not a multiple of 3, so one = pads it |
| Hi | 48 69 (2 bytes) | SGk= | Two bytes = 16 bits → three 6-bit groups, one = |
| H | 48 (1 byte) | SA== | One leftover byte → two padding characters |
| 世界 | E4 B8 96 E7 95 8C (6 bytes) | 5LiW55WM | Exactly 6 bytes, so no padding at all |
Those padding characters are not decoration: they tell the decoder how many bytes the final group holds. Drop them and a strict decoder cannot know whether the last group was 1, 2 or 3 bytes.
Why UTF-8 matters here
Base64 encodes bytes, not characters. The browser's btoa() only accepts one byte per character, so passing it a string with an accent or a Chinese character throws an InvalidCharacterError — the single most common reason a home-made encoder fails. This tool converts the string to UTF-8 bytes with TextEncoder first, then encodes. As a result 世界 becomes 5LiW55WM rather than an error or mojibake.
Standard vs URL-safe
The standard alphabet uses + and /. Both are legal inside a URL but mean something else there: + is read as a space in query strings, and / is a path separator. The URL-safe alphabet (RFC 4648 §5) replaces them with - and _, and many systems also drop the padding. That is why a decoded JWT segment often has no = at the end.
Assumptions and limitations
Base64 is encoding, not encryption — it adds no secrecy whatsoever. Anyone can reverse it in one step, so it must never be used to hide a password, an API key, or personal data. It also makes data roughly a third larger, which matters for large files: a 3 MB image becomes a 4 MB data URI. This tool decodes to UTF-8 text; if you decode a PNG or ZIP you will get a warning and a latin-1 style preview instead of readable text, because binary data has no text form.
Frequently Asked Questions
Is Base64 encryption?
No, and treating it as encryption is a genuine security bug. Base64 is a reversible transport encoding with no key: anyone who intercepts the string can decode it instantly with a single function call. It exists so that binary data can travel through channels that only accept text — email bodies, JSON fields, XML, URLs, HTTP headers. If you need confidentiality, use TLS in transit and real encryption at rest; if you need a password stored, use a slow hash such as bcrypt or Argon2.
Why is the Base64 version about 33% larger?
Because three input bytes become four output characters — 4 ÷ 3 ≈ 1.33. The 6-bit groups do not divide evenly into 8-bit bytes, so about a quarter of every group is padding bits that carry no information. On top of that, if the output is wrapped at 76 characters (as MIME requires for email attachments) add two more bytes per line for the CRLF. For large payloads this overhead is the main reason to prefer multipart uploads or binary protocols.
Why does my string fail to decode with "invalid length" or garbage output?
Three usual causes. First, the length after removing whitespace is not a multiple of 4 and the padding is missing — add = until it divides by four, or tick the URL-safe alphabet if the string contains - or _. Second, the data was Base64 of binary content, not text, so decoding to UTF-8 produces replacement characters. Third, the string was copied with a truncation, which silently corrupts the tail. Check the character count first; almost every failure shows up there.
When should I use a data URI instead of a normal file link?
Use a data URI for very small, rarely changing assets — a 1 KB SVG icon, a tiny web font, a 2×2 tracking pixel — because it saves an HTTP request. Avoid it for anything larger: the Base64 text cannot be cached separately, it bloats the HTML or CSS that contains it, and it blocks rendering while it downloads. As a rough rule, inline under about 2 KB and link to a file above that.
🛒 Recommended for You
As an Amazon Associate, Benditools earns from qualifying purchases.