Base64 Encoder
Encode and decode Base64, locally.
Output
SGVsbG8sIHdvcmxkISDwn5GL
About Base64 Encoder
Local Base64 encode/decode with UTF-8 support.
How to use
- 1Pick Encode or Decode.
- 2Paste your input.
- 3Copy the output with one click.
Base64 is the standard way to fit binary data into text. Email attachments, data URIs in CSS, JWT headers and payloads, image embeds in Markdown — all of them rely on Base64 to turn raw bytes into a 64-character alphabet (A-Z, a-z, 0-9, `+`, `/`) that survives transit through systems that only handle text. This encoder/decoder handles standard Base64 and Base64url, with full UTF-8 safety, locally in your browser.
How Base64 actually works
Take 3 bytes of input (24 bits) and split them into 4 6-bit groups. Map each 6-bit group to one of 64 characters: `A-Z` (0-25), `a-z` (26-51), `0-9` (52-61), `+` (62), `/` (63). If the input length isn't divisible by 3, pad the output with `=` characters so the result is always a multiple of 4. That's the whole algorithm. The math is why Base64-encoded output is roughly 4/3 the size of the input — 33% overhead. For a 100KB image, expect ~133KB encoded.
Base64 vs Base64url
Standard Base64 uses `+`, `/`, and `=`. Two of those characters (`+` and `/`) are reserved in URLs and one (`=`) is significant in query strings, so dropping a standard Base64 string into a URL is a recipe for breakage. Base64url replaces `+` with `-`, `/` with `_`, and conventionally drops the `=` padding. Used in JWTs, OAuth tokens, and anywhere a Base64-encoded value travels through a URL. The encoder here supports both — pick the variant by mode.
The UTF-8 pitfall in `btoa()`
JavaScript's built-in `btoa()` only handles characters in the Latin-1 range (0-255). Pass it an emoji or a CJK character and it throws `InvalidCharacterError`. The fix: encode the string to UTF-8 bytes first with `TextEncoder`, then Base64-encode the bytes. Decoding requires the inverse — Base64-decode to bytes, then `TextDecoder` to UTF-8. This encoder does both automatically, so emoji, accented characters, Chinese, Arabic, and any other Unicode all round-trip cleanly.
When Base64 is the wrong tool
Large binary files. A 10MB image transmitted as Base64 becomes 13.3MB and forces both ends to spend CPU encoding and decoding. Use multipart form data, presigned URLs, or a direct binary protocol instead. Encryption. Base64 is reversible by anyone with no key — it's a transport encoding, not a security primitive. "Hiding" a string with Base64 fools no one. URLs over 8KB. Many proxies and servers cap URL length; Base64-encoded payloads in query strings hit that fast. Move the payload to the request body.
Frequently asked questions
Quick answers to the questions people actually ask about Base64 Encoder.
Why do I need a UTF-8-safe Base64 encoder?
Why do I need a UTF-8-safe Base64 encoder?
Because the built-in `btoa()` function in browsers throws on any character outside Latin-1 — including most emoji, Chinese, Arabic, and anything with diacritics that's not a precomposed Latin character. The fix is to UTF-8 encode the string to bytes first, then Base64-encode the bytes. We do that automatically. Paste an emoji and watch it work.
What is Base64 used for?
What is Base64 used for?
Three common cases: encoding binary data (images, files) for transport over text-only protocols like email (MIME) or JSON; encoding small images directly in CSS or HTML as data URIs; encoding the header and payload of a JWT so they survive URL transit. Base64 is not encryption — it's reversible by anyone, instantly. Don't use it as a security primitive.
What's Base64url and when do I need it?
What's Base64url and when do I need it?
Standard Base64 uses `+`, `/`, and `=` — three characters that are reserved or padding-sensitive in URLs. Base64url replaces `+` with `-`, `/` with `_`, and usually drops the `=` padding. JWTs use Base64url. If you're encoding for a URL query parameter, use Base64url. If you're encoding for email, JSON, or generic binary transport, standard Base64 is fine.
Does it run locally?
Does it run locally?
Yes — encode and decode both happen in your browser. Nothing is logged, stored, or transmitted. Watch the Network tab in DevTools to verify.
What's the size overhead?
What's the size overhead?
Base64 expands data by roughly 33% — every 3 bytes of input become 4 bytes of output. For data URIs in CSS this is usually fine; for large file transport it's wasteful and you should reach for a binary protocol or compression. A 100KB image becomes ~133KB once Base64-encoded.
Can I Base64-encode a file or image?
Can I Base64-encode a file or image?
Today this tool handles text. For file-to-Base64 (typically used for data URIs or pasting images into Markdown), see our image-related tools — we're adding a dedicated drag-and-drop encoder.