Blog

Como fazer uma imagem de comparação antes e depois

Publicado em 25 de outubro de 2026 · antes e depois, comparação, unir imagens, fluxo de trabalho

Uma imagem vale mais que dois anexos: capture os dois estados no mesmo tamanho, una lado a lado, rotule e envie uma comparação fácil de ler.

Capturas de antes e depois são o jeito mais rápido de mostrar uma mudança, mas dois anexos soltos obrigam quem lê a alternar entre eles e lembrar do que viu. Uma única imagem lado a lado elimina esse trabalho.

Capture os dois estados do mesmo jeito

A comparação só é justa se as duas imagens forem comparáveis:

• Mesma viewport e mesmo zoom. Um antes a 100% e um depois a 80% fazem espaçamento e tamanho de fonte mentirem.
• Mesmo corte. Capture a mesma região, não um recorte mais justo da parte que mudou.
• Mesmo tamanho de janela e mesmo tema. Um depois em modo escuro ao lado de um antes em modo claro compara duas mudanças de uma vez.
• Mesmo estado. Se a página tem efeitos de hover ou de foco, mantenha o ponteiro fora das duas capturas.

Para layouts responsivos, faça um par por breakpoint em vez de misturar larguras.

Corte na mesma proporção

Abra a primeira captura no editor de imagens do InSnap e corte-a na região que você quer comparar. Aplique o mesmo corte à segunda imagem, usando o rótulo de tamanho para manter os pixels iguais. Se os layouts tiverem alturas diferentes, corte na mais curta em vez de preencher com espaço vazio.

Junte as duas lado a lado

O painel Unir do editor de imagens coloca várias imagens em uma mesma tela (Pro):

1. Escolha Unir na coluna da esquerda.
2. Importe a imagem de antes e depois a de depois.
3. Arraste-as para a ordem certa e alinhe os topos.
4. Deixe um vão consistente entre elas; alguns pixels de espaço fazem o par parecer intencional.
5. Clique em Mesclar quando a disposição estiver certa e depois adicione os rótulos.

Se as duas imagens tiverem tamanhos diferentes, redimensione a maior para igualar, ou corte as duas na mesma proporção antes de unir. Uma diferença de escala é o motivo mais comum para uma comparação parecer "errada".

Rotule os lados, não cada detalhe

Use Texto para adicionar "Antes" e "Depois" — ou "Atual" e "Proposto" — no mesmo canto de cada lado. Mantenha os rótulos curtos e com o mesmo estilo.

Depois, anote só as diferenças que importam:

• Números se houver várias mudanças: 1 para o espaçamento, 2 para o botão novo.
• Formas para contornar a região alterada.
• Setas só quando a direção não for óbvia.
• Mosaico para ocultar nomes, e-mails e URLs internas em qualquer uma das imagens.

Não anote o mesmo detalhe nos dois lados; marque uma vez, no lado onde ele mudou.

Exporte para o destino

• Chat ou e-mail: um único PNG é o mais fácil de ler e sobrevive à maioria dos clientes.
• Slides: use a proporção da apresentação e um fundo se as imagens forem escuras.
• Documentação: uma largura consistente para todas as imagens de comparação do conjunto.

Se o arquivo estiver grande, reduza a captura Retina para 1x ao salvar; uma comparação normalmente não precisa da densidade total de pixels.

Uma lista de verificação da comparação

Perguntas frequentes

Preciso do Pro para unir duas capturas de tela?

Sim, unir imagens é um recurso Pro. Uma alternativa gratuita é fixar as duas capturas lado a lado na tela para a sua própria comparação, mas a imagem única exportada exige o painel Unir do editor.

E se as duas capturas tiverem tamanhos diferentes?

Corte as duas na mesma proporção, ou redimensione a maior para igualar a menor antes de unir. Manter a escala idêntica importa mais do que preservar cada pixel.

Posso comparar três versões?

Sim. Una-as em ordem — por exemplo, antigo, atual e proposto — com o mesmo vão e o mesmo estilo de rótulo. Se as diferenças forem sutis, um par de duas imagens por mudança é mais fácil de ler do que uma faixa larga.

Mais do blog