Verificação HTML: Quando o atributo "srcset" tem qualquer string de candidata de imagem com um descritor de largura, o atributo "sizes" também deve ser especificado.

Sobre este problema HTML

O atributo srcset permite-lhe fornecer múltiplas fontes de imagem para que o navegador possa selecionar a mais apropriada. Existem dois tipos de descritores que pode usar no srcset: descritores de densidade de píxel (por exemplo, 1x, 2x) e descritores de largura (por exemplo, 400w, 800w). Quando usa descritores de densidade de píxel, o navegador já conhece a relação entre cada fonte — simplesmente escolhe aquela que corresponde à proporção de píxeis do dispositivo. Mas os descritores de largura funcionam de forma diferente. Dizem ao navegador a largura intrínseca em píxeis de cada ficheiro de imagem, e o navegador então precisa de saber quão larga a imagem será realmente renderizada no ecrã para calcular qual ficheiro é o mais adequado. É exatamente isso que o atributo sizes fornece.

O atributo sizes aceita uma lista separada por vírgulas de condições de media emparelhadas com valores de comprimento, mais um comprimento predefinido. Por exemplo, sizes="(max-width: 600px) 100vw, 50vw" diz ao navegador: “Se o viewport tem 600px de largura ou menos, esta imagem ocupará 100% da largura do viewport; caso contrário, ocupará 50%.” Armado com esta informação e os descritores de largura no srcset, o navegador pode fazer os cálculos e descarregar apenas a imagem mais adequada — antes mesmo do CSS ou do layout ter sido calculado.

Por que isto é importante

Conformidade com padrões: A especificação HTML exige sizes sempre que srcset usa descritores de largura. Omiti-lo produz HTML inválido.
Seleção correta de imagem: Sem sizes, os navegadores recorrem a assumir que a imagem terá 100vw de largura, o que muitas vezes leva ao descarregamento de imagens desnecessariamente grandes em layouts de desktop onde a imagem é muito menor que o viewport completo.
Performance: Servir imagens sobredimensionadas desperdiça largura de banda e atrasa o carregamento da página. Um atributo sizes adequado garante que o navegador descarrega a menor imagem suficiente.
Comportamento previsível: Depender da suposição de fallback do navegador (100vw) faz as suas imagens responsivas comportarem-se de forma inconsistente e derrota o propósito de fornecer múltiplas candidatas.

Como corrigir

Identifique cada elemento img (ou source) que usa descritores de largura no srcset.
Determine quão larga a imagem será exibida em diferentes tamanhos de viewport. Pode inspecionar isto com as ferramentas de desenvolvimento do seu navegador ou revendo o seu CSS.
Adicione um atributo sizes que descreva essas larguras usando condições de media e valores de comprimento CSS como px, vw, em, ou expressões calc().

Exemplos

Incorreto — `sizes` em falta com descritores de largura

<img
  src="photo-400.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
  alt="A mountain landscape">

Isto desencadeia o erro de validação porque o navegador vê descritores de largura (400w, 800w, 1200w) mas não tem atributo sizes para determinar a largura renderizada da imagem.

Correto — atributo `sizes` adicionado

<img
  src="photo-400.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
  sizes="(max-width: 600px) 100vw, (max-width: 1000px) 50vw, 600px"
  alt="A mountain landscape">

Aqui, o atributo sizes diz ao navegador:

Em viewports até 600px de largura, a imagem preenche 100% do viewport.
Em viewports entre 601px e 1000px, a imagem preenche 50% do viewport.
Em viewports maiores, a imagem é exibida com uma largura fixa de 600px.

Correto — descritores de densidade de píxel (não é necessário `sizes`)

<img
  src="logo-1x.png"
  srcset="logo-1x.png 1x, logo-2x.png 2x"
  alt="Company logo">

Quando usa descritores de densidade de píxel (1x, 2x) em vez de descritores de largura, o atributo sizes não é necessário. O navegador simplesmente corresponde o descritor à proporção de píxeis do dispositivo.

Correto — usando `sizes` com um elemento `<picture>`

<picture>
  <source
    srcset="hero-400.webp 400w, hero-800.webp 800w"
    sizes="(max-width: 800px) 100vw, 800px"
    type="image/webp">
  <img
    src="hero-800.jpg"
    srcset="hero-400.jpg 400w, hero-800.jpg 800w"
    sizes="(max-width: 800px) 100vw, 800px"
    alt="Hero banner">
</picture>

O atributo sizes é obrigatório tanto nos elementos source como img quando qualquer um usa descritores de largura no seu srcset.