Verificação HTML: Valor inválido X para o atributo "src" no elemento "img": Carácter ilegal no segmento do caminho.

Sobre este problema HTML

As URLs seguem regras de sintaxe rigorosas definidas pela RFC 3986. Dentro de um segmento de caminho de uma URL, apenas um conjunto específico de caracteres é permitido aparecer literalmente. Quando um carácter está fora deste conjunto permitido, deve ser codificado em percentagem — representado como um sinal % seguido por dois dígitos hexadecimais correspondentes ao código ASCII do carácter. O validador W3C verifica que todas as URLs no seu HTML estão em conformidade com estas regras, e sinaliza qualquer valor src que contenha caracteres ilegais não codificados.

Caracteres que comumente desencadeiam este erro incluem:

Carácter	Codificado em percentagem
(espaço)	`%20`
`[`	`%5B`
`]`	`%5D`
`{`	`%7B`
`}`	`%7D`
`\|`	`%7C`
`^`	`%5E`
`	`%60`

Outros caracteres reservados como ?, #, @, !, $, &, ', (, ), *, +, ,, ; e = também precisam de codificação quando usados como dados literais num segmento de caminho em vez de delimitadores de URL. O próprio carácter % deve ser codificado como %25 se aparecer literalmente.

Por que isto é um problema

Inconsistência do navegador: Embora muitos navegadores modernos corrijam silenciosamente URLs malformadas, nem todos o fazem. Alguns navegadores, agentes de utilizador mais antigos ou clientes HTTP podem falhar ao carregar o recurso ou interpretar a URL de forma diferente, levando a imagens quebradas.
Conformidade com padrões: URLs inválidas violam a especificação HTML, que exige que valores de atributos contendo URLs estejam em conformidade com a sintaxe válida de URL.
Interoperabilidade: Servidores, CDNs, proxies e camadas de cache podem lidar com caracteres ilegais de forma imprevisível, causando falhas intermitentes que são difíceis de depurar.
Acessibilidade: Se uma URL estiver malformada e a imagem falhar ao carregar, utilizadores que dependem de tecnologias assistivas podem não receber o conteúdo pretendido, mesmo quando texto alt apropriado é fornecido.

Como corrigir

Você tem duas abordagens principais:

Codificar em percentagem os caracteres ilegais no valor src. Substitua cada carácter ofensivo pelo seu equivalente %XX.
Renomear o ficheiro para usar apenas caracteres seguros para URL. Use letras minúsculas, dígitos, hífenes (-), underscores (_) e pontos (.). Esta é a solução mais limpa a longo prazo.

Se está a gerar URLs programaticamente, use as funções de codificação de URL integradas na sua linguagem (por exemplo, encodeURIComponent() em JavaScript, urlencode() em PHP, ou urllib.parse.quote() em Python).

Exemplos

Caracteres ilegais no nome do ficheiro

Os parênteses retos no valor src não são permitidos num segmento de caminho de URL:

<!-- ❌ Inválido: [ e ] não codificados no caminho da URL -->

<img src="image[00].svg" alt="Logótipo da empresa">

Corrigir por codificação em percentagem:

<!-- ✅ Válido: [ e ] codificados em percentagem -->

<img src="image%5B00%5D.svg" alt="Logótipo da empresa">

Corrigir renomeando o ficheiro:

<!-- ✅ Válido: nome do ficheiro usa apenas caracteres seguros -->

<img src="image-00.svg" alt="Logótipo da empresa">

Espaços no nome do ficheiro

Os espaços são uma das causas mais comuns deste erro:

<!-- ❌ Inválido: espaço no caminho da URL -->

<img src="my photo.jpg" alt="Foto de férias">

<!-- ✅ Válido: espaço codificado como %20 -->

<img src="my%20photo.jpg" alt="Foto de férias">

<!-- ✅ Válido: nome do ficheiro usa um hífen em vez de um espaço -->

<img src="my-photo.jpg" alt="Foto de férias">

Chavetas num caminho tipo template

Por vezes, nomes de ficheiros ou caminhos contêm chavetas de artefactos de templates ou convenções de nomenclatura:

<!-- ❌ Inválido: { e } não codificados no caminho da URL -->

<img src="icons/{home}.png" alt="Ícone de início">

<!-- ✅ Válido: chavetas codificadas em percentagem -->

<img src="icons/%7Bhome%7D.png" alt="Ícone de início">

Melhor prática para nomenclatura de ficheiros

A forma mais simples de evitar este erro completamente é adotar uma convenção consistente de nomenclatura de ficheiros que use apenas caracteres seguros para URL:

<!-- ✅ Válido: nomes de ficheiros limpos e seguros para URL -->

<img src="images/hero-banner-2024.webp" alt="Banner de boas-vindas">
<img src="photos/team_photo_01.jpg" alt="A nossa equipa">