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

Acerca de este problema HTML

La especificación HTML define que los atributos width y height en <img> solo aceptan enteros no negativos válidos: una secuencia de uno o más dígitos (0–9) sin letras, unidades o símbolos. Estos atributos indican al navegador las dimensiones intrínsecas de la imagen en píxeles, lo que le ayuda a asignar el espacio correcto en el diseño antes de que se cargue la imagen, evitando el desplazamiento de contenido (CLS).

Cuando estableces height="auto" o width="50%", el validador espera un dígito como primer carácter pero encuentra una letra o símbolo, produciendo el error: “Valor incorrecto ‘auto’ para el atributo ‘height’ en el elemento ‘img’: Se esperaba un dígito pero se encontró ‘a’ en su lugar.”

Esto es importante por varias razones:

Cumplimiento de estándares: Los navegadores pueden ignorar silenciosamente valores de atributo inválidos, lo que significa que tu dimensionado previsto no tendrá efecto y obtendrás el comportamiento predeterminado sin ninguna advertencia visible para los usuarios.
Estabilidad del diseño: Los atributos width y height válidos permiten al navegador calcular la relación de aspecto de la imagen antes de que se cargue, reservando la cantidad correcta de espacio y evitando desplazamientos del diseño. Los valores inválidos anulan este mecanismo.
Previsibilidad: Depender de la recuperación de errores del navegador para marcado inválido lleva a comportamientos inconsistentes entre diferentes navegadores y versiones.

Para solucionarlo, tienes dos opciones:

Usar enteros simples en los atributos width y height para especificar dimensiones en píxeles (p. ej., width="600" height="400").
Usar CSS para cualquier dimensionado no píxel o dinámico como auto, porcentajes, max-width, unidades de viewport, etc.

Una buena práctica es establecer los atributos width y height a las dimensiones intrínsecas reales de la imagen en píxeles (para preservar la relación de aspecto y evitar desplazamientos del diseño), luego usar CSS para controlar el tamaño renderizado de forma responsiva.

Ejemplos

Inválido: usar “auto” o unidades en atributos

<!-- "auto" no es un entero válido -->

<img src="photo.jpg" alt="A cat sitting on a windowsill" height="auto" width="auto">

<!-- El porcentaje no es un entero válido -->

<img src="banner.jpg" alt="Site banner" width="100%">

<!-- Unidades como "px" no están permitidas -->

<img src="icon.png" alt="Settings icon" width="32px" height="32px">

Válido: usar enteros simples en atributos

<!-- Correcto: enteros simples que representan píxeles -->

<img src="photo.jpg" alt="A cat sitting on a windowsill" width="800" height="600">

<img src="icon.png" alt="Settings icon" width="32" height="32">

Válido: usar CSS para dimensionado responsivo o dinámico

Cuando necesites comportamientos como auto, porcentajes o max-width, usa CSS en su lugar:

<!-- Usa atributos para tamaño intrínseco, CSS para comportamiento responsivo -->

<img
  src="photo.jpg"
  alt="A cat sitting on a windowsill"
  width="800"
  height="600"
  style="max-width: 100%; height: auto;">

Este enfoque te da lo mejor de ambos mundos: el navegador conoce la relación de aspecto de la imagen desde los atributos (evitando desplazamientos del diseño), mientras que CSS asegura que se escale de forma responsiva dentro de su contenedor.

Válido: usar una clase CSS para reutilización

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

<img
  src="photo.jpg"
  alt="A cat sitting on a windowsill"
  width="800"
  height="600"
  class="responsive-img">