Skip to content
T
Tools.Town
Free Online Tools for Everyone
Developer Tools

How to Use the Base64 Encoder/Decoder — Complete Guide

Encode text to Base64 and decode it back, the Unicode-safe way. Learn what Base64 is, when to use it, and how to avoid the classic btoa() emoji bug — with the free tool on Tools.Town.

30 June 2026 4 min read By Tools.Town Team Fact Checked

Key Takeaways

  • No
  • btoa() only handles characters in the Latin-1 range and throws on anything outside it
  • About 33% larger
  • No

What is Base64?

Base64 is a way of representing binary data using only 64 printable ASCII characters (A–Z, a–z, 0–9, plus + and /, with = for padding). It exists because a lot of the internet’s plumbing — email bodies, HTTP headers, JSON string fields, URLs — was designed for text, not raw bytes. Send raw binary through those channels and it can get mangled. Base64 wraps the bytes in a safe text envelope so they survive the trip intact.

The Base64 Encoder/Decoder lets you convert text to Base64 and back instantly, in your browser, with full Unicode support. This guide explains how to use it, what’s happening under the hood, and the one bug that trips up almost everyone who tries to do this with raw JavaScript.

Using the tool

  1. Choose a mode. Select Encode to turn plain text into Base64, or Decode to turn Base64 back into text.
  2. Type or paste your input into the left panel.
  3. Read the result in the right panel — it updates as you type, no button needed.
  4. Copy the output with one click, or use Swap & Flip to move the current output into the input and reverse the operation. That makes round-tripping (encode, then decode to verify) a two-click check.

The output length is shown so you can quickly compare sizes, and the result is rendered in a monospace font so long encoded strings are easy to scan.

The Unicode trap (and why this tool avoids it)

If you’ve ever reached for the browser’s built-in btoa() function, you may have hit this:

btoa("Café 🎉"); // ❌ throws: characters outside Latin-1

btoa() only understands characters in the Latin-1 (ISO-8859-1) range. Give it an emoji, a curly quote, or most non-English text and it throws an error. The fix is to convert the text to UTF-8 bytes first, then Base64-encode those bytes:

const bytes = new TextEncoder().encode("Café 🎉");
const b64 = btoa(String.fromCharCode(...bytes)); // ✅ works

The Tools.Town encoder does exactly this with TextEncoder/TextDecoder, so emojis, accented characters, and non-Latin scripts all encode and decode losslessly. You never have to think about it — but knowing why it works helps when you’re debugging the same problem in your own code.

Base64 is encoding, not encryption. Anyone can decode it in seconds. Never use Base64 to “hide” passwords, tokens, or personal data — it provides zero confidentiality.

Where Base64 shows up

  • Data URIs. Embed a small image or font directly in HTML/CSS as data:image/png;base64,…, saving an HTTP request.
  • HTTP Basic Auth. The Authorization: Basic header is just username:password Base64-encoded (which is exactly why Basic Auth must run over HTTPS — see the warning above).
  • JWTs. JSON Web Tokens are three Base64URL-encoded segments joined by dots. Decoding the middle segment reveals the token’s claims — handy for debugging.
  • Email attachments. MIME encodes attachments in Base64 so binary files survive text-only mail transport.
  • Config and .env values. Certificates and keys are often stored Base64-encoded so they fit on a single line.

Base64 vs Base64URL

Standard Base64 uses + and /, which have special meanings in URLs. Base64URL swaps them for - and _ and usually drops the = padding, so the result is safe to drop into a query string or path. JWTs use Base64URL. If you’re decoding a token and the characters look slightly different, that’s why.

The 33% size rule

Base64 turns every 3 bytes into 4 characters, so encoded data is roughly 33% larger than the original. That overhead is the price of text safety. It’s why you Base64-encode small images into data URIs but serve large ones as normal files — past a few kilobytes, the inflation outweighs the saved request.

Privacy

Encoding and decoding happen entirely in your browser via a pure function — open the network tab and you’ll see zero requests as you type. Nothing you paste into the Base64 Encoder/Decoder is uploaded or stored, which makes it safe for config snippets and tokens you’re inspecting locally.

For a broader look at how text and binary representations relate, see the binary encoding guide. And if you frequently inspect tokens, pair this tool with a JWT decoder to read the Base64URL segments directly.

Frequently asked questions

The FAQs above cover the essentials — Base64 is not encryption, why btoa() breaks on emojis, the 33% size overhead, and the client-side privacy guarantee. When in doubt, remember the one-line summary: Base64 makes binary safe for text channels; it does nothing to keep it secret.

Advertisement

Try Base64 Encoder/Decoder — Free

Apply what you just learned with our free tool. No sign-up required.

Try Base64 Encoder/Decoder

Frequently Asked Questions

Is Base64 encryption?
No. Base64 is encoding, not encryption — it is fully reversible by anyone and provides no security. Never use it to hide secrets; use it only to make binary data safe for text-based transport.
Why does plain btoa() break on emojis?
btoa() only handles characters in the Latin-1 range and throws on anything outside it. This tool encodes text to UTF-8 bytes first with TextEncoder, so emojis and non-Latin scripts work correctly.
How much bigger does Base64 make my data?
About 33% larger. Every 3 bytes of input become 4 Base64 characters, plus padding. That overhead is the trade-off for text-safe transport.
Does anything get uploaded?
No. Encoding and decoding run entirely in your browser. Your text never leaves your device.

Was this guide helpful?

Your feedback helps us improve our content.

Get the best Developer Tools tips & guides in your inbox

Join 25,000+ users who get our weekly developer tools insights.