Validación HTML: Valor incorrecto "X" para el atributo "src" en el elemento "img": carácter ilegal en los datos del esquema: no se permite espacio.

Acerca de este problema HTML

Las URLs siguen reglas de sintaxis estrictas definidas por RFC 3986, que no permite caracteres de espacio literales. Cuando el validador W3C encuentra un espacio en el atributo src de un elemento <img>, lo reporta como un carácter ilegal en los datos del esquema. Aunque la mayoría de navegadores modernos intentarán manejar los espacios en URLs codificándolos automáticamente, confiar en este comportamiento no cumple con los estándares y puede llevar a imágenes rotas en ciertos contextos, como cuando las URLs son procesadas por otras herramientas, APIs, o navegadores más antiguos.

Este problema surge comúnmente cuando los nombres de archivo contienen espacios (por ejemplo, mi foto.jpg) y la ruta se copia directamente en el HTML. También puede suceder cuando una URL se construye incorrectamente concatenando cadenas con valores no codificados.

Más allá de la validación, los espacios sin codificar pueden causar problemas reales. Una URL con un espacio puede romperse cuando se comparte, copia, o pasa a través de redirecciones. Los clientes de correo electrónico y aplicaciones de mensajería pueden truncar la URL en el espacio. Los rastreadores de motores de búsqueda podrían fallar al indexar el recurso correctamente.

Cómo solucionarlo

Hay varias formas de resolver este problema:

Codificar espacios como %20 — Reemplaza cada espacio literal en la URL con %20.
Renombrar el archivo — Elimina los espacios de los nombres de archivo completamente, usando guiones (-), guiones bajos (_), o camelCase en su lugar.
Usar funciones de codificación de URL apropiadas — Si generas URLs dinámicamente (por ejemplo, en JavaScript o un lenguaje del lado del servidor), usa funciones de codificación integradas como encodeURI() o encodeURIComponent().

Renombrar archivos para evitar espacios es generalmente la mejor práctica a largo plazo, ya que previene problemas de codificación en todo tu flujo de trabajo.

Ejemplos

❌ Inválido: espacios en el atributo `src`

<img src="images/my photo.jpg" alt="A vacation photo">

<img src="/assets/blog posts/header image.png" alt="Blog header">

Ambos activarán el error de validación porque el valor src contiene caracteres de espacio literales.

✅ Corregido: espacios codificados como `%20`

<img src="images/my%20photo.jpg" alt="A vacation photo">

<img src="/assets/blog%20posts/header%20image.png" alt="Blog header">

✅ Corregido: archivo renombrado para eliminar espacios

<img src="images/my-photo.jpg" alt="A vacation photo">

<img src="/assets/blog-posts/header-image.png" alt="Blog header">

Una nota sobre `+` vs `%20`

Puedes ver espacios codificados como + en algunos contextos (por ejemplo, cadenas de consulta en envíos de formularios usando application/x-www-form-urlencoded). Sin embargo, + no es un sustituto válido para un espacio en una ruta de URL. Siempre usa %20 para espacios en el atributo src.

<!-- ❌ Incorrecto: + no representa un espacio en una ruta de URL -->

<img src="images/my+photo.jpg" alt="A vacation photo">

<!-- ✅ Correcto -->

<img src="images/my%20photo.jpg" alt="A vacation photo">