Valor inválido X para o atributo “sizes” no elemento “img”: 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 “w” em Y

Os atributos sizes e srcset trabalham em conjunto para permitir imagens responsivas, mas servem funções distintas e usam sintaxes diferentes. O atributo srcset lista os ficheiros de imagem disponíveis juntamente com as suas larguras intrínsecas usando o descritor w (por exemplo, 800w significa que o ficheiro de imagem tem 800 pixels de largura). O atributo sizes, por outro lado, informa o navegador sobre a largura real com que a imagem será renderizada no layout, usando unidades de comprimento CSS padrão. O navegador combina esta informação — sabendo quais ficheiros estão disponíveis e quão grande a imagem aparecerá — para escolher o ficheiro mais eficiente para descarregar.

Um erro comum é misturar estas duas sintaxes, tipicamente copiando um descritor de largura como 860w do srcset e colocando-o no sizes. Como w não é uma unidade CSS, o validador rejeita-o. Isto importa porque um valor sizes inválido impede o navegador de calcular corretamente qual fonte de imagem usar, potencialmente fazendo-o descarregar uma imagem desnecessariamente grande (desperdiçando largura de banda) ou uma imagem demasiado pequena (resultando em má qualidade).

Como funciona o atributo sizes

O atributo sizes aceita uma lista separada por vírgulas de condições de media emparelhadas com comprimentos CSS, mais um comprimento padrão opcional no final. Cada entrada segue o padrão (condição-de-media) comprimento. O navegador avalia as condições por ordem e usa o comprimento da primeira condição que corresponda. Se nenhuma corresponder, usa o valor padrão final.

As unidades de comprimento CSS válidas incluem px, em, rem, vw, vh, ch, cm, mm, in, pt, pc, e expressões CSS calc(). Você pode combinar unidades com calc() para dimensionamento mais preciso — por exemplo, calc(100vw - 2rem).

Exemplos

❌ Incorreto: usando w em sizes

Isto desencadeia o erro de validação porque 860w é um descritor de largura srcset, não um comprimento CSS:

<img
  alt="Uma fotografia de paisagem"
  sizes="860w"
  srcset="photo-small.jpg 430w, photo-large.jpg 860w"
  src="photo-large.jpg">

✅ Correto: usando px em sizes

Substitua o valor w por um comprimento CSS que reflita o tamanho de exibição real da imagem:

<img
  alt="Uma fotografia de paisagem"
  sizes="860px"
  srcset="photo-small.jpg 430w, photo-large.jpg 860w"
  src="photo-large.jpg">

✅ Correto: sizes responsivo com condições de media

Use condições de media para especificar diferentes tamanhos de exibição em diferentes larguras de viewport:

<img
  alt="Uma fotografia de paisagem"
  sizes="(min-width: 1024px) 860px, (min-width: 568px) 430px, 100vw"
  srcset="photo-small.jpg 430w, photo-large.jpg 860w"
  src="photo-large.jpg">

Isto informa o navegador:

• Em viewports de 1024px e maiores, a imagem exibe com 860px de largura.
• Em viewports de 568px e maiores, a imagem exibe com 430px de largura.
• Em viewports menores, a imagem preenche toda a largura do viewport (100vw).

✅ Correto: usando calc() em sizes

Quando a largura da imagem depende de padding ou margens, calc() fornece dimensionamento preciso:

<img
  alt="Uma fotografia de paisagem"
  sizes="(min-width: 768px) calc(50vw - 2rem), calc(100vw - 1rem)"
  srcset="photo-small.jpg 400w, photo-medium.jpg 800w, photo-large.jpg 1200w"
  src="photo-medium.jpg">

Pontos principais

• O descritor w pertence apenas ao srcset, onde descreve a largura intrínseca de cada ficheiro de imagem.
• O atributo sizes usa unidades de comprimento CSS (px, vw, em, calc(), etc.) para descrever quão larga a imagem aparecerá no ecrã.
• Se a sua imagem sempre exibe numa largura fixa, um valor simples como sizes="300px" é suficiente.
• Se a largura da sua imagem varia por viewport, use condições de media com comprimentos CSS apropriados para dar ao navegador a informação de que precisa para selecionar a melhor fonte.

Saiba mais:

MDN Reference

MDN Web Docs: img sizes attribute

→

web.dev Article

Web.dev: Responsive Images | sizes attribute explained

→