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 Y em Z.

Como funciona o atributo sizes

O atributo sizes funciona juntamente com srcset para permitir imagens responsivas. Quando você fornece srcset com descritores de largura (ex.: 400w, 800w), o navegador precisa de saber qual será a largura real da área da imagem no ecrã para poder escolher a melhor candidata. É isso que sizes fornece — uma lista separada por vírgulas de descritores de tamanho que dizem ao navegador a largura renderizada da imagem sob várias condições de viewport.

Cada entrada na lista segue este padrão:

• Condição de media opcional seguida por um comprimento CSS: (max-width: 600px) 100vw
• Um comprimento de fallback final sem condição de media: 33vw

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

Por que este erro ocorre

O validador verifica que cada token de comprimento em sizes usa uma das unidades de comprimento CSS absolutas ou relativas reconhecidas: em, ex, ch, rem, cap, ic, vw, vh, vmin, vmax, cm, mm, q, in, pc, pt, px, e as suas variantes de viewport pequeno/grande/dinâmico (svw, lvw, dvw, svh, lvh, dvh, svi, lvi, dvi, svb, lvb, dvb, svmin, lvmin, dvmin, svmax, lvmax, dvmax).

Percentagens (%) não são permitidas. Este é um ponto comum de confusão — embora % seja válido na maioria dos contextos CSS, o atributo sizes proíbe-o explicitamente porque uma percentagem seria ambígua (percentagem de quê?). A unidade vw é tipicamente a substituição correcta quando você quer expressar uma fracção da largura do viewport.

Aqui estão os erros mais comuns que desencadeiam este erro:

• Unidades em falta: sizes="100" — um número isolado não tem significado sem uma unidade.
• Usar percentagens: sizes="50%" — use 50vw em vez disso.
• Erros de escrita nos nomes das unidades: 100pxx, 100vws, 50 vw (com um espaço entre o número e a unidade).
• Múltiplos comprimentos numa única entrada: sizes="(min-width: 800px) 50vw 400px" — cada entrada deve conter exactamente um comprimento.
• Usar calc() incorrectamente: Embora calc() seja válido em sizes, as expressões dentro dele também devem usar unidades válidas.

Por que é importante

Quando o valor de sizes está malformado, os navegadores recorrem a um padrão de 100vw, o que significa que cada imagem é tratada como se ocupasse toda a largura do viewport. Isto derrota o propósito das imagens responsivas — o navegador pode descarregar ficheiros desnecessariamente grandes em ecrãs pequenos, desperdiçando largura de banda e atrasando o carregamento da página. Valores sizes válidos são essenciais para uma optimização adequada de imagens.

Adicionalmente, HTML inválido pode causar comportamento imprevisível entre diferentes navegadores e versões. Marcação compatível com padrões garante renderização consistente e compatibilidade futura.

Como corrigir

1. Encontre a posição indicada na mensagem de erro (a parte “at Z”) — isto diz-lhe exactamente onde na string sizes o token inválido foi encontrado.
2. Verifique números isolados e adicione a unidade apropriada (px, vw, em, etc.).
3. Substitua % por vw se pretendia uma percentagem da largura do viewport.
4. Corrija erros de escrita nos nomes das unidades.
5. Garanta que cada entrada separada por vírgulas tem exactamente um comprimento, opcionalmente precedido por uma condição de media entre parênteses.
6. Verifique que não há espaço entre o número e a sua unidade — 100vw está correcto, 100 vw não está.

Exemplos

❌ Número isolado sem unidade

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

✅ Corrigido: adicionar unidades vw e px

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

❌ Usar percentagem inválida

<img
  src="banner-800.jpg"
  srcset="banner-800.jpg 800w, banner-1600.jpg 1600w"
  sizes="(max-width: 700px) 100%, 80%"
  alt="Promotional banner">

✅ Corrigido: substituir % por vw

<img
  src="banner-800.jpg"
  srcset="banner-800.jpg 800w, banner-1600.jpg 1600w"
  sizes="(max-width: 700px) 100vw, 80vw"
  alt="Promotional banner">

❌ Múltiplos comprimentos numa entrada

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

✅ Corrigido: um comprimento por entrada, separados por vírgulas

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

❌ Erro de escrita no nome da unidade

<img
  src="thumb-320.jpg"
  srcset="thumb-320.jpg 320w, thumb-640.jpg 640w"
  sizes="320pxx"
  alt="Thumbnail">

✅ Corrigido: corrigir a unidade

<img
  src="thumb-320.jpg"
  srcset="thumb-320.jpg 320w, thumb-640.jpg 640w"
  sizes="320px"
  alt="Thumbnail">

✅ Múltiplas condições de media com um fallback

<img
  src="photo-640.jpg"
  srcset="photo-640.jpg 640w, photo-960.jpg 960w, photo-1280.jpg 1280w"
  sizes="(min-width: 1200px) 800px, (min-width: 800px) 60vw, 90vw"
  alt="Landscape photo">

✅ Usar calc() com unidades válidas

<img
  src="article-img-400.jpg"
  srcset="article-img-400.jpg 400w, article-img-800.jpg 800w"
  sizes="(min-width: 960px) calc(50vw - 2rem), 100vw"
  alt="Article illustration">

A função calc() é válida dentro de sizes e é útil quando a largura da imagem depende de uma combinação de tamanho do viewport e espaçamento fixo como padding ou margens. Apenas certifique-se de que cada valor dentro de calc() também usa unidades válidas.

Encontre problemas como este automaticamente

O Rocket Validator analisa milhares de páginas em segundos, detetando problemas HTML em todo o seu site.

Iniciar teste gratuito Ver preços