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

Sobre este problema HTML

O atributo srcset permite-lhe especificar múltiplas fontes de imagem para que o browser possa escolher a mais apropriada com base nas características do dispositivo do utilizador, como a resolução do ecrã ou largura da viewport. Quando inclui um atributo srcset num elemento <img>, a especificação HTML requer que contenha uma ou mais strings de candidatos de imagem separadas por vírgulas. Cada string consiste num URL seguido por um descritor opcional — seja um descritor de largura (ex: 200w) ou um descritor de densidade de píxeis (ex: 2x).

Este erro de validação tipicamente aparece quando:

O atributo srcset está vazio (srcset="")
O atributo srcset contém apenas espaços em branco (srcset=" ")
O valor contém erros de sintaxe como URLs em falta, descritores inválidos, ou formatação incorreta
Um motor de templates ou CMS produz o atributo sem valor

Isto é importante porque os browsers dependem do valor srcset para selecionar a melhor imagem a carregar. Um srcset vazio ou mal formado significa que o browser deve recorrer inteiramente ao atributo src, tornando o atributo srcset inútil. Adicionalmente, markup inválida pode causar comportamentos inesperados entre diferentes browsers e compromete a conformidade com padrões.

Como corrigir

Forneça strings de candidatos de imagem válidas. Cada entrada precisa de um URL e opcionalmente um descritor de largura ou densidade de píxeis, com entradas separadas por vírgulas.
Remova o atributo inteiramente se não tem múltiplas fontes de imagem para oferecer. Um atributo src simples é perfeitamente adequado por si só.
Verifique a saída dinâmica. Se um CMS ou sistema de templates gera o srcset, certifique-se de que omite condicionalmente o atributo quando não há candidatos de imagem responsiva disponíveis, em vez de produzir um atributo vazio.

Exemplos

❌ Atributo `srcset` vazio

<img src="/img/photo.jpg" alt="Um pôr do sol sobre o oceano" srcset="">

Isto desencadeia o erro porque srcset está presente mas não contém strings de candidatos de imagem.

❌ Valor `srcset` mal formado

<img src="/img/photo.jpg" alt="Um pôr do sol sobre o oceano" srcset="1x, 2x">

Isto é inválido porque cada string de candidato deve incluir um URL. Descritores sozinhos não são entradas válidas.

✅ Usar descritores de densidade de píxeis

<img
  src="/img/photo-400.jpg"
  alt="Um pôr do sol sobre o oceano"
  srcset="
    /img/photo-400.jpg 1x,
    /img/photo-800.jpg 2x
  ">

Cada string de candidato contém um URL seguido por um descritor de densidade de píxeis (1x, 2x). O browser escolhe a melhor correspondência para o ecrã do utilizador.

✅ Usar descritores de largura com `sizes`

<img
  src="/img/photo-400.jpg"
  alt="Um pôr do sol sobre o oceano"
  srcset="
    /img/photo-400.jpg 400w,
    /img/photo-800.jpg 800w,
    /img/photo-1200.jpg 1200w
  "
  sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px">

Descritores de largura (ex: 400w) informam o browser da largura intrínseca de cada imagem. O atributo sizes depois informa o browser quão grande a imagem será exibida em vários tamanhos de viewport, permitindo-lhe calcular a melhor fonte para descarregar.

✅ Remover `srcset` quando não necessário

<img src="/img/photo.jpg" alt="Um pôr do sol sobre o oceano">

Se tem apenas uma única fonte de imagem, simplesmente omita srcset completamente. O atributo src sozinho é válido e suficiente.

✅ Candidato único em `srcset`

<img
  src="/img/photo.jpg"
  alt="Um pôr do sol sobre o oceano"
  srcset="/img/photo-highres.jpg 2x">

Mesmo uma única string de candidato de imagem é válida. Aqui, o browser usará a imagem de alta resolução em ecrãs 2x e recorrerá ao src caso contrário.