URL Encoder-Decoder

Base64 and URL encoding solve different problems

They get reached for interchangeably, but they’re not the same tool. Base64 turns arbitrary binary data — images, files, cryptographic keys — into a text-safe representation using 64 printable characters, which is why it shows up in data URLs, JWT tokens, and email attachments (MIME). URL encoding (percent-encoding) exists to make text safe inside a URL specifically, escaping characters like spaces, &, and ? that would otherwise be misread as part of the URL’s structure.

Mixing them up causes two very specific bugs: pasting raw Base64 output into a query string without URL-encoding it first (Base64’s + and / characters have their own meaning in a URL), and trying to Base64-decode a URL-encoded string directly, which fails because percent-encoded triplets like %20 aren’t valid Base64 alphabet characters.

Why URL-safe Base64 exists

Standard Base64 uses +, /, and = padding — all three have special meaning in URLs and file paths. The URL-safe variant swaps + for - and / for _, and typically drops the padding entirely. This is the encoding JWTs use for their header and payload segments, and it’s why a JWT looks like three dot-separated chunks of letters, numbers, hyphens, and underscores rather than standard Base64.

The Unicode trap

The browser’s built-in btoa() function only understands Latin-1 characters, so encoding a string with emoji, accented letters, or CJK characters directly through btoa() throws an error or silently corrupts the output. Correct handling means converting the string to UTF-8 bytes first, then Base64-encoding those bytes — which is what this tool does automatically, so accented names, emoji, and non-Latin text round-trip correctly.

When to use the Data URL converter

A Data URL embeds a file’s content directly into a string — data:image/png;base64,... — which is genuinely useful for small icons, inlining an image into CSS or a single-file HTML export, or pasting an image directly into JSON for a mock API response. It’s a poor fit for anything larger than a few dozen kilobytes: Base64 inflates file size by roughly a third, and large inline images bloat the HTML or CSS they’re embedded in.