Bad value X for attribute “src” on element “img”: Illegal character in query

URLs follow a strict syntax defined by the URL Living Standard and RFC 3986. Only a specific set of characters are allowed to appear literally in a URL’s query string. Characters outside this set — such as pipes, square brackets, curly braces, and certain other symbols — must be percent-encoded. Percent-encoding replaces the character with a % sign followed by its two-digit hexadecimal ASCII code.

When the W3C HTML Validator encounters an <img> tag whose src attribute contains an illegal character in the query portion of the URL, it raises this error. The query string is the part of the URL that comes after the ? character.

Why this matters

• Browser inconsistency: While many modern browsers will silently fix malformed URLs, not all browsers or HTTP clients handle illegal characters the same way. Some may misinterpret the URL or fail to load the resource entirely.
• Standards compliance: Valid URLs are a foundational requirement for interoperable web content. Using illegal characters violates both the HTML and URL specifications.
• Interoperability: Automated tools, web crawlers, proxies, and content delivery networks may reject or mangle URLs containing unencoded special characters, leading to broken images.
• Accessibility: Screen readers and assistive technologies rely on valid markup. Malformed URLs can cause unexpected behavior in these tools.

Common illegal characters and their encodings

Here are characters frequently flagged by the validator:

How to fix it

Identify the illegal characters in the src URL and replace each one with its corresponding percent-encoded value. If you’re generating URLs dynamically with a programming language, use the language’s built-in URL-encoding function (e.g., encodeURI() or encodeURIComponent() in JavaScript, urlencode() in PHP, urllib.parse.quote() in Python).

Examples

❌ Incorrect: unencoded pipe character in query string

<img src="https://example.com/image?filter=red|blue" alt="Filtered image">

The | character is not allowed literally in the query string.

✅ Correct: pipe character percent-encoded

<img src="https://example.com/image?filter=red%7Cblue" alt="Filtered image">

❌ Incorrect: unencoded square brackets in query string

<img src="https://example.com/image?size[width]=300&size[height]=200" alt="Resized image">

The [ and ] characters must be encoded.

✅ Correct: square brackets percent-encoded

<img src="https://example.com/image?size%5Bwidth%5D=300&size%5Bheight%5D=200" alt="Resized image">

❌ Incorrect: space in query string

<img src="https://example.com/image?caption=hello world" alt="Captioned image">

✅ Correct: space percent-encoded

<img src="https://example.com/image?caption=hello%20world" alt="Captioned image">

Encoding URLs dynamically

If your URLs are built in JavaScript, use encodeURIComponent() for individual query parameter values:

const filter = "red|blue";
const url = `https://example.com/image?filter=${encodeURIComponent(filter)}`;
// Result: "https://example.com/image?filter=red%7Cblue"

This ensures that any special characters in user-provided or dynamic values are properly encoded before being placed into the HTML.

Learn more:

MDN Reference

HTML img element - src attribute

→

WHATWG Spec

URL Living Standard

→

web.dev Article

HTML images

→