Verificação HTML: Valor incorreto X para o atributo "srcset" no elemento "img": Nenhuma largura especificada para a imagem Y. (Quando o atributo "sizes" está presente, todas as strings candidatas de imagem devem especificar uma largura.)

Sobre este problema HTML

O atributo srcset permite fornecer múltiplas fontes de imagem para que o navegador possa escolher a mais apropriada com base no tamanho do viewport do utilizador ou na densidade do ecrã. Existem dois modos distintos para o srcset:

Modo de descritor de largura — cada candidato especifica a sua largura intrínseca usando um descritor w (por exemplo, 400w). Este modo requer o atributo sizes para que o navegador saiba quanto espaço a imagem ocupará no layout e possa calcular qual fonte descarregar.
Modo de descritor de densidade de píxeis — cada candidato especifica uma densidade de píxeis usando um descritor x (por exemplo, 2x). Este modo não deve incluir um atributo sizes.

Quando você inclui um atributo sizes mas se esquece de adicionar descritores de largura a uma ou mais entradas do srcset, o navegador tem informações incompletas. A especificação HTML estabelece explicitamente que se o sizes estiver presente, todas as strings candidatas de imagem devem usar descritores de largura. Uma entrada sem descritor assume por defeito 1x (um descritor de densidade de píxeis), o que entra em conflito com o modo de descritor de largura acionado pelo sizes. Esta incompatibilidade faz com que o validador W3C reporte o erro.

Para além da validação, isto importa para a performance do mundo real. As imagens responsivas são uma das ferramentas mais eficazes para reduzir o peso da página em ecrãs mais pequenos. Se os descritores estiverem em falta ou incompatíveis, os navegadores podem descarregar uma imagem que é demasiado grande ou demasiado pequena, prejudicando tanto a performance como a qualidade visual.

Como corrigir

Você tem duas opções dependendo do seu caso de uso:

Opção 1: adicionar descritores de largura a todos os candidatos do `srcset`

Se precisa que o navegador selecione imagens com base no tamanho do viewport (o padrão mais comum de imagens responsivas), mantenha o atributo sizes e certifique-se de que cada entrada do srcset tem um descritor w que corresponde à largura intrínseca da imagem em píxeis.

Opção 2: remover `sizes` e usar descritores de densidade de píxeis

Se só precisa de servir imagens de maior resolução para ecrãs de alta densidade de píxeis (por exemplo, ecrãs Retina) e a imagem renderiza sempre com o mesmo tamanho CSS, remova o atributo sizes e use descritores x.

Exemplos

❌ Incorreto: `sizes` presente mas entrada do `srcset` sem descritor de largura

<img
  src="photo-800.jpg"
  srcset="photo-400.jpg, photo-800.jpg"
  sizes="(min-width: 600px) 800px, 100vw"
  alt="Uma paisagem montanhosa">

Ambas as entradas do srcset não têm descritor de largura. Como o sizes está presente, o validador reporta um erro para cada candidato.

✅ Correto: `sizes` presente com descritores de largura em todos os candidatos

<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w"
  sizes="(min-width: 600px) 800px, 100vw"
  alt="Uma paisagem montanhosa">

Cada candidato especifica agora a sua largura intrínseca (400w e 800w), o que informa o navegador sobre a largura real em píxeis de cada ficheiro fonte. O navegador combina isto com o valor de sizes para escolher a melhor correspondência.

❌ Incorreto: misturar descritores de largura e entradas sem descritor

<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg"
  sizes="(min-width: 600px) 800px, 100vw"
  alt="Uma paisagem montanhosa">

O segundo candidato (photo-800.jpg) não tem o seu descritor de largura. Todos os candidatos devem ter um quando o sizes está presente — não apenas alguns deles.

✅ Correto: descritores de densidade de píxeis sem `sizes`

<img
  src="photo-800.jpg"
  srcset="photo-800.jpg 1x, photo-1600.jpg 2x"
  alt="Uma paisagem montanhosa">

Aqui o atributo sizes é removido, e cada entrada do srcset usa um descritor de densidade de píxeis (1x, 2x). Isto é válido e apropriado quando a imagem ocupa sempre as mesmas dimensões CSS independentemente da largura do viewport.

❌ Incorreto: usar `sizes` com descritores de densidade de píxeis

<img
  src="photo-800.jpg"
  srcset="photo-800.jpg 1x, photo-1600.jpg 2x"
  sizes="(min-width: 600px) 800px, 100vw"
  alt="Uma paisagem montanhosa">

O atributo sizes e os descritores x não podem ser combinados. Ou mude para descritores w ou remova o sizes.

Referência rápida

Padrão	Descritor do `srcset`	`sizes` obrigatório?
Seleção baseada no viewport	Largura (`w`)	Sim
Seleção baseada na densidade	Densidade de píxeis (`x`)	Não — deve ser omitido

Lembre-se de que o valor w no srcset refere-se à largura intrínseca do ficheiro de imagem em píxeis (por exemplo, uma imagem com 800 píxeis de largura recebe 800w), enquanto os valores em sizes usam unidades de comprimento CSS como px, vw, ou em para descrever quão larga a imagem será renderizada no layout.