Validación HTML: Valor incorrecto "X%" para el atributo "width" en el elemento "img": Se esperaba un dígito pero se encontró "%" en su lugar.

Acerca de este problema HTML

La especificación HTML define el atributo width en elementos <img> como un “entero no negativo válido” — esencialmente una cadena de dígitos sin unidades, sin decimales y sin signos de porcentaje. Cuando escribes algo como width="100%", el validador espera un carácter de dígito pero encuentra %, produciendo este error. Aunque algunos navegadores más antiguos históricamente aceptaron valores de porcentaje en el atributo width (un vestigio de las convenciones pre-HTML5), esto nunca fue parte del estándar HTML moderno y no debería usarse.

Esto es importante por varias razones. Primero, el cumplimiento de los estándares asegura que tu marcado se comporte de manera consistente en todos los navegadores y dispositivos. Segundo, las tecnologías de asistencia y los motores de diseño de los navegadores pueden interpretar un valor de width inválido de manera impredecible — algunos pueden ignorarlo completamente, otros pueden analizarlo incorrectamente. Tercero, los atributos width y height en <img> cumplen un papel importante al reservar espacio de diseño antes de que la imagen se cargue (previniendo el Cumulative Layout Shift), pero solo funcionan correctamente cuando se establecen en valores enteros de píxeles válidos que reflejen las dimensiones intrínsecas o deseadas de la imagen en píxeles.

Cómo solucionarlo

Si quieres un ancho fijo en píxeles, proporciona solo el entero sin ninguna unidad:

<img src="photo.jpg" alt="A red car" width="600">

Si necesitas un ancho basado en porcentajes o responsivo, elimina el atributo width del HTML y usa CSS en su lugar. Puedes aplicar el estilo en línea, a través de un bloque <style>, o en una hoja de estilos externa.

Si quieres preservar la relación de aspecto y prevenir el desplazamiento de diseño, mantén los atributos width y height establecidos en valores que representen la relación de aspecto intrínseca de la imagen (en píxeles), y luego sobrescribe el tamaño mostrado con CSS.

Ejemplos

❌ Inválido: porcentaje en el atributo `width`

<img src="photo.jpg" alt="A red car" width="100%">

Esto provoca el error porque 100% no es un entero no negativo válido.

❌ Inválido: otros valores no enteros

<img src="photo.jpg" alt="A red car" width="50%">
<img src="banner.jpg" alt="Sale banner" width="300px">
<img src="icon.png" alt="Settings icon" width="2.5">

Unidades como px, signos de porcentaje y puntos decimales son todos inválidos en el atributo width.

✅ Corregido: usando un entero de píxeles

<img src="photo.jpg" alt="A red car" width="800" height="600">

✅ Corregido: ancho de porcentaje a través de CSS en línea

<img src="photo.jpg" alt="A red car" style="width: 100%;">

✅ Corregido: imagen responsiva con relación de aspecto preservada

Este enfoque establece las dimensiones intrínsecas en los atributos (para reservar espacio de diseño) y usa CSS para hacer la imagen responsiva:

<style>
  .responsive-img {
    width: 100%;
    height: auto;
  }
</style>

<img src="photo.jpg" alt="A red car" width="800" height="600" class="responsive-img">

El navegador usa los valores de los atributos width y height para calcular la relación de aspecto y reservar la cantidad correcta de espacio, mientras que CSS controla el tamaño realmente renderizado. Este es el enfoque recomendado para imágenes responsivas porque evita el desplazamiento de diseño mientras aún permite un dimensionado flexible.