🌓Comparador de Imagens Antes e Depois (Slider + Diferença)
Carregue a versão antes e a versão depois e arraste o divisor para revelar cada uma, usando o mouse, o dedo ou as setas do teclado. No modo diferença, a ferramenta mostra quanto os pixels divergem e o percentual de alteração. As imagens são lidas no seu navegador — nada sai do seu aparelho.
Arraste o divisor sobre a imagem ou use as setas do teclado. As duas imagens são lidas localmente e nada sai do navegador.
🔒 Cálculo 100% local — os dados que você digita não saem do seu navegador, nada é enviado a servidores.
Fonte: Processamento local — curadoria própria (Canvas API e leitura de ImageData) — tolerância de diferença fixada em 16 dos 255 níveis de cada canal; imagens de tamanhos diferentes não geram estatística · Última verificação em 07/10/2026
O comparador de imagens mostra antes e depois sobre um único canvas com divisor arrastável pelo mouse, pelo dedo ou pelo teclado, e ainda traz um modo de diferença pixel a pixel com o percentual de alteração. As imagens são lidas no próprio navegador, com processamento 100% local e nenhuma cópia enviada.
Como usar o comparador
- Carregue as duas imagensA primeira entrada é a versão antes, exibida à esquerda do divisor; a segunda é o depois, à direita. Enquanto você não envia arquivos, a prévia já funciona com duas imagens de exemplo geradas localmente.
- Arraste o divisorClique em qualquer ponto da prévia e arraste: a divisão segue o cursor. Com o canvas focado pelo Tab, as setas esquerda e direita movem o divisor em passos de 2%, e com Shift o passo é maior.
- Veja a diferençaNo modo diferença, imagens do mesmo tamanho mostram a visualização de variação e três linhas de resultado: pixels alterados, percentual e diferença média por canal. Tamanhos diferentes exibem um aviso vermelho.
Como funciona o slider e a diferença
O divisor é um recorte: primeiro a imagem A é desenhada no canvas inteiro, depois a imagem B é desenhada por cima, mas apenas na faixa à direita da linha. Para isso, o navegador aplica uma área de recorte antes de desenhar, e o valor da linha vem da posição do ponteiro convertida de coordenadas de tela para coordenadas do canvas. Como o canvas recebe foco de teclado, dá para operar o mesmo controle sem mouse.
No modo diferença, a ferramenta lê os dois arrays de pixels e compara cada posição. Para cada pixel, calcula a maior distância entre os canais vermelho, verde e azul: se essa distância ultrapassar 16 dos 255 níveis, o pixel é contado como alterado — a tolerância existe para ignorar ruído de compressão imperceptível. A visualização desenha a própria diferença em escala de cinza amplificada, de modo que regiões idênticas aparecem pretas e regiões alteradas aparecem claras. Por fim, divide-se o número de pixels alterados pelo total e multiplica por cem para obter o percentual.
Exemplo resolvido
Imagine duas capturas de 400 × 300 pixels, ou seja, 120.000 pixels no total. No modo diferença, a análise encontra 3.600 pixels acima da tolerância: 3.600 ÷ 120.000 × 100 = 3,00% de alteração, valor exibido na linha de percentual. A soma de todas as variações dividida por 120.000 × 3 canais dá a diferença média por canal — se o resultado for 4,7, as imagens se parecem muito, pois 4,7 sobre 255 é menos de 2% de variação média.
Na prática, um reencode de JPEG costuma ficar com média baixa e percentual alto, porque quase todo pixel muda um pouco; já um reenquadramento de 10 pixels mostra percentual baixo com áreas idênticas e algumas faixas claras na visualização. Se a segunda imagem tiver resolução diferente, 1000 × 800 contra 800 × 600, o modo diferença não calcula estatística: aparece o aviso de que as imagens têm tamanhos diferentes e a prévia passa a mostrar as duas lado a lado, reduzidas para caber na tela. Nesse caso, equalize as dimensões antes, com o redimensionador de imagem.
Suposições e limitações
- A estatística de diferença só existe para imagens exatamente do mesmo tamanho; dimensões diferentes exibem aviso em vez de número
- A tolerância é fixa em 16 dos 255 níveis por canal, pensada em ruído de compressão; não há controle para afinar
- Imagens maiores que 900 px no maior lado são reduzidas para a análise, então a contagem vale para a cópia reduzida
- O percentual conta pixels alterados, não a importância visual da alteração: um logotipo pequeno pode dar percentual baixo mesmo sendo relevante
- A leitura é local: as imagens nunca são enviadas a servidores nem armazenadas fora do navegador
- O PNG baixado corresponde ao que está na prévia naquele momento
Dicas para tirar o melhor proveito
Use o slider para avaliar enquadramento e nitidez, e o modo diferença para detectar alterações invisíveis ao olho, como marca d'água, pequenos deslocamentos ou recompressões. Quando for comparar versões de um mesmo arquivo, exporte as duas com idêntica resolução: só assim o percentual significa alguma coisa.
Para examinar uma área pequena, avance o divisor com as setas em passos de 2% até enquadrar o local de interesse e observe a linha sobre a região. Se a diferença aparecer clara demais na visualização, é sinal de mudança real; se aparecer esfumaçada e irregular, provavelmente é só compressão. Depois de conferir, baixe o PNG da comparação para documentar o resultado em um relatório. E, como as imagens são processadas no seu aparelho, dá para comparar material confidencial sem qualquer envio.
Erros comuns a evitar
O erro mais comum é comparar imagens de tamanhos diferentes esperando um percentual: a ferramenta avisa que não dá para contar, porque não existe correspondência pixel a pixel entre resoluções distintas. Redimensione primeiro as duas para a mesma medida. Outro é confundir diferença alta com problema — se você aplicou um filtro de cor de propósito, o número alto apenas confirma a mudança.
Também é frequente confiar no slider com as imagens fora de registro: se uma foi cortada alguns pixels para cima, a comparação mostra borda dupla em tudo e o percentual dispara. Nesse caso, alinhe antes os enquadramentos. Por fim, lembre de que a análise é feita numa cópia reduzida para imagens muito grandes: para variações minúsculas em arquivos enormes, recorte a região com o cortador de imagem e compare só esse pedaço.
Veja também
Se esta ferramenta foi útil, você também pode precisar destas relacionadas: Comparador de textos (diff), Editor de filtros de imagem, Criador de colagem de fotos, Divisor de imagem.
Ferramentas relacionadas
🔍Comparador de textos (diff)
Compare dois textos linha a linha e veja exatamente o que mudou.
Abrir ferramenta →🎛️Editor de filtros de imagem
Ajuste brilho, contraste, saturação e mais, com prévia em tempo real.
Abrir ferramenta →🖼️Criador de colagem de fotos
Monte uma colagem com 2 a 9 fotos em grades como 2×2 ou 3×3.
Abrir ferramenta →✂️Divisor de imagem
Corte uma imagem em grade para o feed do Instagram ou impressão.
Abrir ferramenta →Perguntas frequentes
Como faço para arrastar o divisor?
Clique sobre a prévia e arraste, no mouse ou no dedo. Também dá para focar a imagem com a tecla Tab e mover o divisor com as setas esquerda e direita, em passos de 2%.
O que significa o percentual de diferença?
É a proporção de pixels cuja variação em algum canal passou de 16 níveis sobre 255. Valores baixos indicam imagens muito parecidas; valores altos indicam mudanças amplas.
Por que não aparece percentual com tamanhos diferentes?
Porque não há como casar pixel a pixel quando as dimensões divergem. A ferramenta exibe o aviso e mostra as duas imagens lado a lado; reduza ambas para a mesma medida antes de medir.
Minhas imagens são enviadas para algum servidor?
Não. A leitura dos arquivos, o recorte do slider e o cálculo da diferença acontecem no seu navegador. As imagens não saem do aparelho, o que mantém o processo 100% local.
Consigo salvar a comparação?
Sim, pelo botão Baixar PNG da comparação: o arquivo baixado reproduz exatamente a prévia atual, seja no modo slider, seja no modo diferença.
Serve para comparar versões de um mesmo design?
Serve muito bem, desde que as duas exportações tenham as mesmas dimensões. É o jeito mais rápido de detectar alterações de cor, texto ou marca d'água quase imperceptíveis no olho.
Explore mais ferramentas gratuitas
Dezenas de calculadoras, conversores e geradores — todos funcionam no navegador, sem cadastro e sem instalar nada.