Encoding

Base64 Encoder / Decoder

Encode and decode Base64 strings with Unicode and file support.

0 chars
0 chars

What is Base64 Encoding?

Base64 is a binary-to-text encoding scheme that represents binary data in an ASCII string format. It's commonly used to encode data in email, URLs, and to embed images directly in HTML/CSS.

  • Full Unicode support including emojis and special characters.
  • URL-safe encoding option for use in URLs and filenames.
  • Image preview when decoding Base64-encoded images.

Repacking 8-bit bytes into a 64-symbol alphabet

Base64 takes binary data, three bytes (24 bits) at a time, and re-groups those bits into four 6-bit chunks, each mapped to one of 64 printable characters: A–Z, a–z, 0–9, plus + and /. When the input length is not a multiple of three bytes, the output is padded with one or two = characters so its length is always a multiple of four. That 6-bit-per-character packing is also why Base64 output is reliably about a third larger than its input — four output characters for every three input bytes.

Unicode-safe by construction, not by accident

The browser's native btoa function only accepts single-byte (Latin-1) character codes, so encoding text containing accents, CJK characters, or emoji directly through it throws or corrupts the input. This tool avoids that by running encodeURIComponent and unescape first — converting the text to its raw UTF-8 byte sequence dressed up as a Latin-1 string — before calling btoa. Decoding reverses the same chain: atob, then escape, then decodeURIComponent, to reconstruct the original Unicode text exactly.

  • "hello" encodes to aGVsbG8= — one padding character, since 5 bytes needs 2 extra bits of padding logic to reach a multiple of four output characters
  • "hi" encodes to aGk= — 2 bytes produces exactly 3 output characters plus one =
  • "Hello, World!" encodes to SGVsbG8sIFdvcmxkIQ== — 13 bytes needs two padding characters
  • "Ship it 🚀" encodes to U2hpcCBpdCDwn5qA — the rocket emoji, four UTF-8 bytes on its own, is encoded losslessly through the same byte-level path

URL-safe mode swaps two characters and drops padding

Standard Base64's + and / characters both have special meaning inside a URL, so the URL-safe checkbox produces a variant with + replaced by -, / replaced by _, and any trailing = padding stripped entirely. Encoding ">>>" produces Pj4+ in standard mode and Pj4- in URL-safe mode — the same underlying bytes, just re-mapped. Decoding a URL-safe string reverses both substitutions and re-adds however many = characters are needed to reach a multiple of four, before the shared decode path runs.

What happens with malformed or truncated input

Decoding runs inside a try/catch, and any failure — an illegal character outside the 64-symbol alphabet, or a byte sequence that cannot be reassembled into valid UTF-8 after atob — collapses to the same message: "Invalid Base64 string." The tool does not distinguish between "you typed a character that isn't in the alphabet" and "the length was cut short mid-character" in its error text; both surface identically, so a garbled decode always means checking the input for stray characters or a copy-paste that dropped trailing characters.

Base64 is an encoding, not a protection

Base64 is fully reversible by design — anyone can decode it back to the original text with no key, password, or secret involved, using the same public, published alphabet this tool uses. It is the right tool for making binary data safe to embed in text formats (a data: URI, an email attachment, a JSON field) — it is never the right tool for hiding a password, API key, or anything meant to stay confidential. If something looks like Base64 in a config file, assume it is fully readable by anyone who copies it.

When decoded output is actually an image

In decode mode, if the input already starts with data:image/ or looks like a long Base64 string (over 100 characters of only Base64-alphabet characters), the tool renders an inline image preview above the text output, trying common formats — PNG, JPEG, GIF, WebP — until one displays. This makes round-tripping a data: URI copied out of browser dev tools, or checking a Base64-encoded image before embedding it in CSS, a one-paste operation instead of a manual reconstruction.

Common use cases

Embedding a small image as a CSS or HTML data URI

Encode an image file and paste the resulting string straight into a background-image: url(data:...) declaration, with an inline preview to confirm it decodes correctly.

Decoding a Base64 payload from an API response or log line

Paste an encoded field and read the plain-text result immediately, including a preview if the payload turns out to be an image.

Preparing a value for use inside a URL

Switch on URL-safe encoding before embedding a Base64 value in a query parameter or path segment, avoiding characters that would otherwise need further escaping.

Turning encoded or decoded text into a QR code or analysis input

Use Make QR to hand the current output straight to the QR code generator, or Analyze Text to send decoded text to the Text Counter, without retyping anything.

Frequently asked questions

Why does my output end with one or two equals signs?

Base64 output length must be a multiple of four characters. When the input isn't a multiple of three bytes, one or two = padding characters are appended to reach that length — it is a structural requirement of the format, not an error.

What is the actual difference between standard and URL-safe Base64 here?

URL-safe mode replaces + with - and / with _, then strips any trailing = padding. The underlying encoded bytes are identical either way; only the character set and padding differ.

Does this handle emoji and non-English text correctly?

Yes — text is converted to its UTF-8 byte sequence before encoding and reconstructed the same way on decode, so accented letters, CJK text, and emoji round-trip exactly, unlike the browser's raw btoa function used alone.

What happens if I paste an invalid Base64 string?

Decoding fails and the tool shows "Invalid Base64 string" — the same message whether the problem is an illegal character or a truncated, mis-padded value, so check for both if a decode fails unexpectedly.

Why did an image preview appear under my decoded text?

The tool guesses that decoded output might be an image when the input already looks like a data:image/ URI, or is a long run of Base64-alphabet characters, and tries rendering it against common image formats until one displays.

Is Base64 encoding the same as encryption?

No. Base64 is fully reversible with no key or secret required — it changes representation, not confidentiality. Anyone with the encoded string can decode it using the same public alphabet.

Can I decode a JWT segment here?

Yes, with URL-safe mode enabled — JWTs use unpadded Base64URL for their header and payload segments, so switching on URL-safe encoding before pasting a segment decodes it correctly.

Does anything get uploaded when I use the file upload button?

No — the file is read locally with the browser's FileReader API and its contents are placed directly into the input box; nothing leaves your device.

You might also like