Base64 Encoder & Decoder

1. What This Tool Actually Does

This tool converts text to and from Base64 entirely with your browser's built-in btoa() and atob() functions. In Encode mode, it first runs your input through encodeURIComponent() and re-maps the percent-escaped bytes into raw characters before calling btoa() — this extra step is what lets the tool correctly encode Unicode text (accented letters, emoji, non-Latin scripts), which the plain btoa() function cannot handle on its own. In Decode mode it reverses the process: atob() turns Base64 back into raw bytes, and decodeURIComponent() reassembles those bytes into the correct Unicode string.

The URL-safe toggle switches the output alphabet: standard Base64 uses + and /, which have reserved meaning inside URLs, so URL-safe Base64 substitutes - and _ instead and drops the trailing = padding characters. When decoding, the tool reverses these substitutions before calling atob().

2. How to Use the Base64 Encoder/Decoder

1. Choose Encode or Decode using the mode toggle at the top.
2. Toggle URL-safe on if the string needs to travel inside a URL, query parameter, or filename — leave it off for standard Base64 used in HTTP headers, JSON, or data URIs.
3. Type or paste your text into the left panel. The output updates instantly on every keystroke.
4. If you're decoding, a red Error badge appears with a specific message if the string has invalid characters or broken padding.
5. Use ⇄ Swap to move the current output into the input box and flip modes — handy for verifying a round-trip encode/decode.
6. Click Copy to copy the result, and check the stats row for input/output character counts and size overhead.

3. How Base64 Actually Works

Base64 is a binary-to-text encoding: it takes raw bytes and represents them using only 64 printable ASCII characters (A–Z, a–z, 0–9, plus two symbols) so the result is guaranteed safe to place inside text-only channels — JSON strings, XML, email headers, or URLs — that would otherwise choke on arbitrary binary bytes. It works by grouping input into 3-byte (24-bit) chunks and re-splitting each chunk into four 6-bit values, each of which maps to one character in the Base64 alphabet. Because 6 bits can only represent 64 distinct values, and a byte is 8 bits, encoding always expands the data — every 3 input bytes become exactly 4 output characters, a fixed 4:3 size increase, or roughly +33% overhead. When the input isn't a clean multiple of 3 bytes, the final group is padded with = characters so the decoder knows how many of the last 4 characters represent real data.

4. Real Examples

Encoding the ASCII string Hello, World! produces:

SGVsbG8sIFdvcmxkIQ==

With URL-safe mode on, the two trailing = padding characters are stripped (this string happens to contain no + or /, so nothing else changes): SGVsbG8sIFdvcmxkIQ.

Now try a string with a non-ASCII character, café. The "é" is encoded as two UTF-8 bytes before Base64 runs, producing:

Y2Fmw6k=

Paste either value back into Decode mode and you'll get the exact original string back — this round-trip is exactly what the ⇄ Swap button lets you verify with one click.

5. Practical Use Cases

• HTTP Basic Authentication: The Authorization: Basic header requires username:password to be Base64-encoded before it's sent — useful when testing an API with curl or Postman by hand.
• Inline data URIs: Small icons or fonts embedded directly in CSS as background-image: url(data:image/png;base64,...) to avoid an extra HTTP request.
• Debugging JWTs: Paste the header or payload segment of a JSON Web Token (with URL-safe enabled) to decode the raw JSON and inspect claims during API debugging.
• Embedding binary in JSON APIs: Many REST APIs transport small binary blobs (signatures, thumbnails, encryption IVs) as Base64 strings inside JSON, since JSON has no native binary type.
• WordPress webhook payloads: Some plugin integrations Base64-encode webhook secrets or signed payloads — this tool lets you inspect them without writing a script.

6. Common Mistakes & Limitations

• Mixing up standard and URL-safe alphabets: A URL-safe string decoded with URL-safe turned off (or vice versa) fails because -/_ aren't valid standard Base64 characters. Match the mode to how the string was originally produced.
• Treating it as security: Base64 is not encryption. Anyone can decode it in one click — never rely on it to hide passwords, API keys, or personal data.
• Missing or incorrect padding: A hand-edited Base64 string with the wrong number of trailing = characters will throw a decode error — the tool's error message will call out incorrect padding specifically.
• Overusing data URIs for large images: Because encoding adds ~33% overhead and inlined data can't be cached separately by the browser, Base64-embedding large images actually hurts page weight and repeat-visit performance — reserve it for genuinely small, frequently-reused assets like icons.