Duas imagens lado a lado em Markdown: composição e exportação
Coloca duas imagens reais numa tabela Markdown, percebe os limites das colunas iguais e usa uma disposição vertical quando faltar espaço.
Uma comparação de antes e depois precisa de duas imagens fáceis de identificar, sem obrigar o leitor a adivinhar qual é qual. Abre o conversor Markdown para criar uma única imagem pronta a partilhar. Começa por fontes equivalentes e rótulos claros: o Markdown, por si só, não tem uma instrução portátil que garanta exatamente metade da largura para cada imagem.
O exemplo usa dois ficheiros reais de demonstração: uma lista em rascunho e a respetiva versão revista. Ambos têm a mesma largura de origem. Uma tabela GFM com duas colunas mantém os rótulos sobre as imagens correspondentes e centra as duas células.
# Before and after review
| Before | After |
|:--:|:--:|
|  |  |
Both images use the same source width.
Este é o resultado apresentado pelo renderizador, não uma capa promocional. Usa-o numa nota de revisão em que seja necessário comparar os dois estados em conjunto. Os rótulos e as descrições identificam as funções sem depender apenas da cor.
As tabelas são uma extensão GFM. A linha de alinhamento define a posição do conteúdo nas células, mas não garante colunas de largura igual. Dimensões das imagens, conteúdo e estilos do renderizador continuam a afetar a composição. Confirma a pré-visualização no ambiente previsto antes de exportar.
Recorta regiões comparáveis e mantém proporções consistentes. Se uma captura tiver uma margem vazia grande e a outra estiver muito recortada, colunas iguais não tornam os elementos visualmente iguais. Preserva os detalhes necessários para uma comparação justa, em vez de os cortares apenas por simetria.
Usa endereços acessíveis e confirma que ambas as imagens foram carregadas antes de exportar. Um endereço de painel que exige autenticação pode funcionar no teu navegador sem estar disponível para o renderizador. Partilha apenas imagens autorizadas e remove primeiro os dados privados das fontes.
Um PNG com duas imagens é uma composição fixa. Numa coluna estreita, ambas encolhem em conjunto; não passam automaticamente para uma disposição vertical. Verifica a menor posição em que o vais apresentar. Se alguma lista ficar ilegível, publica uma versão vertical ou liga aos originais, em vez de reduzir ainda mais o texto.
Esta alternativa Markdown coloca os mesmos ficheiros um por baixo do outro:
## Before
## After
Uma tabela Markdown numa página pode ajustar-se ou transbordar consoante o renderizador. Não assumas que se comporta como uma galeria adaptável. Se o sistema permitir HTML e CSS, podes ter mais controlo, mas o suporte e a filtragem dependem desse sistema. Mantém uma alternativa em Markdown simples.
Deixa espaço para ambos os rótulos e verifica se o ficheiro descarregado não corta as margens inferiores. Explica a diferença relevante no texto próximo e disponibiliza ligações para os originais quando for preciso ver pormenores. A comparação é um apoio visual e não substitui a explicação.
Cria a tua comparação de duas imagens. Continua com as boas práticas para imagens em Markdown ou com o guia de tabelas Markdown legíveis.