Verificação HTML: Valor inválido "" para o atributo "(width|height)" no elemento "img": A string vazia não é um número inteiro não-negativo válido.

Sobre este problema HTML

A especificação HTML requer que os atributos width e height em elementos <img>, quando presentes, contenham uma string que representa um número inteiro não-negativo — ou seja, uma sequência de um ou mais dígitos ASCII como "0", "150", ou "1920". Uma string vazia ("") não satisfaz este requisito, por isso o validador W3C marca-o como um erro.

Este problema surge comumente quando:

Um CMS ou motor de templates produz width="" ou height="" porque não foi configurado nenhum valor de dimensão.
JavaScript define dinamicamente img.setAttribute("width", "") em vez de remover o atributo.
Um programador adiciona os atributos como marcadores de posição com a intenção de os preencher mais tarde, mas esquece-se de o fazer.

Porque é importante

Fornecer atributos width e height válidos é uma das formas mais eficazes de prevenir Cumulative Layout Shift (CLS). Os navegadores usam estes valores para calcular a proporção da imagem e reservar a quantidade correta de espaço antes da imagem carregar. Quando os valores são strings vazias, o navegador não consegue determinar a proporção, por isso não é reservado espaço — levando a mudanças de layout à medida que as imagens carregam, o que prejudica tanto a experiência do utilizador como as pontuações dos Core Web Vitals.

Além do desempenho, valores de atributo inválidos podem causar comportamento de renderização imprevisível entre navegadores. Alguns navegadores podem ignorar o atributo, outros podem interpretar a string vazia como 0, colapsando a imagem para zero pixels nessa dimensão. HTML compatível com os padrões também melhora a acessibilidade ao garantir que as tecnologias assistivas conseguem analisar o documento de forma fiável.

Exemplos

❌ Inválido: valores de string vazia

<img src="photo.jpg" alt="Um pôr do sol sobre o oceano" width="" height="">

Tanto width como height estão definidos como strings vazias, o que não é válido.

✅ Corrigido: fornecer dimensões reais

<img src="photo.jpg" alt="Um pôr do sol sobre o oceano" width="800" height="600">

Substitua as strings vazias pelas dimensões reais da imagem em pixels. Estes valores devem refletir o tamanho intrínseco (natural) da imagem. CSS ainda pode ser usado para escalar a imagem visualmente — o navegador usará a proporção width e height para reservar o espaço correto.

✅ Corrigido: remover os atributos completamente

<img src="photo.jpg" alt="Um pôr do sol sobre o oceano">

Se não conhece as dimensões ou prefere gerir o dimensionamento puramente através de CSS, remova os atributos completamente. Um atributo ausente é válido; um vazio não é.

❌ Inválido: apenas um atributo está vazio

<img src="banner.jpg" alt="Banner promocional" width="1200" height="">

Mesmo que apenas um atributo tenha um valor vazio, o erro de validação será acionado para esse atributo.

✅ Corrigido: ambos os atributos com valores válidos

<img src="banner.jpg" alt="Banner promocional" width="1200" height="400">

Corrigir markup gerado dinamicamente/por templates

Se uma linguagem de template está a produzir atributos vazios, use uma condição para os omitir quando não há valor disponível. Por exemplo, num template:

<!-- Em vez de produzir sempre os atributos: -->

<img src="photo.jpg" alt="Descrição" width="" height="">

<!-- Inclua-os condicionalmente apenas quando existem valores: -->

<img src="photo.jpg" alt="Descrição" width="800" height="600">

Se está a definir dimensões via JavaScript, remova o atributo em vez de o definir como uma string vazia:

// ❌ Não faça isto
img.setAttribute("width", "");

// ✅ Faça isto em vez disso
img.removeAttribute("width");

// ✅ Ou defina um valor válido
img.setAttribute("width", "800");

Uma nota sobre valores

Os atributos width e height apenas aceitam números inteiros não-negativos — números inteiros sem unidades, decimais ou sinais de percentagem. Valores como "100px", "50%", ou "3.5" também são inválidos. Use números inteiros simples como "100" ou "600". Se precisa de dimensionamento responsivo com percentagens ou outras unidades CSS, aplique-as através de estilos CSS em vez disso.