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 cards CSS

Crie um card com seu título, texto e link opcional. Ajuste cores, borda, espaçamento, sombra e efeito ao passar o mouse. Depois copie ou baixe o HTML e o CSS.

Gerador de textura de ruído

Gere uma textura de ruído em SVG que se repete sem emendas, com opacidade, frequência do grão, tipo de ruído e cor de fundo ajustáveis, e copie o CSS já pronto.

Gerador de Configuração Webpack

Crie um webpack.config.js para webpack 5 a partir de um formulário curto: defina o entry, a pasta de saída e o modo, e ative TypeScript, Babel, um loader CSS, HtmlWebpackPlugin e um servidor de desenvolvimento.

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.

Desofuscador de JavaScript

Desofusque JavaScript minificado ou empacotado com renomeação de variáveis, decodificação de arrays de strings, reversão de achatamento de fluxo de controle e embelezamento.

Ferramenta disponível em outros idiomas