Verificação HTML: Valor inválido X para o atributo "srcset" no elemento "img": Esperado descritor de largura mas encontrado Y em Z. (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 ao navegador um conjunto de fontes de imagem para escolher com base no tamanho da viewport do utilizador ou na densidade do ecrã. Cada entrada no srcset é chamada de string candidata de imagem e consiste numa URL seguida de um descritor opcional — ou um descritor de largura (como 300w) ou um descritor de densidade de pixéis (como 2x).

O atributo sizes diz ao navegador que tamanho de visualização a imagem irá ocupar em várias larguras de viewport, usando condições de media e valores de comprimento. O navegador usa esta informação de tamanho juntamente com os descritores de largura no srcset para selecionar a imagem mais apropriada. É por isso que a especificação HTML requer que quando sizes está presente, todas as entradas do srcset devem usar descritores de largura — sem eles, o navegador não pode realizar a seleção baseada no tamanho que o sizes foi concebido para permitir.

Este erro tipicamente aparece em três situações:

Uma entrada srcset não tem descritor algum — a URL é listada sem qualquer valor de largura ou densidade que a acompanhe.
Um descritor de densidade de pixéis (x) é usado juntamente com sizes — misturar sizes com descritores x é inválido porque os dois mecanismos são mutuamente exclusivos.
Um erro de digitação ou problema de formatação — por exemplo, escrever 600px em vez de 600w, ou colocar uma vírgula incorretamente.

Por que isto é importante

Conformidade com os padrões: O WHATWG HTML Living Standard estabelece explicitamente que quando sizes é especificado, todos os candidatos de imagem devem usar descritores de largura.
Seleção correta de imagem: Sem descritores de largura adequados, os navegadores não podem determinar com precisão qual imagem descarregar. Isto pode levar a descargas desnecessariamente grandes em ecrãs pequenos ou imagens desfocadas em ecrãs grandes.
Performance: As imagens responsivas são uma otimização de performance fundamental. Um srcset mal formado anula o propósito e pode resultar em desperdício de largura de banda.

Como corrigir

Determine a largura intrínseca (em pixéis) de cada ficheiro de imagem listado no srcset.
Acrescente o descritor de largura a cada URL no formato [largura]w, onde [largura] é a largura em pixéis real da imagem.
Certifique-se de que nenhuma entrada usa descritores x quando sizes está presente. Se precisar de descritores de densidade, remova completamente o atributo sizes.
Certifique-se de que cada entrada tem um descritor — URLs simples sem qualquer descritor são inválidas quando sizes é usado.

Exemplos

Descritor de largura em falta

Isto despoleta o erro de validação porque a URL do srcset não tem descritor de largura:

<img
  src="/img/photo.jpg"
  srcset="/img/photo.jpg"
  sizes="(max-width: 600px) 100vw, 600px"
  alt="Um pôr do sol sobre as montanhas"
>

Corrigido adicionando o descritor de largura:

<img
  src="/img/photo.jpg"
  srcset="/img/photo.jpg 600w"
  sizes="(max-width: 600px) 100vw, 600px"
  alt="Um pôr do sol sobre as montanhas"
>

Usar descritores de densidade de pixéis com `sizes`

Isto é inválido porque os descritores x não podem ser combinados com o atributo sizes:

<img
  src="/img/photo.jpg"
  srcset="/img/photo.jpg 1x, /img/photo-2x.jpg 2x"
  sizes="(max-width: 800px) 100vw, 800px"
  alt="Um pôr do sol sobre as montanhas"
>

Corrigido mudando para descritores de largura:

<img
  src="/img/photo.jpg"
  srcset="/img/photo.jpg 800w, /img/photo-2x.jpg 1600w"
  sizes="(max-width: 800px) 100vw, 800px"
  alt="Um pôr do sol sobre as montanhas"
>

Alternativamente, se só precisa de seleção baseada na densidade e não precisa de sizes, remova-o:

<img
  src="/img/photo.jpg"
  srcset="/img/photo.jpg 1x, /img/photo-2x.jpg 2x"
  alt="Um pôr do sol sobre as montanhas"
>

Múltiplas fontes de imagem com descritores de largura

Uma configuração completa de imagem responsiva com vários tamanhos:

<img
  src="/img/photo-800.jpg"
  srcset="
    /img/photo-400.jpg 400w,
    /img/photo-800.jpg 800w,
    /img/photo-1200.jpg 1200w
  "
  sizes="(max-width: 480px) 100vw, (max-width: 960px) 50vw, 800px"
  alt="Um pôr do sol sobre as montanhas"
>

Cada URL é emparelhada com um descritor w que corresponde à largura intrínseca em pixéis da imagem. O atributo sizes diz então ao navegador quão larga a imagem será exibida em cada breakpoint, permitindo-lhe escolher o melhor candidato.