Base64 vs URL Encoding: What Each Does and When to Use Which

Base64 encoding and URL encoding are both ways to represent data using a safe set of characters — but they solve completely different problems. Base64 converts binary data to text. URL encoding makes strings safe for URLs. Using the wrong one causes bugs that are surprisingly hard to debug.

Quick Comparison

How Base64 Works

Base64 takes every 3 bytes of input and maps them to 4 ASCII characters from a 64-character alphabet. This turns binary data (images, files, encrypted data) into text that can be safely embedded in JSON, HTML, or email.

Input bytes:  01001000 01100101 01101100  (H, e, l)
Split to 6-bit groups: 010010 000110 010101 101100
Map to Base64 chars:    S      G      V      s

"Hello, World!" → "SGVsbG8sIFdvcmxkIQ=="

The == padding ensures the output length is a multiple of 4.

Base64 in Practice

// Encode
const encoded = btoa('Hello, World!');
// "SGVsbG8sIFdvcmxkIQ=="

// Decode
const decoded = atob('SGVsbG8sIFdvcmxkIQ==');
// "Hello, World!"

// Data URI for an image
const dataUri = `data:image/png;base64,${base64String}`;

// JWT structure (3 Base64URL segments)
// header.payload.signature
// eyJhbGciOiJIUzI1NiJ9.eyJ1c2VyIjoiYWxpY2UifQ.abc123

How URL Encoding Works

URL encoding (percent-encoding) replaces characters that have special meaning in URLs with % followed by their hex value. This prevents characters like &, =, ?, and / from being misinterpreted as URL delimiters.

Input:   search query = "hello world & more"
Encoded: search%20query%20%3D%20%22hello%20world%20%26%20more%22

Space → %20 (or + in form data)
&     → %26
=     → %3D
"     → %22
/     → %2F

URL Encoding in Practice

// Encode a full URI component (query parameter value)
encodeURIComponent('price=10&currency=USD')
// "price%3D10%26currency%3DUSD"

// Encode a full URI (preserves :, /, ?, #, &, =)
encodeURI('https://example.com/search?q=hello world')
// "https://example.com/search?q=hello%20world"

// Common mistake: using encodeURI for query values
// ❌ encodeURI('price=10&tax=2')    → "price=10&tax=2" (& not escaped!)
// ✅ encodeURIComponent('price=10&tax=2') → "price%3D10%26tax%3D2"

Base64URL: The Hybrid

Standard Base64 uses + and /, which are reserved characters in URLs. Base64URL replaces them with - and _ and removes = padding. JWTs use Base64URL for exactly this reason.

Standard Base64:  SGVsbG8+Lg==
Base64URL:        SGVsbG8-Lg

Replacements:
  + → -
  / → _
  = → (removed)

Used in: JWTs, URL-safe tokens, OAuth state parameters

Common Mistakes

• Using Base64 to “encrypt” data. Base64 is an encoding, not encryption. Anyone can decode it. It provides zero security.
• Double-encoding URLs. Calling encodeURIComponent() twice turns %20 into %2520. The % itself gets encoded on the second pass.
• Using encodeURI() for query parameters. encodeURI() preserves & and =, which breaks query parameter values. Use encodeURIComponent() for individual values.
• Putting Base64 in URLs without Base64URL. Standard Base64's + and / characters get misinterpreted in URLs. Always use Base64URL for URL contexts.
• URL-encoding binary data. URL encoding works on text strings, not arbitrary bytes. Use Base64 for binary data (images, files, encrypted payloads).

When to Use Each

Code Comparison

import base64
from urllib.parse import quote, unquote

# Base64
encoded = base64.b64encode(b"Hello, World!").decode()
# "SGVsbG8sIFdvcmxkIQ=="

decoded = base64.b64decode("SGVsbG8sIFdvcmxkIQ==")
# b"Hello, World!"

# URL Encoding
encoded = quote("price=10&tax=2")
# "price%3D10%26tax%3D2"

decoded = unquote("price%3D10%26tax%3D2")
# "price=10&tax=2"

package main

import (
    "encoding/base64"
    "net/url"
)

// Base64
encoded := base64.StdEncoding.EncodeToString([]byte("Hello, World!"))
// "SGVsbG8sIFdvcmxkIQ=="

// URL Encoding
encoded = url.QueryEscape("price=10&tax=2")
// "price%3D10%26tax%3D2"

The Verdict

Use Base64 when you need to represent binary data as text — images, files, encrypted payloads, or any raw bytes that need to travel through a text-only channel. Use URL encoding when you need to include special characters in URLs — query parameters, form data, or URL path segments. For tokens or Base64 data that appear in URLs, use Base64URL.

Try It Yourself

Encode and decode Base64 with our Base64 Encoder & Decoder. Encode URLs with the URL Encoder & Decoder, or try all encoding formats at once with the Encode/Decode Multi-Tool.