Imagens em Markdown

Imagens tornam seu conteúdo mais envolvente e ajudam a ilustrar seus pontos. O Markdown fornece sintaxe simples para adicionar imagens, embora às vezes você precise de HTML para recursos mais avançados.

Sintaxe Básica de Imagem

A sintaxe básica para imagens em Markdown é similar aos links, mas com uma exclamação no início: 

![Texto alternativo](url-da-imagem.jpg)
![Imagem local](./images/foto.jpg)
![Imagem externa](https://exemplo.com/imagem.jpg)

Imagens com Títulos

Você pode adicionar títulos que aparecem quando usuários passam o mouse sobre a imagem: 

![Texto alternativo](imagem.jpg "Título da imagem")

Melhores Práticas para Texto Alternativo

O texto alternativo é crucial para acessibilidade e SEO:

1. Seja Descritivo

❌ Não útil: 

![Imagem](foto.jpg)
![Figura](pic.png)

✅ Descritivo: 

![Mulher codificando em um laptop em uma cafeteria](codificando-cafe.jpg)
![Gráfico de barras mostrando aumento de vendas de 2020 a 2024](grafico-vendas.png)

2. Mantenha Conciso

❌ Muito longo: 

![Esta é uma descrição muito longa de uma imagem que mostra uma pessoa sentada em um computador no que parece ser um ambiente de escritório moderno com paredes brancas e janelas grandes](escritorio.jpg)

✅ Conciso: 

![Pessoa trabalhando no computador em escritório moderno](escritorio.jpg)

3. Não Inclua "Imagem de" ou "Foto de"

❌ Redundante: 

![Imagem de um cachorro brincando no parque](cachorro.jpg)

✅ Direto: 

![Cachorro brincando no parque](cachorro.jpg)

Imagens de Referência

Como links, você pode usar sintaxe de referência para imagens: 

![Texto alternativo][referencia-imagem]  

[referencia-imagem]: imagem.jpg "Título opcional"

Exemplo

Aqui está nosso logotipo: ![Logotipo da Empresa][logo]

E aqui está uma captura de tela: ![Captura de Tela do App][screenshot]

[logo]: /images/logo.png "Logotipo da Minha Empresa"
[screenshot]: /images/app.png "Captura de Tela do Dashboard do App"

Caminhos e URLs de Imagens

Imagens Locais

![Imagem local](./images/foto.jpg)
![Caminho relativo](../assets/icone.png)
![Caminho absoluto](/public/images/banner.jpg)

Imagens Externas

![Imagem externa](https://exemplo.com/imagem.jpg)
![Foto do Unsplash](https://images.unsplash.com/photo-123/foto.jpg)

Padrões Comuns

Imagem com Legenda

![Reunião da equipe na sala de conferências](reuniao.jpg)
*Figura 1: Reunião semanal da equipe discutindo marcos do projeto*

Imagens Antes/Depois

## Antes
![Design antigo do site](design-antigo.png)

## Depois
![Novo design do site](design-novo.png)

Instruções Passo a Passo

1. Clique no ícone de configurações
   ![Ícone de configurações no canto superior direito](icone-config.png)

2. Selecione "Configurações da Conta"
   ![Opção do menu de configurações da conta](menu-conta.png)

3. Atualize suas informações de perfil
   ![Formulário de perfil com campos editáveis](form-perfil.png)

Galeria de Imagens

## Capturas de Tela do Projeto

![Página inicial](pagina-inicial.png) ![Dashboard](dashboard.png) ![Configurações](configuracoes.png)

Solução de Problemas de Imagens

Problemas Comuns

  1. Imagem não exibe: Verifique o caminho do arquivo e nome do arquivo

  2. Ícone de imagem quebrada: Verifique se a URL da imagem está acessível
  3. Imagem muito grande: Redimensione ou comprima a imagem
  4. Formato errado: Certifique-se de que o navegador suporte o formato da imagem

Testando Imagens

  • •
    Visualize em seu editor Markdown

  • •
    Verifique em diferentes navegadores
  • •
    Verifique em dispositivos móveis
  • •
    Teste com conexões lentas de internet

Técnicas Avançadas

Links de Imagem

Combine imagens com links: 

[![Clique para ver maior](miniatura.jpg)](tamanho-completo.jpg)

Imagens são uma maneira poderosa de aprimorar seus documentos Markdown. Use-as cuidadosamente para apoiar seu conteúdo e melhorar a experiência do usuário!

Precisa enfatizar texto em seu conteúdo? Aprenda sobre formatação com tachado a seguir.