Verificação HTML: Valor inválido X para o atributo "srcset" no elemento "source": esperado número maior que zero, mas encontrado "0" em Y.

Sobre este problema HTML

O atributo srcset permite que os navegadores escolham inteligentemente qual imagem carregar com base no tamanho da viewport e na proporção de pixeis do dispositivo. Cada entrada num srcset consiste num URL seguido por um descritor de largura (como 300w) ou um descritor de densidade de pixeis (como 2x). Quando usa descritores de largura, o valor representa a largura intrínseca em pixeis do ficheiro de imagem — ou seja, a largura real da imagem conforme armazenada no disco.

Um descritor de largura 0w viola a especificação HTML, que requer que os descritores de largura sejam números inteiros maiores que zero. Uma imagem com largura zero não pode participar significativamente no processo de seleção de fonte do navegador. O navegador usa estes valores de largura em combinação com o atributo sizes para calcular qual imagem melhor se adequa ao layout atual — um valor de zero quebraria completamente este cálculo.

Este problema ocorre comumente quando:

As dimensões das imagens são geradas dinamicamente e um valor padrão de 0 é usado para dados em falta.
Um placeholder ou estado vazio é acidentalmente incluído no srcset.
Um CMS ou ferramenta de build produz um descritor 0w para imagens cujas dimensões não foram calculadas.

Porque é importante

Conformidade com padrões: A especificação HTML requer explicitamente que os descritores de largura sejam números inteiros positivos. Os validadores irão sinalizar 0w como erro.
Comportamento do navegador: Embora os navegadores possam ignorar silenciosamente a entrada inválida, não pode confiar no manuseamento consistente em todos os navegadores e versões. O algoritmo de seleção de imagens pode comportar-se de forma imprevisível.
Performance: Um srcset bem formado é fundamental para o carregamento responsivo de imagens. Descritores inválidos podem impedir os navegadores de selecionar a imagem ideal, levando a downloads desnecessariamente grandes ou má qualidade de imagem.

Como corrigir

Abra o ficheiro de imagem associado ao descritor 0w e verifique a sua largura real em pixeis usando um editor de imagens ou a linha de comandos.
Substitua 0w pela largura correta (por exemplo, 150w para uma imagem com 150 pixeis de largura).
Se a imagem for realmente de largura zero ou um placeholder, remova completamente essa entrada do srcset.
Certifique-se de que cada entrada restante tem um descritor de largura único e positivo.

Exemplos

❌ Inválido: descritor de largura `0w`

<picture>
  <source
    srcset="/images/icon_placeholder.png 0w,
            /images/icon_large.png 600w"
    media="(max-width: 600px)">
  <img src="/images/icon_fallback.png" alt="Logótipo da aplicação">
</picture>

O descritor 0w desencadeia o erro de validação porque zero não é uma largura válida.

✅ Corrigido: todos os descritores de largura são positivos

<picture>
  <source
    srcset="/images/icon_small.png 300w,
            /images/icon_large.png 600w"
    media="(max-width: 600px)">
  <img src="/images/icon_fallback.png" alt="Logótipo da aplicação">
</picture>

Cada entrada tem agora um descritor de largura significativo (300w e 600w) que reflete a largura real em pixeis da imagem correspondente.

❌ Inválido: `0w` num elemento `<img>`

<img
  srcset="/images/hero_tiny.jpg 0w,
          /images/hero_medium.jpg 800w,
          /images/hero_large.jpg 1200w"
  sizes="100vw"
  src="/images/hero_medium.jpg"
  alt="Paisagem montanhosa">

✅ Corrigido: entrada placeholder removida ou corrigida

Se a imagem pequena tem 400 pixeis de largura, use 400w:

<img
  srcset="/images/hero_tiny.jpg 400w,
          /images/hero_medium.jpg 800w,
          /images/hero_large.jpg 1200w"
  sizes="100vw"
  src="/images/hero_medium.jpg"
  alt="Paisagem montanhosa">

Alternativamente, se a imagem não pertence ao conjunto, simplesmente remova-a:

<img
  srcset="/images/hero_medium.jpg 800w,
          /images/hero_large.jpg 1200w"
  sizes="100vw"
  src="/images/hero_medium.jpg"
  alt="Paisagem montanhosa">

Quando usar uma ferramenta de build ou CMS que gera valores srcset dinamicamente, adicione uma verificação para filtrar quaisquer entradas onde a largura calculada seja zero ou esteja em falta antes de renderizar o atributo. Isto previne que a marcação inválida chegue à produção.