Developer Guide
Base64 vs URL Encoding
Base64 turns binary into ASCII. URL encoding (percent-encoding) makes a string safe in a query. They are not interchangeable — here is when to use each.
Base64 and URL encoding (percent-encoding) both produce ASCII, so they get mixed up. They solve different problems. Base64 represents arbitrary bytes as text. URL encoding marks characters that would break a URL. Using the wrong one either inflates the payload or leaves reserved characters that split your query string.
What Base64 is for
Base64 maps every 3 bytes to 4 characters from A–Z, a–z, 0–9, +, and /. Padding uses =. The result is about 33% larger than the input. Use it to put binary in a text channel: image data URIs, email attachments (MIME), JSON fields that must stay UTF-8 text, or HTTP basic-auth credentials. It is not encryption and it is not URL-safe by default — + and / must be escaped if you put Base64 in a query string, or you should use the Base64url variant (- and _).
What URL encoding is for
Percent-encoding (RFC 3986) replaces unsafe characters with %HH. A space becomes %20 (or + in application/x-www-form-urlencoded). & becomes %26 so it is not a new query pair. Use it for query values, path segments, and form bodies. Do not Base64-encode a search term just to put it in a URL — percent-encode it. In JavaScript, encodeURIComponent is the usual choice for a single parameter; encodeURI is for a full URL that already has a scheme.
Side-by-side differences
Purpose: binary-to-text vs making text URL-safe. Alphabet: 64 symbols vs % and hex digits. Size: Base64 always grows ~33%; URL encoding only grows for reserved or non-ASCII characters. Reversibility: both are reversible, neither is a hash. Typical APIs: btoa/atob or Buffer for Base64; encodeURIComponent / URLSearchParams for URLs.
When people combine them
A data URI is Base64 inside a URL: data:image/png;base64,iVBOR... The Base64 payload can include + and /; the data: URL still works because the comma starts the data and browsers parse it as a data URI, not as a query. If you pass that same Base64 as a ?img= query value, you must percent-encode it or switch to Base64url. Double-encoding (Base64 then encodeURIComponent) is correct for that case; encoding twice with encodeURIComponent is not.
Quick rule
Bytes or files going into JSON, email, or a data URI → Base64. A string going into a query, path, or form field → URL encoding. If you need both, Base64 first, then percent-encode the result when it becomes a query value.
Summary
Encode a sample in the Base64 tool and the same sample in the URL Encoder. If the output is a long A–Z block, you wanted Base64. If you only see %20 and %26, you wanted URL encoding.