Validación HTML: Valor incorrecto X para el atributo "src" en el elemento "img": Carácter ilegal en el segmento de ruta.

Acerca de este problema HTML

Las URLs siguen reglas de sintaxis estrictas definidas por RFC 3986. Dentro del segmento de ruta de una URL, solo se permite que aparezca literalmente un conjunto específico de caracteres. Cuando un carácter queda fuera de este conjunto permitido, debe estar codificado mediante porcentaje — representado como un signo % seguido de dos dígitos hexadecimales correspondientes al código ASCII del carácter. El validador W3C verifica que cada URL en tu HTML cumpla con estas reglas, y marca cualquier valor src que contenga caracteres ilegales sin procesar.

Los caracteres que comúnmente provocan este error incluyen:

Carácter	Codificado mediante porcentaje
(espacio)	`%20`
`[`	`%5B`
`]`	`%5D`
`{`	`%7B`
`}`	`%7D`
`\|`	`%7C`
`^`	`%5E`
`	`%60`

Otros caracteres reservados como ?, #, @, !, $, &, ', (, ), *, +, ,, ;, y = también necesitan codificación cuando se usan como datos literales en un segmento de ruta en lugar de como delimitadores de URL. El propio carácter % debe codificarse como %25 si aparece literalmente.

Por qué esto es un problema

Inconsistencia del navegador: Aunque muchos navegadores modernos corrigen silenciosamente las URLs malformadas, no todos lo hacen. Algunos navegadores, agentes de usuario más antiguos o clientes HTTP pueden fallar al cargar el recurso o interpretar la URL de manera diferente, causando imágenes rotas.
Cumplimiento de estándares: Las URLs inválidas violan la especificación HTML, que requiere que los valores de atributos que contienen URLs se ajusten a la sintaxis válida de URL.
Interoperabilidad: Los servidores, CDNs, proxies y capas de caché pueden manejar caracteres ilegales de manera impredecible, causando fallos intermitentes que son difíciles de depurar.
Accesibilidad: Si una URL está malformada y la imagen no se carga, los usuarios que dependen de tecnologías de asistencia pueden no recibir el contenido previsto, incluso cuando se proporciona texto alt apropiado.

Cómo solucionarlo

Tienes dos enfoques principales:

Codificar mediante porcentaje los caracteres ilegales en el valor src. Reemplaza cada carácter problemático con su equivalente %XX.
Renombrar el archivo para usar solo caracteres seguros para URL. Limítate a letras minúsculas, dígitos, guiones (-), guiones bajos (_) y puntos (.). Esta es la solución más limpia a largo plazo.

Si estás generando URLs programáticamente, usa las funciones de codificación de URL integradas de tu lenguaje (por ejemplo, encodeURIComponent() en JavaScript, urlencode() en PHP, o urllib.parse.quote() en Python).

Ejemplos

Caracteres ilegales en el nombre del archivo

Los corchetes en el valor src no están permitidos en un segmento de ruta de URL:

<!-- ❌ Inválido: [ y ] sin procesar en la ruta URL -->

<img src="image[00].svg" alt="Company logo">

Solución mediante codificación de porcentaje:

<!-- ✅ Válido: [ y ] están codificados mediante porcentaje -->

<img src="image%5B00%5D.svg" alt="Company logo">

Solución renombrando el archivo:

<!-- ✅ Válido: el nombre del archivo usa solo caracteres seguros -->

<img src="image-00.svg" alt="Company logo">

Espacios en el nombre del archivo

Los espacios son una de las causas más comunes de este error:

<!-- ❌ Inválido: espacio en la ruta URL -->

<img src="my photo.jpg" alt="Vacation photo">

<!-- ✅ Válido: espacio codificado como %20 -->

<img src="my%20photo.jpg" alt="Vacation photo">

<!-- ✅ Válido: el nombre del archivo usa un guión en lugar de un espacio -->

<img src="my-photo.jpg" alt="Vacation photo">

Llaves en una ruta similar a una plantilla

A veces los nombres de archivo o rutas contienen llaves de artefactos de plantillas o convenciones de nomenclatura:

<!-- ❌ Inválido: { y } sin procesar en la ruta URL -->

<img src="icons/{home}.png" alt="Home icon">

<!-- ✅ Válido: llaves codificadas mediante porcentaje -->

<img src="icons/%7Bhome%7D.png" alt="Home icon">

Mejores prácticas para nomenclatura de archivos

La forma más simple de evitar este error por completo es adoptar una convención de nomenclatura de archivos consistente que solo use caracteres seguros para URL:

<!-- ✅ Válido: nombres de archivo limpios y seguros para URL -->

<img src="images/hero-banner-2024.webp" alt="Welcome banner">
<img src="photos/team_photo_01.jpg" alt="Our team">