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:

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:

1. URL decode
2. 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:

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.