Softonic

Gerador de Imagem Markdown

Etapa 1 / 3
Próximo

A sintaxe de imagem do Markdown, ![alt](src "title"), é fácil de errar: escapa um colchete, esquece o texto alternativo ou a confunde com a sintaxe de link e seu documento acaba mostrando um marcador quebrado. Este gerador recebe a URL da imagem, o texto alternativo, um título opcional e um destino de link opcional e produz tanto o Markdown inline quanto o de estilo de referência, para você colar aquele que se encaixa no seu documento.

Como gerar a sintaxe de imagem do Markdown

  1. 1

    Cole a URL da imagem

    URL absoluta (https://...) ou caminho relativo (/images/hero.png).

  2. 2

    Escreva o texto alternativo

    O que a imagem mostra, em uma frase. Essencial para a acessibilidade.

  3. 3

    Adicione um título (opcional)

    Exibido ao passar o mouse na maioria dos renderizadores.

  4. 4

    Envolva em um link (opcional)

    Informe uma URL para tornar a imagem clicável.

  5. 5

    Copie o trecho

    Obtenha a saída inline `![alt](src)` ou o estilo de referência `![alt][ref]`.

As quatro variantes de sintaxe

Inline, sem título:

![Imagem principal do produto](/images/hero.png)

Inline, com título:

![Imagem principal](/images/hero.png "Imagem principal tirada em outubro de 2026")

Imagem clicável (imagem envolvida em um link):

[![Imagem principal](/images/hero.png)](https://example.com/buy)

Estilo de referência (mantém URLs longas fora do parágrafo):

![Imagem principal][hero]

[hero]: /images/hero.png "Imagem principal tirada em outubro de 2026"

O texto alternativo importa

  • Acessibilidade. Os leitores de tela anunciam o texto alternativo; um alt vazio deixa a imagem praticamente invisível para uma pessoa com deficiência visual.
  • SEO. Os mecanismos de busca usam o texto alternativo para entender o conteúdo da imagem. A falta de alt prejudica o tráfego vindo da busca de imagens.
  • Degradação elegante. Se a imagem não carrega, o texto alternativo é o que os usuários veem.

Texto alternativo bom e ruim

Intenção Bom texto alternativo Texto alternativo ruim
Foto de produto “Caneca de cerâmica vermelha sobre uma mesa de madeira, alça à esquerda” “Imagem de uma caneca”
Captura de tela “Página de login com e-mail, senha e botões de SSO” “screenshot.png”
Decorativo "" (alt vazio para pura decoração) “imagem decorativa”
Infográfico “Gráfico de barras: a receita cresceu de R$ 1 milhão em 2023 para R$ 3 milhões em 2026” “gráfico de barras”

Armadilhas

  • Não comece o alt com “Imagem de”, os leitores de tela já o anunciam como uma imagem.
  • Caminhos absolutos x relativos. Caminhos relativos quebram quando o documento é renderizado fora da sua pasta (por exemplo, na pré-visualização do GitHub). Na dúvida, use caminhos absolutos.
  • Espaços nas URLs exigem codificação: %20 no lugar de um espaço, ou a imagem não carrega.

Perguntas frequentes

Não em Markdown puro. A maioria dos renderizadores (GFM, Docusaurus, MkDocs) recorre ao HTML bruto para o dimensionamento, <img src="..." width="400" alt="...">. Alguns dialetos aceitam ![alt](url =400x), mas não é universal.

O alt é o texto anunciado aos leitores de tela e exibido se a imagem falhar. O título é a dica que aparece ao passar o mouse: geralmente opcional e ignorado em dispositivos de toque.

Quando a imagem aparece várias vezes ou quando a URL é longa e sobrecarrega o parágrafo. O estilo de referência mantém o texto legível e reduz a troca de URL a uma única edição.

Sim, aninhar uma imagem dentro de um link ([![alt](img)](url)) é CommonMark padrão. A saída renderizada é um hyperlink que envolve um <img>.

Ferramentas relacionadas

Gerador de Cartão CSS

Crie o CSS de um contêiner de cartão: fundo, borda, raio dos cantos, espaçamento interno e sombra suave, com pré-visualização imediata e código para copiar e colar.

Conversor de Tamanho de Arquivo

Converta entre bytes, KB, MB, GB, TB e as unidades binárias IEC (KiB, MiB, GiB, TiB), combinando decimal e binário como preferir.

Gerador de Docker Compose

Gere um docker-compose.yml a partir de definições de serviços com imagem, portas e volumes, com padrões de boas práticas.

Conversor de base numérica

Converta números entre binário, octal, decimal, hexadecimal e qualquer base personalizada de 2 a 36, com o detalhamento posicional.

Gerador de README

Gere um README.md estruturado a partir de alguns campos: nome do projeto, tagline, recursos, comando de instalação, trecho de início rápido, autor e licença. Cole direto no seu repositório.

Visualizador de Markdown

Escreva Markdown e veja a renderização HTML atualizar ao vivo. Sintaxe com estilo GitHub, incluindo tabelas, listas de tarefas, blocos de código cercados e autolinks.

Ferramenta disponível em outros idiomas