O atributo “sizes” só pode ser especificado se o atributo “srcset” também estiver presente.

O atributo sizes e o atributo srcset funcionam em conjunto como um sistema para imagens responsivas. O atributo srcset fornece ao navegador uma lista de candidatos de imagem (tipicamente em diferentes larguras ou densidades de pixels), enquanto o atributo sizes informa ao navegador quanto espaço a imagem ocupará no layout. O navegador usa ambas as informações em conjunto para escolher o ficheiro de imagem mais apropriado para descarregar.

Quando especifica sizes sem srcset, o atributo não tem propósito. Existe apenas uma fonte de imagem (o atributo src), pelo que o navegador não tem nada de onde escolher, e as dicas de layout fornecidas por sizes são insignificantes. A especificação HTML afirma explicitamente que o atributo sizes não deve estar presente a menos que srcset também seja especificado com descritores de largura (w). Isto não é apenas uma preocupação estilística — sinaliza aos validadores e outras ferramentas que a marcação está incompleta ou incorreta, o que pode indicar um erro de copiar-colar ou um atributo em falta.

Este problema ocorre frequentemente quando:

• O atributo srcset é acidentalmente removido durante refatorização, deixando sizes órfão.
• Um programador adiciona sizes em preparação para imagens responsivas mas esquece-se de adicionar srcset.
• O código é copiado de um modelo e parcialmente modificado.

Exemplos

❌ Inválido: sizes sem srcset

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

O atributo sizes está presente, mas não existe srcset para fornecer múltiplos candidatos de imagem. O navegador não tem uso para a informação de dimensionamento.

✅ Correção: adicionar um atributo srcset correspondente

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

Agora sizes informa ao navegador: “Abaixo de viewports de 600px, a imagem preenche 100% da largura do viewport; caso contrário preenche 50%.” O navegador combina isto com os descritores de largura em srcset para selecionar a melhor imagem.

✅ Correção: remover sizes se não precisar de imagens responsivas

<img
  src="photo.jpg"
  alt="A landscape photo">

Se só tem uma única fonte de imagem e não precisa de comportamento responsivo, simplesmente remova o atributo sizes.

✅ Usar sizes com <source> dentro de <picture>

A mesma regra aplica-se aos elementos <source> dentro de um bloco <picture>:

<picture>
  <source
    srcset="photo-dark-400.jpg 400w, photo-dark-800.jpg 800w"
    sizes="(max-width: 600px) 100vw, 50vw"
    media="(prefers-color-scheme: dark)">
  <img
    src="photo.jpg"
    srcset="photo-400.jpg 400w, photo-800.jpg 800w"
    sizes="(max-width: 600px) 100vw, 50vw"
    alt="A landscape photo">
</picture>

Cada elemento que usa sizes também inclui um srcset correspondente com descritores de largura.

Uma nota sobre srcset com descritores de densidade de pixels

O atributo sizes é especificamente projetado para uso com descritores de largura (w) em srcset. Se estiver a usar descritores de densidade de pixels (x) em vez disso, sizes não é necessário:

<img
  src="photo.jpg"
  srcset="photo-2x.jpg 2x, photo-3x.jpg 3x"
  alt="A landscape photo">

Neste caso, o navegador seleciona com base na proporção de pixels do dispositivo em vez do tamanho do viewport, pelo que sizes seria desnecessário.

Saiba mais:

MDN Reference

HTMLImageElement.srcset guide

→