URL Encoding Explained: When, Why, and How to Encode URLs
A clear guide to percent-encoding — what it is, when you need it, and how to encode and decode URL strings for free in your browser.
If you’ve ever seen %20 in a URL where a space should be, you’ve seen percent-encoding. It’s one of those things developers use constantly without thinking much about — until something breaks because they got it wrong.
What is URL encoding?
URLs can only contain a limited set of ASCII characters. Spaces, ampersands, equal signs, slashes, and anything outside ASCII — like ü, 中, or 😀 — aren’t valid in raw URLs. Percent-encoding converts these into a safe format: a % sign followed by the two-digit hex code of the byte.
Some examples:
- Space →
%20 &→%26=→%3D/→%2Fü(U+00FC) →%C3%BC(two UTF-8 bytes)- 😀 (U+1F600) →
%F0%9F%98%80(four bytes)
Multi-byte characters like Cyrillic or emoji expand into several %XX sequences because UTF-8 encodes them as multiple bytes.
encodeURI vs encodeURIComponent
This is where most developers trip up — including me, more than once.
encodeURI is for encoding a complete URL. It leaves structural characters like ?, &, =, /, and # alone, because they’re part of the URL syntax.
encodeURI("https://example.com/search?q=hello world")
→ "https://example.com/search?q=hello%20world"encodeURIComponent is for encoding a single piece of a URL — a query parameter value, a path segment, a hash. It encodes ?, &, =, and / too, because inside a component those characters don’t mean anything structural and would break the URL if left raw.
encodeURIComponent("hello & goodbye")
→ "hello%20%26%20goodbye"The rule: use encodeURIComponent when encoding values you’re inserting into a URL. Use encodeURI only if you’ve built the full URL and want to sanitize it as a whole.
Our URL Encoder uses encodeURIComponent by default, which is right for the common case: encoding a query string value.
When you actually need URL encoding
Query string values. ?q=hello world has to be ?q=hello%20world. The space breaks parsing otherwise. (The + convention is an older alternative, specific to HTML form encoding.)
Path segments with special characters. A file named report 2026 Q1.pdf must be report%202026%20Q1.pdf in a URL.
Embedding a URL inside another URL. If you’re passing a redirect target as a query parameter, the inner URL needs to be fully encoded: ?redirect=https%3A%2F%2Fexample.com%2Fpath. Otherwise the parser confuses the inner ? and & with the outer URL’s structure.
Bookmarklets and javascript: URLs. Any dynamic value inserted at runtime needs encoding before it goes in.
When not to encode
Don’t encode the structural parts of a URL: https://, ?, &, =, / between path segments, #. Encode those and the URL stops working.
Decoding URLs for debugging
When you get something like https://api.example.com/search?q=hello%20world%20%26%20goodbye, decode it to read the actual query: hello world & goodbye. Handy when inspecting webhook payloads or API logs full of percent-encoded strings.
The URL Encoder & Decoder does encoding and decoding in one place — paste anything in, get the result instantly, no data leaves your browser.