Verificação HTML: Valor inválido para o atributo "srcset" no elemento "img": Esperava-se descritor de largura mas foi encontrado X em Y. (Quando o atributo "sizes" está presente, todas as strings de candidatos de imagem devem especificar uma largura.)

Sobre este problema HTML

O atributo srcset permite-lhe fornecer múltiplas fontes de imagem para que o browser possa escolher a mais apropriada com base no dispositivo e viewport do utilizador. Existem dois modos distintos para srcset:

Modo descritor de largura — Cada candidato especifica a largura intrínseca da imagem usando um descritor w (ex., 640w). Este modo requer o atributo sizes para que o browser saiba quanto espaço a imagem ocupará no layout, permitindo-lhe escolher o melhor candidato.
Modo descritor de densidade — Cada candidato especifica uma densidade de pixéis usando um descritor x (ex., 2x). Este modo não usa o atributo sizes; o browser simplesmente corresponde candidatos à densidade de pixéis do dispositivo.

Estes dois modos são mutuamente exclusivos. Não pode misturar descritores w e x no mesmo srcset, e não pode usar descritores x (ou URLs simples sem descritor) quando sizes está presente. A especificação HTML é explícita sobre isto: se sizes for especificado, todas as strings de candidatos de imagem devem incluir um descritor de largura.

Por que isto é importante

Conformidade com normas: O WHATWG HTML Living Standard define regras rigorosas de parsing para srcset. Quando sizes está presente, o algoritmo de seleção de fonte do browser espera descritores de largura. Fornecer descritores de densidade ou candidatos simples neste contexto viola a especificação e produz comportamento indefinido.
Seleção de imagem quebrada: Os browsers dependem do atributo sizes para calcular qual imagem descrita com w melhor se adequa à largura atual do layout. Se fornecer descritores x junto com sizes, o browser pode ignorar completamente o srcset ou usar o atributo src como fallback, derrotando o propósito das imagens responsivas.
Acessibilidade e performance: As imagens responsivas existem para servir ficheiros adequadamente dimensionados para diferentes dispositivos. Uma combinação inválida srcset/sizes pode resultar no download de imagens demasiado grandes em ecrãs pequenos (desperdiçando largura de banda) ou imagens demasiado pequenas em ecrãs grandes (reduzindo a qualidade visual).

Como corrigir

Tem duas opções:

Manter sizes e mudar para descritores de largura — Substituir cada descritor x (ou descritor em falta) em srcset pela largura intrínseca real em pixéis de cada ficheiro de imagem, expressa com um sufixo w.
Remover sizes e manter descritores de densidade — Se só precisar de servir diferentes resoluções para ecrãs de alta densidade num tamanho de layout fixo, remova o atributo sizes e use descritores x.

Quando usar descritores de largura, o valor deve corresponder à largura intrínseca real do ficheiro de imagem em pixéis. Por exemplo, se photo-640.jpg tem 640 pixéis de largura, o seu descritor deve ser 640w.

Exemplos

Inválido: `sizes` presente com descritores de densidade

Isto desencadeia o erro porque 1x e 2x são descritores de densidade, mas sizes requer descritores de largura.

<img
  src="photo-640.jpg"
  srcset="photo-640.jpg 1x, photo-1280.jpg 2x"
  sizes="(max-width: 600px) 100vw, 600px"
  alt="A mountain landscape">

Inválido: `sizes` presente com candidato simples (sem descritor)

Um candidato sem descritor assume por defeito 1x, que é um descritor de densidade — ainda inválido quando sizes está presente.

<img
  src="photo-640.jpg"
  srcset="photo-640.jpg, photo-1280.jpg 2x"
  sizes="(max-width: 600px) 100vw, 600px"
  alt="A mountain landscape">

Correção: usar descritores de largura com `sizes`

Cada candidato agora especifica a largura intrínseca do ficheiro de imagem. O browser usa o valor sizes para determinar qual imagem descarregar.

<img
  src="photo-640.jpg"
  srcset="photo-320.jpg 320w, photo-640.jpg 640w, photo-1280.jpg 1280w"
  sizes="(max-width: 600px) 100vw, 600px"
  alt="A mountain landscape">

Correção alternativa: remover `sizes` e usar descritores de densidade

Se não precisar que o browser escolha imagens baseado na largura do layout — por exemplo, a imagem sempre renderiza com um tamanho CSS fixo — remova sizes e use descritores x.

<img
  src="photo-640.jpg"
  srcset="photo-640.jpg 1x, photo-1280.jpg 2x"
  alt="A mountain landscape">

Usar descritores de largura com `source` dentro de `picture`

A mesma regra aplica-se a elementos source dentro de um picture. Se sizes estiver presente, cada candidato deve usar um descritor w.

<picture>
  <source
    srcset="hero-480.webp 480w, hero-960.webp 960w, hero-1920.webp 1920w"
    sizes="(max-width: 768px) 100vw, 50vw"
    type="image/webp">
  <img
    src="hero-960.jpg"
    srcset="hero-480.jpg 480w, hero-960.jpg 960w, hero-1920.jpg 1920w"
    sizes="(max-width: 768px) 100vw, 50vw"
    alt="A hero banner image">
</picture>