Base64, Base64URL, and URL encoding are often confused because they all seem to “encode” data.
But they solve different problems.
Using the wrong one can break URLs, APIs, JWTs, image data, or browser behavior.
In this guide, we’ll compare:
- Base64
- Base64URL
- URL encoding / percent encoding
You’ll learn what each one does, where each one is useful, and how to choose the right format.
For quick testing, you can use EncodingBase64 for Base64, Base64URL, URL encoding, hex, and image-to-Base64 conversions. If you need to reverse Base64 back into text, images, or files, DecodingBase64 is the matching decoder.
Quick answer
Use Base64 when you need to represent binary data as text.
Use Base64URL when Base64 data must safely appear inside URLs, JWTs, or URL tokens.
Use URL encoding when you need to safely place normal text inside a URL query string or path.
They are not interchangeable.
What is Base64?
Base64 converts bytes into readable ASCII characters.
Example:
Hello World
becomes:
SGVsbG8gV29ybGQ=
Base64 is commonly used for:
- sending binary data in JSON
- embedding small images
- email attachments
- API payloads
- data URIs
- basic text-safe representation
Base64 uses characters like:
A-Z
a-z
0-9
+
/
=
The = character is padding.
When to use Base64
Use Base64 when the original data is binary or byte-based but needs to be represented as text.
Good use cases include:
1. Embedding small images
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..." />
2. Sending binary data in JSON
{
"filename": "avatar.png",
"content": "iVBORw0KGgoAAAANSUhEUgAA..."
}
3. Encoding small files for transport
Some APIs accept file content as Base64 strings.
4. Encoding credentials in specific protocols
Basic authentication uses Base64 representation for:
username:password
But remember: this is not secure by itself. It must be used over HTTPS.
When not to use Base64
Do not use Base64 for:
- encryption
- password protection
- hiding secrets
- large images when normal files work better
- URL parameters without URL-safe conversion
Base64 increases data size, often by about one-third.
That is acceptable in many cases, but not always ideal.
What is Base64URL?
Base64URL is a URL-safe version of Base64.
Standard Base64 may contain:
+
/
=
These characters can cause issues in URLs.
Base64URL replaces:
+ with -
/ with _
Padding = is often removed.
Example standard Base64:
SGVsbG8+V29ybGQ/
Base64URL version:
SGVsbG8-V29ybGQ_
Base64URL is common in:
- JWTs
- URL-safe tokens
- password reset links
- email verification links
- OAuth flows
- compact identifiers
Why standard Base64 can break in URLs
Imagine this Base64 string:
abc+def/ghi==
If placed directly inside a URL:
https://example.com/?token=abc+def/ghi==
The + may be interpreted as a space in some URL contexts.
The / may be interpreted as a path separator.
The = can interfere with query parsing.
That is why Base64URL exists.
A safer token would look like:
abc-def_ghi
Base64URL helper in JavaScript
Convert standard Base64 to Base64URL:
function toBase64Url(base64) {
return base64
.replace(/\+/g, "-")
.replace(/\//g, "_")
.replace(/=+$/g, "");
}
Convert Base64URL back to standard Base64:
function fromBase64Url(base64Url) {
let base64 = base64Url
.replace(/-/g, "+")
.replace(/_/g, "/");
while (base64.length % 4 !== 0) {
base64 += "=";
}
return base64;
}
Example:
const base64 = "SGVsbG8gV29ybGQ=";
const base64Url = toBase64Url(base64);
console.log(base64Url);
// SGVsbG8gV29ybGQ
What is URL encoding?
URL encoding, also called percent encoding, is different from Base64.
It makes text safe for URLs by replacing unsafe characters with % followed by hexadecimal values.
Example:
hello world
becomes:
hello%20world
Another example:
email@example.com
becomes:
email%40example.com
In JavaScript, you can use:
encodeURIComponent("hello world");
// hello%20world
For a full URL, you may use:
encodeURI("https://example.com/search?q=hello world");
// https://example.com/search?q=hello%20world
encodeURI vs encodeURIComponent
These two are often confused.
encodeURI()
Use it for a full URL:
encodeURI("https://example.com/search?q=hello world");
It keeps URL structure characters like:
:
/
?
&
=
encodeURIComponent()
Use it for a URL parameter value:
const query = encodeURIComponent("hello world & coffee");
const url = `https://example.com/search?q=${query}`;
console.log(url);
// https://example.com/search?q=hello%20world%20%26%20coffee
Most of the time, if you are encoding a query parameter value, use encodeURIComponent().
Base64 vs URL encoding
Here is the key difference:
| Feature | Base64 | URL Encoding |
|---|---|---|
| Main purpose | Represent bytes as text | Make URL text safe |
| Used for binary data | Yes | No |
| Used for query params | Not directly | Yes |
| Output style | SGVsbG8= |
hello%20world |
| Reversible | Yes | Yes |
| Security feature | No | No |
If you want to encode an image, use Base64.
If you want to safely put a search query inside a URL, use URL encoding.
Base64URL vs URL encoding
Base64URL is still Base64.
It is designed to make Base64 output safe for URLs.
URL encoding is designed to make normal text safe for URLs.
Example:
Original text:
Hello World
Base64:
SGVsbG8gV29ybGQ=
Base64URL:
SGVsbG8gV29ybGQ
URL encoded:
Hello%20World
They look different because they solve different problems.
Real-world examples
Example 1: API file upload
You have image bytes and need to send them in JSON.
Use Base64.
{
"image": "iVBORw0KGgoAAAANSUhEUgAA..."
}
Example 2: JWT token
JWTs use Base64URL.
A JWT looks like:
header.payload.signature
Each part is Base64URL encoded.
Example 3: Search query
You want a URL like:
https://example.com/search?q=coffee & tea
Use URL encoding:
https://example.com/search?q=coffee%20%26%20tea
Example 4: Small inline SVG or PNG
Use Base64 or URL-encoded SVG depending on the case.
For small PNG/JPEG/WebP assets, Base64 is common.
For SVG, URL encoding can sometimes be more readable and efficient.
Common mistakes
Mistake 1: Using Base64 as encryption
Base64 can be decoded by anyone.
It does not protect data.
Mistake 2: Putting standard Base64 directly in URLs
Characters like +, /, and = can cause issues.
Use Base64URL or URL encode the value.
Mistake 3: Using URL encoding for binary files
URL encoding is not designed for raw binary file representation.
Use Base64 instead.
Mistake 4: Forgetting to decode in the right order
If data is URL encoded and Base64 encoded, the order matters.
For example:
- URL decode
- Base64 decode
or the reverse, depending on how the data was originally encoded.
Mistake 5: Not handling Unicode
JavaScript’s btoa() and atob() are not always Unicode-safe by themselves.
Use TextEncoder and TextDecoder when working with modern text.
Which one should you choose?
Use this simple rule:
| Situation | Use |
|---|---|
| Encode text or binary as ASCII | Base64 |
| Put Base64 safely in a URL | Base64URL |
| Encode a URL query parameter | URL encoding |
| Encode an image as text | Base64 |
| Encode a JWT payload | Base64URL |
| Encode spaces and symbols in URLs | URL encoding |
| Hide sensitive data | None of these |
For sensitive data, use proper encryption, hashing, HTTPS, and secure storage depending on the use case.
Final thoughts
Base64, Base64URL, and URL encoding are all useful, but they are not the same.
Base64 helps represent bytes as text.
Base64URL makes Base64 safer for URLs and tokens.
URL encoding makes normal URL text safe.
When debugging encoded data, first identify what kind of encoding you are dealing with. Then choose the right tool or function.
For browser-based testing, EncodingBase64 is useful for encoding workflows like Base64, Base64URL, URL encoding, image to Base64, and hex. For reverse workflows, DecodingBase64 helps decode Base64 back into text, images, hex, or files.
The main thing to remember:
Encoding is about representation. It is not the same as encryption.
Top comments (0)