Base64, HTML Entities & Encoding for Developers (2026)

Understand Base64 encoding, HTML entity encoding, and JWT token structure for web development. Explore the tools referenced in this guide — all free, all running locally in your browser with no signup required.

DG
Derek Giordano
Designer & Developer

Understanding Base64 Encoding

Base64 is a binary-to-text encoding scheme that converts binary data into a string of 64 ASCII characters (A-Z, a-z, 0-9, +, /). It's used whenever binary data needs to travel through text-only channels — email attachments (MIME), data URIs in HTML/CSS, JSON API payloads, and authentication tokens. Encode and decode Base64 with our Base64 Encoder/Decoder.

How Base64 Works

Base64 takes groups of three bytes (24 bits) and splits them into four 6-bit values. Each 6-bit value maps to one of 64 characters. Because 3 bytes become 4 characters, Base64-encoded data is approximately 33% larger than the original binary. If the input isn't a multiple of 3 bytes, padding characters (=) are appended to the output.

URL-Safe Base64

Standard Base64 uses + and / characters that have special meaning in URLs. URL-safe Base64 (also called Base64URL) replaces + with - and / with _, avoiding the need for percent-encoding in URL contexts. JWT tokens use Base64URL encoding for this reason.

When to Use Base64

Embed small images (under 10KB) in HTML/CSS as data URIs to save HTTP requests. Encode email attachments for MIME transmission. Encode binary data for inclusion in JSON payloads. Convert images for inline use with our Image to Base64 converter. Avoid Base64 for large files — the 33% size increase and lack of independent caching make it counterproductive for images over 10KB.

HTML Entity Encoding

HTML entities represent characters that have special meaning in HTML or can't be easily typed. They start with & and end with a semicolon. The five characters that must always be encoded in HTML content are: & (&amp;), < (&lt;), > (&gt;), " (&quot;), and ' (&#39;). Encode and decode HTML entities with our HTML Entity Encoder.

Named vs Numeric Entities

Named entities use human-readable codes: &amp; for ampersand, &copy; for ©, &mdash; for —. Numeric entities use Unicode code points: &#38; (decimal) or &#x26; (hex) for ampersand. Named entities are more readable but only exist for a subset of characters. Numeric entities can represent any Unicode character.

Security: Preventing XSS

HTML entity encoding is a primary defense against Cross-Site Scripting (XSS) attacks. When displaying user-submitted content, encoding ensures that injected <script> tags are rendered as visible text rather than executed as code. Always encode user input before inserting it into HTML — both in server-side templates and client-side DOM manipulation.

URL Encoding (Percent-Encoding)

URL encoding (percent-encoding) replaces unsafe characters in URLs with a % sign followed by their hexadecimal ASCII value. Spaces become %20, ampersands become %26, and question marks become %3F. This ensures URLs are transmitted correctly across all systems, regardless of character sets or special characters in query parameters. Encode and decode URLs with our URL Encoder/Decoder.

encodeURI vs encodeURIComponent

In JavaScript, encodeURI() encodes a complete URL, preserving structural characters like :, /, ?, and #. encodeURIComponent() encodes everything — including structural characters — making it suitable for individual query parameter values but not complete URLs. Always use encodeURIComponent() when inserting user input into URL parameters.

When to Encode

Encode URLs when building query strings with user-supplied values, creating URLs with special characters in path segments, passing URLs as query parameter values (double-encoding), and handling internationalized domain names or paths with non-ASCII characters. Generate clean, URL-safe strings with our Slug Generator.

This guide is part of the Ultimate Design Tools blog. Browse all 103+ free tools.

🔄
Try Base64 Encoder
Free, no signup →