What Base64 encoding does
Base64 encodes any binary data into a string of 64 printable ASCII characters: A–Z, a–z, 0–9, +, and /. It represents 6 bits of data per character, so every 3 bytes of input become 4 Base64 characters. Padding (=) is added to make the output length a multiple of 4.
The primary use case is embedding binary data in text-based formats. MIME email attachments were the original use: binary files (images, documents) were Base64-encoded to be embedded in the text-based email format. Today, Base64 is used for data URIs (embedding images in HTML/CSS), storing binary data in JSON, and representing cryptographic keys in PEM format.
Base64 is not encryption or compression. It's encoding — anyone can decode it trivially. The output is about 33% larger than the input. Do not use Base64 to 'protect' sensitive data.
URL encoding (percent encoding)
URL encoding replaces characters that are unsafe in a URL with a percent sign followed by the character's hexadecimal code. Spaces become %20, & becomes %26, = becomes %3D. The purpose is to allow arbitrary text to be safely included in URL components.
URL encoding is not about binary data — it's about making text characters safe for URL syntax. Its scope is much narrower than Base64: it only needs to handle the characters that have special meaning in URLs or that aren't valid ASCII.
The encoding is applied to specific URL components (query parameter values, path segments) and should not be applied to the entire URL structure.
Base64URL — the version used in JWTs
Standard Base64 uses + and / which are not safe in URLs. Base64URL is a variant that replaces + with - and / with _, making the encoded string safe to use directly in a URL without further encoding. Padding (=) is also omitted.
Base64URL is what JWTs use for their header and payload sections. It's also used in OAuth PKCE (Proof Key for Code Exchange) and other security protocols where base64-encoded data must appear in URLs.
When decoding a JWT, the correct function is base64url decode, not standard base64 decode. If you use the wrong variant, you'll get garbage output on any token containing + or / in the encoded data.
- Base64: uses + and /, includes padding =
- Base64URL: uses - and _, omits padding — safe for URLs
- URL encoding: encodes individual characters as %XX — different purpose entirely
When to use each
Use Base64 when you need to embed binary data (images, files, keys) in a text format like JSON, HTML, or email. Use Base64URL when that encoded data also needs to be URL-safe (JWT sections, OAuth tokens, signed URLs).
Use URL encoding when you're constructing a URL and need to include special characters in query parameter values or path segments. In JavaScript, use encodeURIComponent() for individual parameter values and encodeURI() for complete URLs.
Don't mix them up. Double-encoding — URL-encoding a Base64 string that's already using safe characters — adds unnecessary %3D for the = padding and %2B for + characters, producing URLs that work but are unnecessarily verbose.