Validación HTML: Valor incorrecto para el atributo "src" en el elemento "img": Carácter ilegal en la consulta: "[" no está permitido.

Acerca de este problema HTML

La especificación de URL (definida por WHATWG y RFC 3986) restringe qué caracteres pueden aparecer sin codificar en diferentes partes de una URL. Los corchetes son caracteres reservados que tienen un significado específico en las URLs — solo están permitidos en la porción del host (para envolver direcciones IPv6 como [::1]). En la cadena de consulta, deben estar codificados por porcentaje.

Este problema aparece comúnmente cuando los frameworks (especialmente PHP, Ruby on Rails, o librerías de JavaScript) generan URLs con parámetros de consulta estilo array como ?filter[color]=red. Aunque muchos navegadores y servidores son permisivos e interpretarán estas URLs correctamente, técnicamente son inválidas según el estándar de URL. El validador de W3C aplica esta regla estrictamente.

Más allá del cumplimiento de estándares, usar corchetes sin codificar puede causar problemas en la práctica. Algunos clientes HTTP, proxies o capas de caché pueden rechazar o alterar URLs que contengan corchetes sin procesar. Codificar estos caracteres por porcentaje asegura que tus URLs sean universalmente seguras e interoperables en todos los sistemas.

Cómo solucionarlo

Tienes dos enfoques principales:

Codifica los corchetes por porcentaje. Reemplaza cada [ con %5B y cada ] con %5D en la URL. Esto preserva la estructura de parámetros que tu servidor o framework espera, mientras hace que la URL sea válida.
Reestructura los parámetros de consulta. Si tu backend lo permite, usa nombres de parámetros planos con notación de puntos, guiones bajos o guiones en lugar de sintaxis de corchetes. Por ejemplo, cambia size[width] por size_width o size.width.

Si estás generando URLs en JavaScript, la función incorporada encodeURI() no codifica los corchetes. Usa encodeURIComponent() en nombres o valores de parámetros individuales, o reemplaza manualmente [ y ] después de construir la URL.

Ejemplos

❌ Inválido: corchetes sin codificar en la cadena de consulta

<img src="/images/photo.jpg?size[width]=300&size[height]=200" alt="A sample photo">

Los caracteres literales [ y ] en la cadena de consulta provocan el error de validación.

✅ Solucionado: corchetes codificados por porcentaje

<img src="/images/photo.jpg?size%5Bwidth%5D=300&size%5Bheight%5D=200" alt="A sample photo">

Reemplazar [ con %5B y ] con %5D hace que la URL sea válida. La mayoría de servidores y frameworks decodificarán esto automáticamente e interpretarán los parámetros de la misma manera.

✅ Solucionado: nombres de parámetros planos sin corchetes

<img src="/images/photo.jpg?size_width=300&size_height=200" alt="A sample photo">

Si controlas la lógica del lado del servidor, puedes evitar completamente los corchetes usando una convención de nomenclatura plana para tus parámetros.

❌ Inválido: corchetes en cadenas de consulta más complejas

<img
  src="/api/image?filters[type]=jpeg&filters[quality]=80&crop[x]=10&crop[y]=20"
  alt="Processed image">

✅ Solucionado: todos los corchetes codificados

<img
  src="/api/image?filters%5Btype%5D=jpeg&filters%5Bquality%5D=80&crop%5Bx%5D=10&crop%5By%5D=20"
  alt="Processed image">

Codificación en JavaScript

Si construyes URLs de imágenes dinámicamente, maneja la codificación en tu código:

// Enfoque de reemplazo manual
const url = "/images/photo.jpg?size[width]=300&size[height]=200";
const safeUrl = url.replace(/\[/g, "%5B").replace(/\]/g, "%5D");
img.src = safeUrl;

// Usando URLSearchParams (codifica automáticamente los corchetes)
const params = new URLSearchParams();
params.set("size[width]", "300");
params.set("size[height]", "200");
img.src = `/images/photo.jpg?${params.toString()}`;

Ambos enfoques producen una URL válida y correctamente codificada que pasará la validación de W3C.