Verificação HTML: Valor inválido "auto" para o atributo "width" no elemento "img": Era esperado um dígito mas foi encontrado "a".

Sobre este problema HTML

O HTML Living Standard define os atributos width e height em elementos img como aceitando apenas números inteiros não-negativos válidos. Estes valores representam dimensões em píxeis e devem consistir apenas em dígitos (p.ex., "200", "1024"). Definir width="auto" causa um erro de validação porque "auto" não é um número — o parser espera um dígito como primeiro carácter mas encontra a letra "a".

Esta confusão surge frequentemente porque auto é um valor perfeitamente válido em CSS (p.ex., width: auto;), mas os atributos HTML e as propriedades CSS seguem regras diferentes. O atributo HTML width é estritamente para declarar as dimensões intrínsecas da imagem em píxeis, enquanto o CSS trata do dimensionamento flexível, responsivo ou automático.

Por que isto importa

Conformidade com os padrões: Valores de atributos inválidos podem causar comportamentos de renderização imprevisíveis em diferentes navegadores. Embora a maioria dos navegadores simplesmente ignore um valor de width inválido, depender da recuperação de erros é frágil e não está garantido.
Estabilidade do layout: Os atributos HTML width e height ajudam os navegadores a reservar a quantidade correta de espaço para uma imagem antes desta carregar, prevenindo Cumulative Layout Shift (CLS). Quando estes valores são inválidos, o navegador não consegue calcular a proporção de aspeto antecipadamente, levando a conteúdo que salta à medida que as imagens carregam.
Acessibilidade e ferramentas: Leitores de ecrã, crawlers de motores de busca e outras ferramentas automatizadas podem depender de marcação válida para interpretar corretamente o conteúdo da página.

Como corrigir

Se você conhece as dimensões da imagem em píxeis, defina width e height para os valores reais. Esta é a abordagem recomendada porque dá aos navegadores a proporção de aspeto necessária para reservar espaço durante o carregamento.
Se você quer que a imagem redimensione de forma fluida, remova o atributo width (ou mantenha-o como um valor de píxeis para dicas de proporção de aspeto) e use CSS em vez disso — por exemplo, width: 100%; ou max-width: 100%; height: auto;.
Se você quer que o navegador determine o tamanho automaticamente, simplesmente omita o atributo width. O navegador usará as dimensões nativas da imagem por defeito.

Exemplos

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

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

Isto desencadeia o erro porque "auto" não é um número inteiro não-negativo válido.

✅ Corrigido: usar um valor de píxeis

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

Tanto width como height estão definidos para números inteiros que representam dimensões em píxeis. Isto também permite ao navegador calcular uma proporção de aspeto de 3:2 para reservar espaço antes da imagem carregar.

✅ Corrigido: omitir `width` e usar CSS para dimensionamento responsivo

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

Aqui, os atributos HTML ainda declaram as dimensões naturais da imagem (para cálculo da proporção de aspeto), enquanto o CSS substitui o tamanho renderizado para tornar a imagem responsiva. O height: auto no CSS assegura que a proporção de aspeto é preservada — este é o equivalente CSS do comportamento "auto" que você pode ter estado à procura.

✅ Corrigido: omitir ambos os atributos completamente

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

Se você não especificar width ou height, o navegador renderiza a imagem no seu tamanho nativo. Isto é válido, embora você perca o benefício da prevenção de mudança de layout.

Padrão recomendado para imagens responsivas

Para a melhor combinação de validade, performance e responsividade, inclua as dimensões em píxeis no HTML e aplique estilos responsivos via CSS:

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

Esta abordagem diz ao navegador a proporção de aspeto intrínseca da imagem (via width e height), previne mudanças de layout e permite que a imagem seja reduzida graciosamente dentro do seu contentor.