Sobre este problema HTML
A especificação HTML define o atributo width em elementos <img> como um “número inteiro não-negativo válido” — essencialmente uma string de dígitos sem unidades, sem decimais e sem sinais de percentagem. Quando você escreve algo como width="100%", o validador espera um caractere dígito mas encontra %, produzindo este erro. Embora alguns navegadores mais antigos historicamente aceitassem valores percentuais no atributo width (um resquício de convenções pré-HTML5), isso nunca foi parte do padrão HTML moderno e não deve ser considerado confiável.
Isso é importante por várias razões. Primeiro, a conformidade com padrões garante que sua marcação se comporte consistentemente em navegadores e dispositivos. Segundo, tecnologias assistivas e motores de layout de navegadores podem interpretar um valor de width inválido de forma imprevisível — alguns podem ignorá-lo completamente, outros podem analisá-lo incorretamente. Terceiro, os atributos width e height em <img> têm um papel importante em reservar espaço de layout antes da imagem carregar (prevenindo Cumulative Layout Shift), mas só funcionam corretamente quando definidos com valores inteiros de píxel válidos que refletem as dimensões intrínsecas ou pretendidas da imagem em píxeis.
Como corrigir
Se você quer uma largura fixa em píxeis, forneça apenas o número inteiro sem qualquer unidade:
<img src="photo.jpg" alt="A red car" width="600">
Se você precisa de uma largura baseada em percentagem ou responsiva, remova o atributo width do HTML e use CSS em vez disso. Você pode aplicar o estilo inline, através de um bloco <style>, ou numa folha de estilos externa.
Se você quer preservar a proporção e prevenir layout shift, mantenha os atributos width e height definidos com valores que representem a proporção intrínseca da imagem (em píxeis), e depois substitua o tamanho exibido com CSS.
Exemplos
❌ Inválido: percentagem no atributo width
<img src="photo.jpg" alt="A red car" width="100%">
Isso desencadeia o erro porque 100% não é um número inteiro não-negativo válido.
❌ Inválido: outros valores não-inteiros
<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, sinais de percentagem e pontos decimais são todos inválidos no atributo width.
✅ Corrigido: usando um número inteiro de píxel
<img src="photo.jpg" alt="A red car" width="800" height="600">✅ Corrigido: largura percentual via CSS inline
<img src="photo.jpg" alt="A red car" style="width: 100%;">✅ Corrigido: imagem responsiva com proporção preservada
Esta abordagem define as dimensões intrínsecas nos atributos (para reservar espaço de layout) e usa CSS para tornar a imagem responsiva:
<style>
.responsive-img {
width: 100%;
height: auto;
}
</style>
<img src="photo.jpg" alt="A red car" width="800" height="600" class="responsive-img">
O navegador usa os valores dos atributos width e height para calcular a proporção e reservar a quantidade correta de espaço, enquanto CSS controla o tamanho renderizado real. Esta é a abordagem recomendada para imagens responsivas porque evita layout shift enquanto ainda permite dimensionamento flexível.
Encontre problemas como este automaticamente
O Rocket Validator analisa milhares de páginas em segundos, detetando problemas HTML em todo o seu site.