Valor inválido X para o atributo “srcset” no elemento “source”: Deve conter uma ou mais strings de candidato de imagem.

O elemento <source> é usado dentro de elementos <picture>, <audio>, ou <video> para especificar recursos de media alternativos. Quando usado dentro de um elemento <picture>, o atributo srcset é obrigatório e deve conter uma ou mais strings de candidato de imagem separadas por vírgulas. Cada string de candidato de imagem consiste num URL e num descritor opcional — seja um descritor de largura como 400w ou um descritor de densidade de píxeis como 2x.

Este erro de validação ocorre tipicamente quando:

• O atributo srcset está presente mas vazio (srcset="").
• O valor do atributo contém apenas espaços em branco.
• O valor está malformado ou contém erros de sintaxe (por exemplo, URLs em falta, descritores inválidos).
• Um sistema de templates dinâmico ou CMS produz o atributo sem valor.

Por que isto é importante

Os browsers dependem do atributo srcset para selecionar a imagem mais apropriada para exibir com base nas capacidades do dispositivo do utilizador, tamanho da viewport e condições da rede. Um srcset vazio ou inválido significa que o browser não pode realizar esta seleção, potencialmente resultando em nenhuma imagem ser exibida. Isto degrada a experiência do utilizador, prejudica a acessibilidade (leitores de ecrã e tecnologias assistivas podem encontrar comportamentos inesperados) e viola a especificação HTML conforme definida pelo padrão vivo WHATWG.

Como corrigir

1. Forneça pelo menos um URL de imagem válido no atributo srcset.
2. Opcionalmente adicione descritores — use descritores de largura (w) quando combinado com o atributo sizes, ou descritores de densidade de píxeis (x) para imagens de tamanho fixo.
3. Se não tem imagem para fornecer, remova o elemento <source> inteiramente em vez de deixar srcset vazio.
4. Verifique a saída dinâmica — se um CMS ou motor de templates gera o valor srcset, adicione uma verificação condicional para omitir o elemento <source> quando não há imagens disponíveis.

Exemplos

❌ Atributo srcset vazio

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

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

❌ Sintaxe de descritor inválida

<picture>
  <source srcset="photo.webp 400" type="image/webp">
  <img src="photo.jpg" alt="Um pôr do sol sobre o oceano">
</picture>

Isto é inválido porque 400 não é um descritor reconhecido — deve ser 400w ou um descritor de densidade como 2x.

✅ Candidato de imagem única

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

Um único URL sem descritor é válido e serve como candidato padrão 1x.

✅ Múltiplos candidatos com descritores de largura

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

Isto fornece três candidatos de imagem com descritores de largura, permitindo ao browser escolher a melhor correspondência com base na viewport e densidade do ecrã.

✅ Múltiplos candidatos com descritores de densidade de píxeis

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

Os descritores de densidade de píxeis dizem ao browser que imagem usar com base na proporção de píxeis do dispositivo — 1x para ecrãs padrão e 2x para ecrãs high-DPI (Retina).

✅ Remover o elemento source quando não há imagem disponível

Se a sua aplicação gera dinamicamente o valor srcset e por vezes não tem imagem para fornecer, omita o elemento <source> inteiramente:

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

Isto é válido porque o elemento <img> dentro de <picture> serve como fallback obrigatório e pode funcionar sozinho.

Encontre problemas como este automaticamente

O Rocket Validator analisa milhares de páginas em segundos, detetando problemas HTML em todo o seu site.

Iniciar teste gratuito Ver preços