O atributo “sizes” deve apenas ser especificado se o atributo “srcset” também for especificado.

O atributo sizes e o atributo srcset são projetados para trabalhar em conjunto para entrega responsiva de imagens. O atributo srcset fornece ao navegador uma lista de ficheiros de imagem e as suas larguras intrínsecas (por exemplo, 480w, 800w), enquanto o atributo sizes diz ao navegador quanto espaço a imagem irá ocupar no layout em diferentes tamanhos de viewport. O navegador combina esta informação para selecionar o ficheiro de imagem mais apropriado para descarregar.

Quando sizes aparece sem srcset, não serve nenhum propósito. O navegador tem apenas a única imagem especificada no atributo src, portanto não há decisão a tomar sobre qual imagem carregar. A especificação HTML exige explicitamente que sizes não deve estar presente a menos que srcset também seja especificado com descritores de largura.

Este erro ocorre comumente quando um CMS ou sistema de templates gera o atributo sizes por defeito, quando srcset é acidentalmente removido durante refatorização, ou quando programadores copiam snippets de código sem incluir todos os atributos necessários.

Além da conformidade com standards, deixar atributos sizes órfãos cria código confuso e mais difícil de manter. Outros programadores (ou o seu futuro eu) podem assumir que imagens responsivas estão configuradas quando não estão, levando a tempo desperdiçado em debugging.

Como corrigir

Tem duas opções:

1. Adicionar um atributo srcset se quiser que o navegador escolha entre múltiplos tamanhos de imagem baseado na largura do viewport. O srcset deve usar descritores de largura (w) para que sizes seja significativo.
2. Remover o atributo sizes se não precisar de imagens responsivas e um único src for suficiente.

Note que sizes também é válido em elementos <source> dentro de um elemento <picture> — a mesma regra aplica-se aí. Cada <source> com um atributo sizes deve também ter um atributo srcset.

Exemplos

❌ Incorreto: sizes sem srcset

<img
  src="image.jpg"
  sizes="(max-width: 600px) 480px, 800px"
  alt="A mountain landscape">

O atributo sizes está presente mas não há srcset, portanto o navegador não tem imagens alternativas para escolher.

✅ Correto: sizes emparelhado com srcset

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

Aqui, srcset fornece duas imagens com as suas larguras intrínsecas. O atributo sizes diz ao navegador: “Se o viewport for de 600px ou mais estreito, a imagem será exibida com 480px de largura; caso contrário, será exibida com 800px de largura.” O navegador usa esta informação para descarregar o ficheiro mais eficiente.

✅ Correto: remover sizes quando imagens responsivas não são necessárias

<img src="image.jpg" alt="A mountain landscape">

Se uma única imagem for suficiente, simplesmente retire o atributo sizes.

❌ Incorreto: sizes num <source> sem srcset

<picture>
  <source
    media="(min-width: 800px)"
    sizes="50vw">
  <img src="fallback.jpg" alt="A sunset over the ocean">
</picture>

✅ Correto: sizes num <source> com srcset

<picture>
  <source
    media="(min-width: 800px)"
    srcset="wide-480w.jpg 480w, wide-960w.jpg 960w"
    sizes="50vw">
  <img src="fallback.jpg" alt="A sunset over the ocean">
</picture>

O elemento <source> agora inclui um srcset com descritores de largura, dando ao navegador as imagens candidatas que precisa para fazer uso de sizes.

Saiba mais:

MDN Reference

MDN: sizes attribute

→

MDN Reference

MDN: srcset attribute

→