Verificação HTML: Valor inválido "" para o atributo "sizes" no elemento "img": Não pode estar vazio.

Sobre este problema HTML

O atributo sizes funciona em conjunto com o atributo srcset para ajudar o navegador a escolher a origem de imagem mais apropriada antes do cálculo do layout da página. Descreve a largura com que a imagem será exibida sob várias condições de viewport, permitindo ao navegador escolher uma imagem com tamanho otimizado dos candidatos listados em srcset. De acordo com a especificação HTML, o valor de sizes deve ser uma lista de tamanhos de origem válida — um conjunto separado por vírgulas de condições de média emparelhadas com comprimentos, com um comprimento padrão no final. Uma string vazia ("") não satisfaz este requisito e é, portanto, inválida.

Quando o navegador encontra um atributo sizes vazio, não consegue determinar a largura de exibição pretendida da imagem. Isto anula o propósito das imagens responsivas e pode fazer com que o navegador recorra ao comportamento padrão (normalmente assumindo 100vw), o que pode resultar no descarregamento de uma imagem desnecessariamente grande. Para além da questão funcional, um atributo vazio sinaliza um problema de qualidade de código — frequentemente significa que um template está a produzir o atributo mesmo quando não foi configurado valor algum.

Porque isto importa

Conformidade com padrões: A especificação HTML explicitamente requer que sizes seja uma lista de tamanhos de origem não vazia e válida quando presente. Um valor vazio é um erro de parsing.
Performance: Sem um valor sizes adequado, o navegador não pode tomar uma decisão informada sobre qual candidato srcset descarregar. Isto pode levar a desperdício de largura de banda e carregamentos de página mais lentos, especialmente em dispositivos móveis.
Qualidade do código: Atributos vazios confundem a sua marcação e sugerem configuração em falta, tornando o código mais difícil de manter.

Como corrigir

Forneça um valor sizes válido que descreva a largura real com que a imagem será renderizada em diferentes larguras de viewport.
Remova sizes completamente se não estiver a usar descritores de largura (w) em srcset. Quando srcset usa descritores de densidade de píxeis (1x, 2x), o atributo sizes não é necessário.
Remova tanto sizes como srcset se não precisar de seleção de imagem responsiva.

Exemplos

❌ Atributo `sizes` vazio

<img
  src="photo.jpg"
  srcset="photo-small.jpg 480w, photo-large.jpg 1200w"
  sizes=""
  alt="A mountain landscape">

O sizes="" vazio despoleta o erro de validação.

✅ `sizes` válido com um único valor padrão

Se a imagem ocupa sempre toda a largura do viewport:

<img
  src="photo.jpg"
  srcset="photo-small.jpg 480w, photo-large.jpg 1200w"
  sizes="100vw"
  alt="A mountain landscape">

✅ `sizes` válido com condições de média

Se a imagem exibe em diferentes larguras dependendo do viewport:

<img
  src="photo.jpg"
  srcset="photo-small.jpg 480w, photo-medium.jpg 800w, photo-large.jpg 1200w"
  sizes="(max-width: 600px) 100vw, (max-width: 1024px) 50vw, 33vw"
  alt="A mountain landscape">

Isto diz ao navegador: use 100vw em viewports até 600px, 50vw até 1024px, e 33vw caso contrário.

✅ Remover `sizes` ao usar descritores de densidade

Quando srcset usa descritores de densidade em vez de descritores de largura, sizes não é aplicável e deve ser omitido:

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

✅ Remover ambos os atributos quando não necessários

Se a seleção de imagem responsiva não for necessária, use simplesmente um <img> padrão:

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

Correção comum de template

Se o seu CMS ou sistema de templates produz condicionalmente estes atributos, certifique-se de que o atributo sizes só é renderizado quando tem um valor. Por exemplo, num template:

<!-- Antes (sempre produz sizes, mesmo quando vazio) -->

<img src="photo.jpg" srcset="{{srcset}}" sizes="{{sizes}}" alt="{{alt}}">

<!-- Depois (só produz sizes quando tem um valor) -->

<img src="photo.jpg" srcset="{{srcset}}" {{#if sizes}}sizes="{{sizes}}"{{/if}} alt="{{alt}}">