Comparar Imagens Online — Diff, Slider Antes/Depois e Encontrar Diferenças
Solte duas imagens e compare visualmente em quatro modos: lado a lado, slider de revelação, mapa de diff pixel a pixel e overlay com opacidade ajustável. Tudo roda direto no browser — suas fotos nunca saem do seu dispositivo.
Seja para detectar regressões visuais em UI, revisar iterações de design ou comparar edições de foto, você tem a precisão que precisa sem fazer um único upload. O comparador de imagens também funciona como image diff tool e before after slider — os termos em inglês que devs e fotógrafos buscam com frequência.
Como Usar o Comparador de Imagens
- Faça o upload das duas imagens — arraste e solte ou clique nas zonas de upload. Imagem A é o "antes" / original; Imagem B é o "depois" / modificada. Suporta JPG, PNG, WebP, GIF, SVG, AVIF e qualquer formato que o browser renderize.
- Escolha o modo de comparação — Slider, Lado a Lado, Diff ou Overlay.
- Analise e exporte — no modo Diff, ajuste o threshold e a cor do highlight; no Overlay, arraste o slider de opacidade. Baixe o mapa de diff como PNG se precisar.
Os Quatro Modos Explicados
Slider Antes/Depois (Before/After Slider) exibe as duas imagens sobrepostas com um divisor arrastável. Arraste para a esquerda para revelar mais da imagem B; para a direita, mais da imagem A. Formato clássico para mostrar retoques fotográficos, redesigns e transformações.
Lado a Lado renderiza cada imagem em seu próprio canvas na mesma altura de exibição. Ideal para uma comparação geral rápida ou quando as imagens têm conteúdo muito diferente.
Diff (Mapa de Diferenças) compara pixel a pixel usando o algoritmo YIQ de distância de cor perceptual. Pixels que diferem acima do threshold são destacados em magenta (padrão). O painel de análise exibe porcentagem de similaridade, número de pixels diferentes e contagem total.
Overlay / Fade sobrepõe as duas imagens com opacidade ajustável. Arraste o slider de 0% (só imagem B) até 100% (só imagem A). Melhor para detectar deslocamentos de posição e diferenças estruturais.
O que é um Diff de Imagem?
Um image diff ou pixel diff compara imagens pixel por pixel usando distância de cor perceptual (YIQ NTSC), que reflete como o olho humano percebe diferenças. Pixels que diferem acima do limiar são marcados com a cor de destaque.
O parâmetro threshold controla a sensibilidade: valor próximo de 0 detecta até ruído de compressão JPEG; o padrão 0,10 ignora artefatos de antialiasing mas captura mudanças reais. Uma similaridade de 98% em uma imagem de 1000×1000 ainda representa 20.000 pixels diferentes — geralmente mais do que parece.
Casos de Uso Comuns
- Teste de regressão visual: Compare screenshots de UI antes e depois de um deploy. Mudanças sutis de padding, cor ou renderização de fonte são detectadas no nível do pixel.
- Revisão de retoque fotográfico: Use o slider para revelar as mudanças entre o rascunho e o export final, ou compare dois presets de processamento.
- Revisão de iterações de design: Carregue dois exports do Figma ou mockups e veja exatamente o que mudou.
- Verificação de autenticidade: Detecte clonagem ou manipulação comparando a imagem suspeita contra uma referência.
- Verificação de qualidade de compressão: Compare o PNG original com um export JPEG ou WebP para ver quais áreas foram degradadas pela compressão.
Perguntas Frequentes
Minhas imagens são enviadas para algum servidor?
Não. Ambas as imagens são carregadas diretamente no browser usando a File API. Todos os modos de comparação — incluindo a análise de diff de pixel — rodam inteiramente no lado do cliente usando a Canvas API. Suas imagens nunca são transmitidas para nenhum servidor.
O que é o parâmetro de threshold no modo diff?
Controla a sensibilidade da comparação. Um valor próximo de 0 detecta qualquer diferença, incluindo artefatos de compressão JPEG. O padrão 0,10 ignora ruídos sutis de antialiasing mas captura mudanças reais. Aumente para focar em diferenças maiores; reduza se precisar detectar qualquer variação de pixel.
O que significa a porcentagem de similaridade?
Representa a proporção de pixels considerados "correspondentes" dentro do threshold especificado. 100% significa imagens pixel-perfect idênticas. 95% significa que 5% dos pixels diferem — para uma imagem de 2000×1500 px, isso são 150.000 pixels diferentes, o que é significativo mesmo que a imagem pareça igual a olho nu.
E se as imagens tiverem dimensões diferentes?
Os modos Diff e Overlay funcionam melhor com imagens de mesmas dimensões. Se as dimensões divergirem, a ferramenta redimensiona a menor para igualar a maior antes da comparação. O modo Lado a Lado é a escolha mais precisa quando as imagens têm tamanhos muito diferentes.
Posso baixar o resultado do diff como imagem?
Sim. No modo Diff, após a análise, o botão "Download diff PNG" aparece. Ele exporta o mapa de diferenças como arquivo PNG que você pode compartilhar ou incluir em um relatório.
O que é teste de regressão visual?
É a prática de comparar screenshots de UI antes e depois de uma mudança de código para detectar alterações visuais não intencionais. Carregue o screenshot "antes" como Imagem A, o "depois" como Imagem B, e use o modo Diff para ver exatamente quais pixels mudaram.
Quais formatos de imagem são suportados?
JPEG, PNG, WebP, GIF, SVG, AVIF e qualquer outro formato que o browser consiga renderizar nativamente. Arraste e solte os arquivos ou use o botão de upload.
Recursos
- Mozilla MDN — Canvas API — Referência completa para a Canvas API do browser usada para manipulação de imagem no nível de pixel.
- pixelmatch — npm — A biblioteca open-source de comparação de pixels que alimenta o modo Diff; usa distância de cor perceptual e detecção de antialiasing.
