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

Acerca de este problema HTML

El estándar HTML Living Standard define que los atributos width y height en elementos img aceptan únicamente números enteros no negativos válidos. Estos valores representan dimensiones en píxeles y deben consistir únicamente en dígitos (por ejemplo, "200", "1024"). Establecer width="auto" causa un error de validación porque "auto" no es un número — el analizador espera un dígito como primer carácter pero encuentra la letra "a" en su lugar.

Esta confusión a menudo surge porque auto es un valor perfectamente válido en CSS (por ejemplo, width: auto;), pero los atributos HTML y las propiedades CSS siguen reglas diferentes. El atributo HTML width es estrictamente para declarar las dimensiones intrínsecas en píxeles de la imagen, mientras que CSS maneja el dimensionado flexible, responsivo o automático.

Por qué es importante

Cumplimiento de estándares: Los valores de atributos inválidos pueden causar comportamientos de renderizado impredecibles en diferentes navegadores. Aunque la mayoría de navegadores simplemente ignorarán un valor width inválido, depender de la recuperación de errores es frágil y no está garantizado.
Estabilidad del layout: Los atributos HTML width y height ayudan a los navegadores a reservar la cantidad correcta de espacio para una imagen antes de que se cargue, previniendo el Cumulative Layout Shift (CLS). Cuando estos valores son inválidos, el navegador no puede calcular la relación de aspecto por adelantado, llevando a que el contenido salte mientras las imágenes se cargan.
Accesibilidad y herramientas: Los lectores de pantalla, rastreadores de motores de búsqueda y otras herramientas automatizadas pueden depender de marcado válido para interpretar correctamente el contenido de la página.

Cómo solucionarlo

Si conoces las dimensiones en píxeles de la imagen, establece width y height con los valores reales. Este es el enfoque recomendado porque proporciona a los navegadores la relación de aspecto necesaria para reservar espacio durante la carga.
Si quieres que la imagen se redimensione de forma fluida, elimina el atributo width (o manténlo como un valor de píxeles para pistas de relación de aspecto) y usa CSS en su lugar — por ejemplo, width: 100%; o max-width: 100%; height: auto;.
Si quieres que el navegador determine el tamaño automáticamente, simplemente omite el atributo width. El navegador usará las dimensiones nativas de la imagen por defecto.

Ejemplos

❌ Inválido: usar `"auto"` como valor de `width`

<img src="photo.jpg" alt="A sunset over the ocean" width="auto" height="400">

Esto provoca el error porque "auto" no es un número entero no negativo válido.

✅ Corregido: usar un valor de píxeles

<img src="photo.jpg" alt="A sunset over the ocean" width="600" height="400">

Tanto width como height están establecidos con números enteros que representan dimensiones en píxeles. Esto también permite al navegador calcular una relación de aspecto de 3:2 para reservar espacio antes de que la imagen se cargue.

✅ Corregido: omitir `width` y usar CSS para dimensionado responsivo

<img src="photo.jpg" alt="A sunset over the ocean" width="600" height="400" style="width: 100%; height: auto;">

Aquí, los atributos HTML aún declaran las dimensiones naturales de la imagen (para el cálculo de la relación de aspecto), mientras que CSS anula el tamaño renderizado para hacer la imagen responsiva. El height: auto en CSS asegura que se preserve la relación de aspecto — este es el equivalente CSS del comportamiento "auto" que podrías haber estado buscando.

✅ Corregido: omitir ambos atributos completamente

<img src="photo.jpg" alt="A sunset over the ocean">

Si no especificas width o height, el navegador renderiza la imagen en su tamaño nativo. Esto es válido, aunque pierdes el beneficio de prevención de cambio de layout.

Patrón recomendado para imágenes responsivas

Para la mejor combinación de validez, rendimiento y responsividad, incluye las dimensiones en píxeles en HTML y aplica estilos responsivos mediante CSS:

<img
  src="photo.jpg"
  alt="A sunset over the ocean"
  width="1200"
  height="800"
  style="max-width: 100%; height: auto;">

Este enfoque informa al navegador sobre la relación de aspecto intrínseca de la imagen (mediante width y height), previene cambios de layout, y permite que la imagen se escale hacia abajo elegantemente dentro de su contenedor.