Verificação HTML: Valor inválido X para o atributo "sizes" no elemento "source": Esperadas unidades (uma de "em", "ex", "ch", "rem", "cap", "ic", "vw", "svw", "lvw", "dvw", "vh", "svh", "lvh", "dvh", "vi", "svi", "lvi", "dvi", "vb", "svb", "lvb", "dvb", "vmin", "svmin", "lvmin", "dvmin", "vmax", "svmax", "lvmax", "dvmax", "cm", "mm", "q", "in", "pc", "pt", "px") mas encontrado Y em Z.

Sobre este problema HTML

O atributo sizes informa ao navegador quão larga uma imagem será exibida em vários tamanhos de viewport, para que possa escolher o melhor candidato do srcset antes do CSS ter carregado. Cada entrada na lista sizes é uma condição de media emparelhada com um comprimento CSS, ou um comprimento de fallback simples no final. A especificação HTML requer que estes comprimentos sejam valores CSS <length> válidos, o que significa um número seguido de uma unidade reconhecida. A lista completa de unidades aceites inclui px, em, ex, ch, rem, vw, vh, vmin, vmax, cm, mm, in, pt, pc, e unidades de viewport mais recentes como svw, lvw, dvw, svh, lvh, dvh, entre outras.

A função calc() também é permitida, permitindo combinar unidades — por exemplo, calc(100vw - 2rem).

Por que isto é importante

O atributo sizes é analisado antes do layout ocorrer, significando que o navegador depende de estar sintaticamente correto para tomar decisões inteligentes de download. Um valor inválido força o navegador a recorrer a um tamanho padrão (tipicamente 100vw), que pode levar ao download de imagens que são demasiado grandes ou pequenas. Além do desempenho, um valor sizes inválido viola a especificação HTML, e alguns navegadores podem lidar com a entrada mal formada de forma inconsistente, levando a comportamento imprevisível entre dispositivos.

Erros comuns

Unidade completamente em falta: Escrever 800 em vez de 800px. Números simples sem unidades não são comprimentos CSS válidos (a única exceção no CSS é 0, mas mesmo 0 deveria ter uma unidade em sizes para clareza).
Usar percentagens: Escrever 50% em vez de 50vw. Percentagens não são permitidas em sizes porque o navegador ainda não executou o layout e não sabe a que a percentagem seria relativa. Use unidades de viewport como vw.
Erros tipográficos ou caracteres extra: Um caracter perdido, vírgula mal colocada, ou espaço em branco em falta pode alterar a posição do analisador e fazer com que encontre tokens inesperados onde espera uma unidade.
Usar auto em <source>: A palavra-chave auto para sizes só é válida em elementos <img> (e requer o atributo loading="lazy"). Usá-la em <source> irá desencadear um erro de validação.

Como corrigir

Encontre a posição indicada na mensagem de erro (“em Z”) para localizar o valor problemático.
Se o valor é um número simples, acrescente a unidade correta (por exemplo, altere 600 para 600px).
Se o valor usa %, substitua por uma unidade relativa ao viewport como vw.
Certifique-se de que vírgulas separam cada par condição-media/comprimento, e que a lista termina com um comprimento de fallback.

Exemplos

Adicionar uma unidade em falta

O valor 800 no atributo sizes não é um comprimento CSS válido porque não tem unidade.

<!-- ❌ Inválido: "800" está sem unidade -->

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

<!-- ✅ Válido: "800px" tem uma unidade adequada -->

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

Substituir uma percentagem por uma unidade de viewport

Percentagens não são permitidas em sizes. Use vw para expressar uma largura relativa ao viewport.

<!-- ❌ Inválido: "50%" não é uma unidade permitida em sizes -->

<img
  src="card-600.jpg"
  srcset="card-600.jpg 600w, card-900.jpg 900w"
  sizes="50%"
  alt="Cartão de produto">

<!-- ✅ Válido: "50vw" significa 50% da largura do viewport -->

<img
  src="card-600.jpg"
  srcset="card-600.jpg 600w, card-900.jpg 900w"
  sizes="50vw"
  alt="Cartão de produto">

Corrigir o problema num elemento `<source>`

As mesmas regras aplicam-se aos elementos <source> dentro de <picture>. Cada valor de comprimento precisa de uma unidade válida.

<!-- ❌ Inválido: "600" em <source> está sem unidade -->

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

<!-- ✅ Válido: tanto <source> como <img> usam unidades adequadas -->

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

Usar `calc()` para tamanhos de unidade mista

Você pode usar calc() para combinar diferentes unidades, o que é especialmente útil quando se considera padding ou margens.

<img
  src="article-800.jpg"
  srcset="article-800.jpg 800w, article-1200.jpg 1200w"
  sizes="(min-width: 1024px) calc(100vw - 4rem), 100vw"
  alt="Imagem de artigo">

Múltiplos slots com condições diferentes

Um atributo sizes bem formado com várias condições de media, terminando com um comprimento de fallback sem condição:

<picture>
  <source
    type="image/avif"
    srcset="banner-480.avif 480w, banner-960.avif 960w, banner-1440.avif 1440w"
    sizes="(min-width: 1200px) 960px, (min-width: 600px) 80vw, 100vw">
  <img
    src="banner-480.jpg"
    srcset="banner-480.jpg 480w, banner-960.jpg 960w, banner-1440.jpg 1440w"
    sizes="(min-width: 1200px) 960px, (min-width: 600px) 80vw, 100vw"
    alt="Banner responsivo">
</picture>

O padrão geral é: sizes="(condição) comprimento, (condição) comprimento, comprimento-fallback". Cada comprimento nessa lista — incluindo o fallback — deve ser um comprimento CSS válido com uma unidade ou uma expressão calc(). Se o erro do validador aponta para uma posição específica de caracter, inspecione exatamente esse local para uma unidade em falta, um % perdido, ou espaço em branco mal formado e substitua por uma das unidades reconhecidas.