Verificação HTML: Valor inválido X para o atributo "sizes" no elemento "img": Tamanho de origem vazio em Y.

Sobre este problema HTML

O atributo sizes funciona em conjunto com srcset para informar o navegador sobre a largura com que uma imagem será exibida em vários tamanhos de viewport, para que o navegador possa escolher a origem de imagem mais adequada antes de o layout da página ser calculado. O valor do atributo é uma lista separada por vírgulas onde cada entrada consiste numa condição de media opcional seguida por um valor de tamanho de origem (um comprimento CSS). A entrada final na lista atua como o tamanho padrão e não deve incluir uma condição de media.

Quando o navegador analisa o atributo sizes e encontra uma entrada vazia — ou seja, não há nada significativo entre duas vírgulas ou após uma vírgula final — não consegue resolver essa entrada para um tamanho de origem válido. O algoritmo de análise do padrão HTML living trata isto como um erro. Embora a maioria dos navegadores ignore silenciosamente a entrada vazia e ainda renderize a imagem, o atributo mal formado pode levar a comportamentos inesperados e indica um problema de qualidade do código que deve ser resolvido.

Causas comuns deste erro incluem:

Uma vírgula final no final do valor sizes (ex.: "100vw, 50vw, ").
Vírgulas duplas no meio da lista (ex.: "100vw, , 50vw").
Valores gerados dinamicamente onde um template ou CMS produz uma vírgula mesmo quando uma entrada de tamanho é condicionalmente omitida.

Corrigir o problema é simples: certifique-se de que cada vírgula na lista separa duas entradas de tamanho de origem válidas, e que a lista não começa nem termina com uma vírgula.

Exemplos

Vírgula final (inválido)

A causa mais comum — uma vírgula após a última entrada cria um tamanho de origem vazio:

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

Vírgula final corrigida

Remova a vírgula final para que a lista termine com uma entrada válida:

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

Vírgula dupla no meio (inválido)

Uma vírgula dupla cria uma entrada vazia entre dois tamanhos válidos:

<img
  src="banner.jpg"
  alt="Promotional banner"
  sizes="(min-width: 1024px) 960px, , 100vw"
  srcset="banner-960.jpg 960w, banner-480.jpg 480w">

Vírgula dupla corrigida

Remova a vírgula extra para que cada entrada seja separada por exatamente uma vírgula:

<img
  src="banner.jpg"
  alt="Promotional banner"
  sizes="(min-width: 1024px) 960px, 100vw"
  srcset="banner-960.jpg 960w, banner-480.jpg 480w">

Tamanhos gerados dinamicamente com uma entrada vazia (inválido)

Templates ou plataformas CMS às vezes produzem vírgulas para entradas que estão condicionalmente vazias:

<img
  src="hero.jpg"
  alt="Hero image"
  sizes="(min-width: 1400px) 1200px, , (min-width: 768px) 700px, 100vw"
  srcset="hero-1200.jpg 1200w, hero-700.jpg 700w, hero-350.jpg 350w">

Tamanhos gerados dinamicamente corrigidos

Certifique-se de que a lógica do template apenas produz uma vírgula quando uma entrada válida se segue:

<img
  src="hero.jpg"
  alt="Hero image"
  sizes="(min-width: 1400px) 1200px, (min-width: 768px) 700px, 100vw"
  srcset="hero-1200.jpg 1200w, hero-700.jpg 700w, hero-350.jpg 350w">

Se o seu atributo sizes for construído dinamicamente, considere filtrar valores vazios antes de os juntar com vírgulas, ou remover vírgulas finais do resultado final. Um atributo sizes bem formado deve sempre consistir numa ou mais entradas válidas separadas por vírgulas simples, com a última entrada a servir como o tamanho de origem padrão (normalmente algo como 100vw).