Understanding Encoding: Base64, URL, and HTML

Encoding is everywhere in web development. Understanding when and why to use each type prevents bugs, security issues, and data corruption.

Base64

Base64 converts binary data into ASCII text using 64 characters (A-Z, a-z, 0-9, +, /). It's used when binary data needs to travel through text-only channels.

When to Use

Embedding images in CSS or HTML (data:image/png;base64,...)

Sending binary data in JSON payloads

Email attachments (MIME encoding)

Basic auth headers (Authorization: Basic base64(user:pass))

When NOT to Use

Encryption (Base64 is encoding, not encryption)

URL parameters (use URL-safe Base64 or URL encoding instead)

Large files (33% size increase)

URL-Safe Base64

Standard Base64 uses + and / which conflict with URLs. URL-safe variant replaces them with - and _:

Standard: SGVsbG8+V29ybGQ/
URL-safe: SGVsbG8-V29ybGQ_

URL Encoding

URL encoding (percent encoding) replaces unsafe characters with %XX hex values. Required for query parameters, form data, and path segments.

Input:  hello world & goodbye
Output: hello%20world%20%26%20goodbye

encodeURIComponent vs encodeURI

// encodeURIComponent — for individual values
encodeURIComponent("price=10&sale")  // "price%3D10%26sale"

// encodeURI — for complete URIs (preserves :, /, ?, #, &)
encodeURI("https://example.com/search?q=hello world")
// "https://example.com/search?q=hello%20world"

Rule: Use encodeURIComponent for query parameter values. Use encodeURI for complete URLs.

HTML Encoding

HTML encoding prevents XSS by converting special characters to HTML entities:

| Character | Entity |

|-----------|--------|

| < | < |

| > | > |

| & | & |

| " | " |

| ' | ' |

Always HTML-encode user input displayed in the DOM. Most frameworks (React, Vue, Angular) do this automatically for text content, but watch out for dangerouslySetInnerHTML and v-html.

Try Our Tools

Use our Base64 Encoder, URL Encoder, and String Escape/Unescape tools to convert between these formats instantly in your browser.

Conclusion

Use Base64 for binary-to-text conversion, URL encoding for query parameters, and HTML encoding for displaying user content. Mixing them up causes bugs; skipping HTML encoding causes security vulnerabilities.