Como adicionar imagens no Markdown

Ao visitar qualquer site, você provavelmente já percebeu que as imagens tornam as páginas mais envolventes e visualmente atrativas. Se o conteúdo fosse apenas texto, ele pareceria monótono e sem vida. Elementos visuais ajudam os usuários a compreender e lembrar melhor as informações, além de tornar a interface mais amigável.

Markdown é uma linguagem de marcação simples e fácil de usar, ideal para criar textos com o mínimo de esforço. É amplamente utilizada para escrever documentação, artigos e posts de blog. O Markdown também permite adicionar imagens ao conteúdo, desempenhando um papel fundamental na visualização das informações e tornando-as mais claras e memoráveis.

Principais métodos para adicionar imagens

Copiar link

Existem dois métodos principais para inserir imagens no Markdown: imagens locais e links externos.

Imagens locais

Copiar link

Para inserir imagens armazenadas localmente, é essencial informar corretamente o caminho do arquivo. Recomenda-se armazenar as imagens no mesmo diretório do arquivo Markdown ou na mesma estrutura hierárquica.

Se a imagem estiver no mesmo diretório que o arquivo .md, basta usar o nome do arquivo:

• 

Se a imagem estiver em um subdiretório (por exemplo, /img):

• 

O texto entre colchetes ([Computer]) é o texto alternativo (alt text). Ele aparece quando a imagem não pode ser carregada e também é utilizado por leitores de tela para descrever a imagem para pessoas com deficiência visual.

O caminho da imagem é colocado entre parênteses. Verifique se o caminho está correto para evitar problemas de exibição após enviar o conteúdo para um servidor.

Imagens externas

Copiar link

Para inserir uma imagem hospedada na internet, use sua URL:

• 

Vantagens de usar imagens externas:

• Economiza espaço no repositório

• Prático quando as imagens são atualizadas com frequência

Desvantagens:

• Dependência de uma fonte externa

• A imagem deixará de ser exibida caso seja removida ou a URL mude

Tamanho da imagem

Copiar link

O Markdown padrão não oferece suporte nativo para controlar o tamanho da imagem (exceto em plataformas que adicionam extensões, como o GitHub). Porém, é possível usar HTML:

• <img src="/img/computer.png" alt="Computer" width="500" height="300">

Formatação aprimorada

Copiar link

A formatação avançada ajuda a destacar elementos e torna o conteúdo mais acessível e fácil de ler.

Legenda da imagem

Copiar link

Legendas fornecem informações adicionais ao leitor:

• 

Imagem clicável

Copiar link

Para transformar uma imagem em um link clicável, envolva a sintaxe da imagem com um link:

• [](https://site)

Alt text eficaz

Copiar link

O texto alternativo deve descrever claramente o conteúdo da imagem.

Alt text ruim:

• 

Alt text bom:

• 

Por que o alt text é importante?

Copiar link

Acessibilidade:
Leitores de tela usam o texto alternativo para descrever imagens a pessoas com deficiência visual.

SEO:
Mecanismos de busca indexam o alt text, ajudando seu conteúdo a ser encontrado.

Dicas para trabalhar com imagens

Copiar link

• Use imagens com o menor tamanho de arquivo possível para acelerar o carregamento da página.

• Otimize as imagens antes de enviá-las.

• Certifique-se de que o alt text seja único e preciso.

• O nome do arquivo deve ser relevante e conter palavras-chave.
  Exemplo: em vez de img123.png, use computer-setup.png.

Métodos para inserir imagens — Comparação

Copiar link

Conclusão

Copiar link

Agora você já sabe como inserir imagens no Markdown, controlar seu tamanho, adicionar legendas e melhorar a acessibilidade usando texto alternativo. As imagens tornam o conteúdo mais visual e ajudam os leitores a entender melhor a informação.

Confira também nossas soluções de hospedagem WordPress confiáveis e de alto desempenho para seus sites WordPress.