Verificação HTML: Valor inválido para o atributo "srcset" no elemento "source": Largura não especificada para a imagem X. (Quando o atributo "sizes" está presente, todas as strings candidatas de imagem devem especificar uma largura.)

Sobre este problema HTML

O atributo srcset suporta dois tipos de descritores: descritores de largura (como 480w) e descritores de densidade de píxeis (como 2x). No entanto, estes dois tipos não podem ser misturados, e o atributo sizes é apenas compatível com descritores de largura. O atributo sizes diz ao navegador quão larga a imagem será exibida em vários tamanhos de viewport, e o navegador usa esta informação juntamente com os descritores de largura no srcset para escolher o ficheiro de imagem mais apropriado. Se sizes está presente mas um candidato de imagem não tem um descritor de largura, o navegador não consegue realizar este cálculo corretamente.

Isto é importante por várias razões. Primeiro, viola a especificação HTML WHATWG, que explicitamente requer que quando sizes está presente, todos os candidatos de imagem devem usar descritores de largura. Segundo, os navegadores podem ignorar valores srcset malformados ou recorrer a comportamento inesperado, resultando no carregamento da imagem errada — potencialmente prejudicando a performance ao descarregar ficheiros desnecessariamente grandes ou degradando a qualidade visual ao selecionar uma imagem demasiado pequena. Terceiro, markup que cumpre as normas garante comportamento consistente e previsível em todos os navegadores e dispositivos.

Um erro comum é especificar um URL simples sem qualquer descritor, ou misturar descritores de densidade (1x, 2x) com o atributo sizes. Uma string candidata de imagem sem qualquer descritor assume por defeito 1x, que é um descritor de densidade — e isso entra em conflito com a presença de sizes.

Exemplos

❌ Incorreto: descritor de largura em falta com `sizes` presente

<picture>
  <source
    srcset="image-small.jpg, image-large.jpg 1024w"
    sizes="(max-width: 600px) 480px, 800px">
  <img src="image-fallback.jpg" alt="A scenic landscape">
</picture>

Aqui, image-small.jpg não tem descritor de largura. Como sizes está presente, isto desencadeia o erro de validação.

❌ Incorreto: usar descritores de densidade com `sizes`

<img
  srcset="image-1x.jpg 1x, image-2x.jpg 2x"
  sizes="(max-width: 600px) 480px, 800px"
  src="image-fallback.jpg"
  alt="A scenic landscape">

Descritores de densidade (1x, 2x) são incompatíveis com o atributo sizes.

✅ Correto: todos os candidatos têm descritores de largura

<picture>
  <source
    srcset="image-small.jpg 480w, image-large.jpg 1024w"
    sizes="(max-width: 600px) 480px, 800px">
  <img src="image-fallback.jpg" alt="A scenic landscape">
</picture>

Cada candidato de imagem agora inclui um descritor de largura, que se combina corretamente com o atributo sizes.

✅ Correto: usar descritores de densidade sem `sizes`

Se quiser usar descritores de densidade em vez de descritores de largura, simplesmente remova o atributo sizes:

<img
  srcset="image-1x.jpg 1x, image-2x.jpg 2x"
  src="image-fallback.jpg"
  alt="A scenic landscape">

Isto é válido porque os descritores de densidade não requerem (e não devem ser usados com) o atributo sizes.

✅ Correto: descritores de largura no `<img>` com `sizes`

<img
  srcset="photo-320.jpg 320w, photo-640.jpg 640w, photo-1280.jpg 1280w"
  sizes="(max-width: 400px) 320px, (max-width: 800px) 640px, 1280px"
  src="photo-640.jpg"
  alt="A close-up of a flower">

Cada entrada no srcset especifica a sua largura intrínseca, e sizes diz ao navegador que largura de exibição esperar em cada breakpoint. O navegador então seleciona automaticamente a imagem que melhor se adapta.