Base64 and URL Encoding Explained: Encode, Decode and Avoid Common Bugs

Base64 and URL encoding both rewrite text so it can travel safely through systems that only accept certain characters. Neither hides anything, and mixing them up, or applying one twice, is behind a surprising number of bugs.

Base64: data as plain text

Base64 represents any data using 64 safe characters: A–Z, a–z, 0–9, + and /, with = as padding. That lets binary data or text with special characters pass through email, JSON, HTTP headers and config files.

• HTTP Basic authentication sends username:password Base64-encoded in a header.
• Data URLs embed small images in HTML or CSS, such as data:image/png;base64,….
• JSON Web Tokens (JWTs) and many config systems store values in Base64.

Encoding and decoding Base64

The Base64 Encoder converts text to UTF-8 first, so accented letters, Devanagari, Chinese and emoji encode correctly. The output is about a third larger than the input. The Base64 Decoder turns it back into text.

• Strings starting with eyJ are almost always Base64-encoded JSON. A JWT has three dot-separated parts: decode the first two separately; the third is a signature.
• URL-safe Base64 uses - and _ instead of + and /. Swap them back if decoding fails.
• Paste only the encoded part, without quotes, a Basic prefix or a data:…;base64, prefix.
• If the original was an image or a zip file, the decoded result will not be readable text.

URL encoding: safe values in links

Some characters mean something in a URL: ? starts the query, & separates parameters, = joins names and values, # starts a fragment. If a value contains one of these, or a space or non-English letter, it must be percent-encoded: the character becomes % plus its byte value in hexadecimal.

Encode values, not whole URLs

The URL Encoder encodes every reserved character, like JavaScript's encodeURIComponent. Use it on a single value, such as the search term after ?q=. If you paste a complete URL, its :// and / are encoded too and the link stops working.

Reading encoded links

The URL Decoder turns sequences like %20 and %2F back into characters, so you can see where a tracking or redirect link really goes and recover non-English search terms from a URL.

Three classic bugs

1. The plus sign. Servers often read + in a query string as a space, so a literal plus in a phone number or email address must be encoded as %2B.
2. Double encoding. %2520 means a value was encoded twice (%25 is the percent sign). Decode twice, and fix the code so only one layer encodes.
3. A stray percent sign. Text like 100% makes decoding fail. Replace the % with %25 and decode again.

All four tools work locally in your browser, so tokens, headers and links you paste stay on your device.