Encoding Basics: Base64, Hex, and URL Encoding Explained

Encoding is about representation, not secrecy. It lets you move data through systems that only accept specific character sets. Whether you are building APIs, embedding images in HTML emails, or passing parameters in URLs, choosing the right encoding prevents broken data and hard-to-debug errors. This guide covers the three most common encodings — Base64, hexadecimal, and URL encoding — and explains when each one is the right choice.

What is encoding?

At its core, encoding transforms data from one format to another so it can travel safely through a particular channel. A channel might be an email protocol that only allows ASCII, a URL bar that rejects spaces, or a JSON payload that cannot carry raw binary. The key distinction is that encoding is fully reversible. Anyone with the right decoder can reconstruct the original data without a key or password. This makes it fundamentally different from encryption, which is designed to keep data secret.

Because encoding adds overhead — more bytes to represent the same information — you should always pick the smallest, most appropriate encoding for your use case. Using the wrong one wastes bandwidth, increases payload sizes, and can introduce subtle bugs when systems interpret the encoded output differently.

Base64 encoding

Base64 converts binary data into a set of 64 ASCII characters (A–Z, a–z, 0–9, +, /) plus an optional padding character (=). Every three bytes of input become four characters of output, resulting in roughly a 33% size increase. Despite this overhead, Base64 is the standard for embedding binary content in text-only environments.

Common use cases for Base64

• Email attachments: MIME encoding uses Base64 to attach images, PDFs, and other files to email messages that only support 7-bit ASCII.
• Data URIs: Embedding small images directly in HTML or CSS using data:image/png;base64,... avoids extra HTTP requests.
• API payloads: JSON APIs often Base64-encode binary fields like file uploads or cryptographic signatures to keep the payload as valid JSON.
• JWT tokens: JSON Web Tokens use Base64url (a URL-safe variant) for the header and payload segments.

Try encoding and decoding with the Base64 Encoder and Base64 Decoder. If you work with JWTs or URLs, look for Base64url variants that replace + and / with - and _ to avoid issues in query strings.

Hexadecimal encoding

Hexadecimal (hex) represents each byte as two characters using digits 0–9 and letters A–F. This doubles the size of the original data, making it less space-efficient than Base64, but it has a significant advantage: readability. Every pair of characters maps directly to one byte, which makes hex ideal for inspecting raw data at the byte level.

Common use cases for hex

• Debugging network packets: Tools like Wireshark display packet payloads in hex so engineers can inspect individual bytes.
• Hash values: SHA-256 and MD5 hashes are almost always displayed in hex, such as e3b0c44298fc1c149afbf4c8....
• Color codes: CSS colors like #1A2B3C are hex representations of RGB values.
• Binary file inspection: Hex editors let you view and modify any file at the byte level.

Use the Hex Encoder when you need to convert text to its hex representation for debugging or when a protocol specifically requires hex-encoded values.

URL encoding (percent encoding)

URLs have a strict set of allowed characters defined by RFC 3986. Characters outside this set — including spaces, ampersands, question marks, and non-ASCII characters — must be percent-encoded. Percent encoding replaces each unsafe byte with a percent sign followed by two hex digits. For example, a space becomes%20 and an ampersand becomes %26.

When URL encoding is required

• Query parameters: If a search term contains special characters like & or =, they will break parameter parsing unless encoded.
• Path segments: File names with spaces or Unicode characters need encoding to form valid URLs.
• Form submissions: HTML forms using application/x-www-form-urlencoded automatically percent-encode field values.
• Redirect URLs: When passing a URL as a parameter to another URL, the inner URL must be fully encoded.

Use URL Encode when sending data in query strings to avoid broken URLs and parameter parsing issues. Forgetting to encode user-supplied input is one of the most common sources of broken links and security vulnerabilities in web applications.

Comparing Base64, hex, and URL encoding

Each encoding serves a different purpose. Here is a quick comparison to help you choose:

• Size overhead: Base64 adds ~33%, hex doubles the size, and URL encoding varies depending on how many unsafe characters appear in the input.
• Readability: Hex is the most readable for byte-level inspection. Base64 is opaque. URL encoding is readable for mostly-ASCII input.
• Binary support: Base64 and hex handle arbitrary binary data. URL encoding is designed for text characters within URLs.
• Reversibility: All three are fully reversible with the correct decoder.

Which encoding should I use?

• Use Base64 to embed binary data in text contexts such as emails, JSON APIs, or data URIs.
• Use hex for debugging, hash display, or when a protocol specifies hex-encoded values.
• Use URL encoding for query parameters, path segments, and any user input that appears in URLs.
• If you are unsure, consider the channel your data will travel through. If it is a URL, use URL encoding. If it is a text protocol carrying binary, use Base64. If you need to inspect bytes, use hex.

Common mistakes to avoid

• Double encoding: Encoding an already-encoded string produces garbled output like %2520 instead of %20. Always check whether your framework already encodes values before adding another layer.
• Confusing encoding with encryption: Encoding provides zero security. Never use Base64 to "hide" passwords or API keys.
• Using the wrong Base64 variant: Standard Base64 uses + and / which are unsafe in URLs. Use Base64url when encoding data for query strings or JWT tokens.
• Forgetting to decode: Storing encoded data permanently wastes space and makes searching difficult. Decode data when it reaches its destination.