Verificação HTML: Valor inválido "" para o atributo "imagesrcset" no elemento "link": Deve conter uma ou mais strings de candidatos de imagem.

Sobre este problema HTML

O atributo imagesrcset é usado exclusivamente em elementos <link> que têm rel="preload" e as="image". Espelha o atributo srcset do elemento <img>, permitindo que o navegador pré-carregue o recurso de imagem mais apropriado com base na viewport atual e condições de exibição. Quando o validador encontra imagesrcset="" (um valor vazio), reporta este erro porque uma string vazia não é um conjunto de fontes válido — deve conter pelo menos uma string de candidato de imagem.

Cada string de candidato de imagem no valor imagesrcset consiste numa URL seguida de um descritor de largura opcional (ex., 480w) ou descritor de densidade de pixéis (ex., 2x). Múltiplos candidatos são separados por vírgulas. Esta é a mesma sintaxe usada pelo atributo srcset em elementos <img>.

Este problema surge tipicamente quando um CMS, gerador de sites estáticos, ou motor de templates produz o atributo imagesrcset com um valor vazio — por exemplo, quando um campo de imagem responsiva não tem dados. Os navegadores podem ignorar o atributo malformado, mas resulta em HTML inválido, pode causar comportamento de pré-carregamento inesperado, e sinaliza que as dicas de recursos da página estão mal configuradas. Corrigi-lo garante conformidade com os padrões e que o scanner de pré-carregamento do navegador funciona conforme pretendido.

Como corrigir

Forneça um conjunto de fontes válido — popule imagesrcset com uma ou mais strings de candidatos de imagem.
Remova o atributo — se não tiver múltiplas fontes de imagem para pré-carregar, remova completamente imagesrcset (e imagesizes) do elemento <link>. Ainda pode pré-carregar uma única imagem usando apenas o atributo href.
Renderização condicional — se o seu sistema de templates pode produzir um valor vazio, adicione lógica para omitir o atributo quando não há fontes responsivas disponíveis.

Quando usar imagesrcset, deve também incluir o atributo imagesizes (espelhando o atributo sizes no <img>) para que o navegador possa selecionar o candidato correto com base na informação de layout.

Exemplos

❌ `imagesrcset` vazio desencadeia o erro

<link rel="preload" as="image" href="hero.jpg" imagesrcset="" imagesizes="">

O valor vazio de imagesrcset é inválido e produz o erro de validação W3C.

✅ `imagesrcset` válido com descritores de largura

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

Isto diz ao navegador para pré-carregar a imagem mais apropriada com base na largura da viewport, correspondendo ao comportamento responsivo do elemento <img> correspondente na página.

✅ `imagesrcset` válido com descritores de densidade de pixéis

<link
  rel="preload"
  as="image"
  href="logo.png"
  imagesrcset="logo.png 1x, logo@2x.png 2x">

Isto pré-carrega a variante correta do logótipo com base na densidade de pixéis do dispositivo.

✅ Removendo o atributo quando não existem fontes responsivas

<link rel="preload" as="image" href="hero.jpg">

Se tiver apenas uma única imagem para pré-carregar, simplesmente use href sem imagesrcset. Isto é válido e evita completamente o erro.

✅ Renderização condicional num template

Se estiver a usar uma linguagem de templating, inclua condicionalmente o atributo:

<!-- Exemplo de pseudocódigo -->

<link
  rel="preload"
  as="image"
  href="hero.jpg"
  {% if responsive_sources %}
    imagesrcset="{{ responsive_sources }}"
    imagesizes="{{ image_sizes }}"
  {% endif %}>

Isto previne que o atributo seja renderizado com um valor vazio quando não há dados de imagem responsiva disponíveis.