Encoding

Three escaping systems and where each applies

Which URL encoding function, and when

JavaScript ships three encoders and they are not interchangeable. encodeURIComponent escapes everything except the unreserved characters, so slashes, ampersands, question marks and equals signs all become percent codes: it is the right choice for a single value going into a query parameter or a path segment. encodeURI leaves the characters that structure a URL alone, so it is for encoding a whole URL that is already assembled. Form encoding is a third variant, identical to encodeURIComponent except that a space becomes a plus sign, which is inherited from HTML form submission and still in use.

The failure this prevents is a value swallowing the URL around it. An ampersand inside a parameter value ends the parameter; a hash starts the fragment and silently discards everything after it server-side. Encode the value, not the URL, and if you find %2520 anywhere, something encoded an already-encoded string a second time. The URL encoder offers all three modes side by side, since choosing the wrong one is the entire difficulty.

HTML entities, and the part that is a security control

Five characters carry structural meaning in HTML: the ampersand, the two angle brackets, and both quote marks inside an attribute. Escaping them as entities is what lets text containing markup be displayed as text. There are three notations for the same thing - named such as &, decimal such as &, and hexadecimal such as & - and the entity tool converts among them, which is useful because named entities are readable and only the numeric forms are guaranteed everywhere outside HTML.

This is not only a display concern. Escaping user input before it reaches the page is the primary defence against cross-site scripting, and the context decides the rule: text inside an element, a value inside an attribute, and content inside a script block or a URL attribute each need different escaping. A framework that escapes by default is doing this for you, and the moment you reach for a raw HTML insertion you have taken the job back. Encoding an entity is not a substitute for a content security policy or for validating what you accept in the first place.

Base64 images, and the trade you are making

A data URI carries an image inside the document as base64 text, which removes one HTTP request and costs about 33 percent in size, since every three bytes become four characters. For a small icon inlined in CSS that trade can be worth making. For anything larger it usually is not, because the bytes are paid on every page load, the image cannot be cached separately from the document, and it cannot be lazily loaded or served in a different format to browsers that support one.

Where data URIs genuinely shine is in files that must be self-contained: a single-file HTML export, an email template, an SVG with a raster fill, a document that has to work with no network. The converter works in both directions, so it also decodes a data URI someone sent you back into a file, which is the faster half of the tool in practice. Everything here runs client-side.

Frequently asked questions

What is the difference between encodeURI and encodeURIComponent?

encodeURIComponent escapes everything that is not unreserved, including slashes, ampersands and question marks, so it is for a single value going into a parameter or a path segment. encodeURI leaves the characters that give a URL its structure intact, so it is for encoding a complete URL. Using encodeURI on a value is what lets an ampersand inside it break the query string.

Why does a space sometimes become + and sometimes %20?

Because form encoding and URL encoding differ. application/x-www-form-urlencoded, which HTML forms use, encodes a space as a plus sign; standard percent-encoding uses %20. Both appear in real query strings, and a decoder has to know which convention produced the string to turn a plus back into a space rather than leaving it as a literal plus.

Which HTML characters must be escaped?

The ampersand and both angle brackets in text content, plus whichever quote mark delimits an attribute value. Escaping the ampersand first matters, since escaping it after the others double-escapes them. Named, decimal and hexadecimal entities are equivalent, and the numeric forms are the safer choice outside an HTML document.

Does escaping HTML entities prevent XSS?

It is the primary defence for output, but it is context sensitive rather than universal. Text inside an element, a value inside an attribute, and content inside a script or a URL attribute each require different escaping, and no amount of entity encoding fixes injecting into a script block. Use a framework that escapes by default and treat raw HTML insertion as the exception.

When should I use a Base64 data URI for an image?

For small icons, for files that must be self-contained such as email templates and single-file exports, and where the network is unavailable. Avoid it for anything large: base64 adds about a third to the size, the bytes are re-downloaded with every page load, and the image can no longer be cached, lazy-loaded or format-negotiated separately.

Why does my URL contain %2520 instead of %20?

Because the string was encoded twice. The space became %20, and then the percent sign itself was encoded as %25, giving %2520. It usually means a URL was built and encoded, then passed through a redirect, tracking wrapper or template that encoded the whole thing again.