Verificação HTML: Valor incorreto "" para o atributo "imagesizes" no elemento "link": Não pode estar vazio.

Sobre este problema HTML

O atributo imagesizes é usado exclusivamente em elementos <link> que têm rel="preload" e as="image". Funciona em conjunto com o atributo imagesrcset para permitir que o navegador pré-carregue a imagem mais apropriada de um conjunto de candidatas — espelhando como sizes e srcset funcionam num elemento <img>. Quando o navegador encontra estes atributos num <link>, pode começar a buscar o recurso de imagem correto cedo, antes mesmo de analisar a tag <img> no corpo do documento.

Quando imagesizes é definido como uma string vazia (""), o navegador não tem informação sobre o tamanho de exibição pretendido da imagem, o que derrota o propósito do pré-carregamento de imagem responsiva. O navegador não pode selecionar o melhor candidato de imagesrcset sem saber quão grande a imagem será renderizada. Um valor vazio é inválido segundo a especificação HTML, que requer que o atributo contenha uma lista de tamanhos de fonte válida (a mesma sintaxe usada pelo atributo sizes em <img>).

Isto importa tanto para performance como para conformidade com padrões. O pré-carregamento responsivo é uma otimização de performance — um imagesizes vazio prejudica isso ao deixar o navegador incapaz de fazer uma escolha informada. De uma perspetiva de padrões, o validador corretamente rejeita o valor vazio porque o espaço de valores definido do atributo não inclui a string vazia.

Como corrigir

Forneça um valor de tamanhos válido que corresponda ao atributo sizes no elemento <img> correspondente na sua página. Isto informa o navegador sobre quão larga a imagem será em várias larguras de viewport.
Remova imagesizes completamente se não precisar de pré-carregamento responsivo. Se está a pré-carregar uma única imagem (usando href em vez de imagesrcset), não precisa de imagesizes de todo.

Exemplos

❌ Incorreto: atributo `imagesizes` vazio

<link
  rel="preload"
  as="image"
  imagesrcset="hero-480.jpg 480w, hero-800.jpg 800w, hero-1200.jpg 1200w"
  imagesizes="">

O imagesizes="" vazio desencadeia o erro de validação e impede o navegador de selecionar o candidato de imagem correto.

✅ Corrigido: fornecendo um valor de tamanhos válido

<link
  rel="preload"
  as="image"
  imagesrcset="hero-480.jpg 480w, hero-800.jpg 800w, hero-1200.jpg 1200w"
  imagesizes="(max-width: 600px) 480px, (max-width: 1000px) 800px, 1200px">

O valor imagesizes usa a mesma sintaxe que o atributo sizes em <img>. Fornece condições de media emparelhadas com comprimentos, com um comprimento de recurso no final. Este valor deve corresponder ao atributo sizes no elemento <img> correspondente na sua marcação.

✅ Corrigido: imagem simples de largura total

<link
  rel="preload"
  as="image"
  imagesrcset="banner-640.jpg 640w, banner-1280.jpg 1280w"
  imagesizes="100vw">

Se a imagem abrange toda a largura do viewport, 100vw é um valor direto e válido.

✅ Corrigido: removendo o atributo quando não necessário

<link rel="preload" as="image" href="logo.png">

Se está a pré-carregar uma única imagem não responsiva, omita tanto imagesrcset como imagesizes e use o atributo href em vez disso. O atributo imagesizes só é significativo quando emparelhado com imagesrcset.