Base64 vs URL Encoding
Understand the difference between Base64 encoding and URL encoding, and when each applies. They solve different problems — using the wrong one is a common source of bugs.
What Is Base64 Encoding?
Base64 encodes any binary data as a string of printable ASCII characters. It converts every 3 bytes of input into 4 characters, drawn from an alphabet of 64: A–Z, a–z, 0–9, + and /. The padding character (=) aligns the output to a multiple of 4.
The output is always about 33% larger than the input. Base64 carries no information about what the data means — it is purely a transport encoding for passing binary data through text-based systems such as HTTP headers, JSON, XML, and email.
Example — Encoding 'Hello' as Base64
// JavaScript
btoa('Hello')
// → "SGVsbG8="
// For non-ASCII text, use TextEncoder first:
const bytes = new TextEncoder().encode('Hello 🌍')
let binary = ''
bytes.forEach(b => binary += String.fromCharCode(b))
btoa(binary)
// → "SGVsbG8g8J+MjQ=="Example — URL Encoding a Query String
// JavaScript
encodeURIComponent('C++ & "Go"')
// → "C%2B%2B%20%26%20%22Go%22"
// Build a safe query string:
const params = new URLSearchParams({
q: 'hello world',
lang: 'C++',
})
params.toString()
// → "q=hello+world&lang=C%2B%2B"
// Decode:
decodeURIComponent('C%2B%2B')
// → "C++"What Is URL Encoding?
URL encoding (also called percent-encoding) replaces characters that are disallowed or have special meaning in URLs with % followed by two hex digits. A space becomes %20, < becomes %3C, / becomes %2F.
Standard ASCII letters and digits are unchanged. The overhead varies with content — a plain English sentence barely changes, but a string full of symbols or non-ASCII characters can triple in size. URL encoding is defined by RFC 3986.
Core Differences
| Aspect | Base64 | URL Encoding |
|---|---|---|
| Primary purpose | Convert binary data to ASCII text | Escape special characters in URLs |
| Common use cases | Images, files, APIs, Data URIs, email | Query strings, form data, URL path segments |
| Output characters | A–Z, a–z, 0–9, +, /, = (padding) | %20, %3C, %2F, + (space in query) |
| Size overhead | ~33% larger than input (fixed ratio) | Variable — ASCII unchanged, others 3× |
| Binary file support | Yes — designed for binary data | No — not practical for raw binary |
| URL parameter safe | Not directly (+ and / are reserved) | Yes — that is its purpose |
| Human-readable | No — output is opaque | Partially — ASCII text stays readable |
| Decode function | atob() / Buffer.from(str, "base64") | decodeURIComponent() / urllib.parse |
When to Use Base64
Embedding images in HTML or CSS
Data URIs allow image data to be inlined directly in a src or background-image, eliminating the extra HTTP request.
src="data:image/png;base64,iVBORw0K..."Sending files in JSON API payloads
JSON can only transport text. When multipart/form-data is not an option, Base64 is the standard way to include file content in a JSON request body.
{ "content": "SGVsbG8gV29ybGQ=" }Email attachments and inline images
MIME email uses Base64 to encode attachments and CID-referenced images, ensuring binary data passes safely through text-based mail servers.
Content-Transfer-Encoding: base64Storing binary data as text
Databases, config files, and environment variables are text-based. Base64 is the idiomatic way to store binary content such as keys, certificates, and icons.
CERT="LS0tLS1CRUdJTi..."When to Use URL Encoding
Query string parameters
Any value passed in a URL query string must be percent-encoded to prevent characters like ?, &, =, and # from breaking the URL structure.
/search?q=hello+world&tag=c%2B%2BForm submissions (application/x-www-form-urlencoded)
HTML form POST bodies use URL encoding by default. The browser encodes field names and values before sending.
name=Tom+Hanks&city=New+YorkEncoding user-provided path segments
If a filename or user-supplied string becomes part of a URL path, encode it to prevent path traversal and broken links.
/files/my%20report%20(final).pdfSharing links with special characters
Spaces, accented characters, and symbols in URLs must be encoded to survive copy-paste, email, and HTTP request headers intact.
/fr/caf%C3%A9-menuSVG Example: Base64 vs URL Encoding
SVG images can be embedded in CSS or HTML in two ways. For small SVGs, URL encoding is usually more compact because SVG markup is mostly ASCII text.
Base64 approach
/* CSS */ background-image: url( "data:image/svg+xml;base64, PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My..." );
URL-encoded approach
/* CSS */ background-image: url( "data:image/svg+xml,%3Csvg%20xmlns%3D %27http%3A%2F%2Fwww.w3.org%2F2000..." );
Either works. For SVGs with non-ASCII characters or embedded fonts, test both and pick the smaller result. Try the SVG to Base64 tool →
API Example: Which One Should You Use?
APIs use both. Use Base64 when carrying file content in a JSON request body; use URL encoding when building query strings or path segments from user input.
Use Base64 — sending a file in a JSON body
JSON can only carry text. Base64 is how you embed binary file content inside it.
fetch('/api/upload', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
filename: 'avatar.png',
content: 'iVBORw0KGgoAAAANSUhEUgAA...',
}),
})Use URL encoding — filter params in a GET request
User-supplied values in query strings must be URL-encoded to be safe.
const params = new URLSearchParams({
q: 'C++ developer',
location: 'San Francisco, CA',
type: 'full-time',
})
fetch('/api/jobs?' + params.toString())
// → /api/jobs?q=C%2B%2B+developer&...Need to send a file in JSON? Try the Base64 for API tool →
Need Base64 Inside a URL? Use Base64URL
Standard Base64 uses +, / and = — all reserved characters in URLs. Base64URL replaces them with -, _ and removes the padding. Widely used in JWT, OAuth tokens, and modern APIs.
Frequently Asked Questions
Are Base64 and URL encoding the same thing?
No. Base64 uses a 64-character alphabet to convert binary data into a text string. URL encoding (percent-encoding) replaces characters that have special meaning in URLs with a % sign and two hex digits. They solve different problems and are not interchangeable.
Can I use Base64 in a URL query string?
Standard Base64 contains + and /, both reserved characters in URLs that will be misinterpreted. Use Base64URL instead — it replaces + with - and / with _, and drops the = padding. A Base64URL string is safe in URLs with no additional encoding.
Is URL encoding the same as Base64?
No. URL encoding (percent-encoding) is entirely different. It replaces each character with a % prefix and two hex digits — a space becomes %20, < becomes %3C. Base64 uses a 64-character alphabet to encode an entire binary sequence.
Which is more efficient — Base64 or URL encoding?
It depends on the content. Base64 always adds about 33% overhead regardless of input. URL encoding only encodes characters that need escaping — plain ASCII text in a URL is unchanged. For binary data, Base64 is far more efficient, since every raw byte would become a three-character %XX sequence under URL encoding.
What is Base64URL and how does it differ from Base64?
Base64URL is a URL-safe variant of Base64. It replaces + with - and / with _, and omits the = padding. This makes the output safe for URLs and filenames without any percent-encoding. JWTs and many modern APIs use Base64URL.
Can SVG be embedded with both Base64 and URL encoding?
Yes. In a CSS background-image or HTML src, an SVG can be embedded as a Base64 Data URI (data:image/svg+xml;base64,...) or as a URL-encoded Data URI (data:image/svg+xml,...). For SVGs, URL encoding is often more compact because SVG is mostly ASCII text and most characters need no escaping.