Verificação HTML: Valor inválido X para o atributo "sizes" no elemento "source": Condição de media inválida: Erro de análise em Y

Sobre este problema HTML

O atributo sizes diz ao navegador qual a largura de uma imagem será exibida em diferentes tamanhos de viewport, para que possa escolher o melhor candidato de srcset. Aplica-se apenas quando srcset usa descritores de largura (por exemplo, 480w, 800w). O valor é uma lista separada por vírgulas onde:

Cada entrada (exceto a última) é uma condição de media entre parênteses seguida de um comprimento CSS — por exemplo, (min-width: 800px) 50vw.
A entrada final é um comprimento de fallback sem condição de media — por exemplo, 100vw.

O navegador avalia as condições de media da esquerda para a direita e usa o comprimento da primeira que corresponder. Se nenhuma corresponder, usa o fallback.

A sintaxe da condição de media espelha as CSS media queries mas sem a palavra-chave @media. Pode usar operadores lógicos como and, or, e not, e características como min-width, max-width, orientation, etc.

Porque este erro ocorre

O validador analisa o valor sizes de acordo com o HTML living standard e a especificação CSS Media Queries. Um erro de análise é acionado quando o valor não está conforme com a gramática esperada. Causas comuns incluem:

Parênteses em falta à volta da condição de media: min-width: 600px 50vw em vez de (min-width: 600px) 50vw.
Comprimento em falta após uma condição de media: (min-width: 800px) sem comprimento a seguir.
Unidades inválidas ou em falta no comprimento: 50 em vez de 50vw, 50px, ou 50rem.
Vírgulas finais ou separadores extra: (min-width: 600px) 50vw, , 100vw.
Sintaxe de característica de media inválida: erros tipográficos como (minwidth: 600px) ou usar tokens não suportados.
Usar sizes com descritores de densidade de pixel: quando srcset usa 1x, 2x em vez de descritores de largura, o atributo sizes não tem significado e pode confundir os validadores.

Porque é importante

Seleção de imagem pelo navegador: Os navegadores dependem de um valor sizes corretamente analisado para escolher a imagem ideal de srcset. Um valor mal formado faz com que o navegador use um tamanho padrão (tipicamente 100vw), o que pode resultar no download de imagens desnecessariamente grandes em ecrãs pequenos ou imagens desfocadas em ecrãs grandes.
Conformidade com normas: Valores sizes inválidos violam a especificação HTML e podem comportar-se de forma imprevisível entre diferentes navegadores.
Desempenho: Valores sizes corretos são essenciais para a otimização de imagens responsivas. Sem eles, perde as poupanças de largura de banda que srcset com descritores de largura foi desenhado para fornecer.

Como corrigir

Envolva cada condição de media em parênteses: (min-width: 600px), não min-width: 600px.
Inclua sempre um comprimento CSS válido após cada condição: (min-width: 600px) 50vw, não apenas (min-width: 600px).
Termine com um comprimento de fallback que não tem condição: 100vw.
Use unidades de comprimento CSS válidas: vw, px, em, rem, ou expressões calc().
Remova vírgulas finais ou duplicadas.
Omita sizes completamente se o seu srcset usar descritores de densidade de pixel (1x, 2x).

Exemplos

Incorreto: parênteses em falta à volta da condição de media

<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w"
  sizes="min-width: 600px 50vw, 100vw"
  alt="A landscape photo">

Correto: parênteses adicionados

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

Incorreto: comprimento em falta após a condição de media

<img
  src="banner-800.jpg"
  srcset="banner-400.jpg 400w, banner-800.jpg 800w"
  sizes="(min-width: 700px), 100vw"
  alt="A promotional banner">

A primeira entrada (min-width: 700px) não tem valor de comprimento — a vírgula faz parecer uma entrada separada, mas está incompleta.

Correto: comprimento adicionado após a condição

<img
  src="banner-800.jpg"
  srcset="banner-400.jpg 400w, banner-800.jpg 800w"
  sizes="(min-width: 700px) 60vw, 100vw"
  alt="A promotional banner">

Incorreto: usar `sizes` com descritores de densidade de pixel

<img
  src="avatar.jpg"
  srcset="avatar@1x.jpg 1x, avatar@2x.jpg 2x"
  sizes="(min-width: 600px) 80px, 40px"
  alt="User avatar">

O atributo sizes só tem significado com descritores de largura (w). Quando srcset usa descritores de densidade (1x, 2x), omita sizes.

Correto: `sizes` removido para descritores de densidade

<img
  src="avatar.jpg"
  srcset="avatar@1x.jpg 1x, avatar@2x.jpg 2x"
  alt="User avatar">

Incorreto: vírgula final

<img
  src="hero-800.jpg"
  srcset="hero-400.jpg 400w, hero-800.jpg 800w"
  sizes="(min-width: 800px) 800px, 100vw,"
  alt="Hero image">

Correto: vírgula final removida

<img
  src="hero-800.jpg"
  srcset="hero-400.jpg 400w, hero-800.jpg 800w"
  sizes="(min-width: 800px) 800px, 100vw"
  alt="Hero image">

Usar `sizes` num `<source>` dentro de `<picture>`

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

Usar condições de media compostas

Pode combinar condições com and:

<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
  sizes="(min-width: 900px) and (orientation: landscape) 50vw, 100vw"
  alt="A sample photo">

Documento válido completo

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Responsive Image Example</title>
  </head>
  <body>
    <img
      src="pic-800.jpg"
      srcset="pic-400.jpg 400w, pic-800.jpg 800w"
      sizes="(min-width: 600px) 50vw, 100vw"
      alt="A picture demonstrating valid sizes usage">
  </body>
</html>