Comparação e diff de imagens
Compare duas imagens com um controle deslizante de antes/depois, lado a lado ou com um mapa de diferenças que destaca as mudanças em vermelho e informa a porcentagem.
Executa totalmente no seu navegador. Seus dados nunca são enviados.
Ferramentas Relacionadas
Ver TodasO que é Comparar imagens?
Carregue duas imagens e compare-as de três formas: um controle deslizante que revela uma sobre a outra, lado a lado ou um mapa de diferença em que os pixels alterados ficam vermelhos. A ferramenta conta os pixels diferentes e mostra a porcentagem de divergência, com uma tolerância ajustável por canal para ignorar pequenas diferenças de compressão.
Como usar Comparar imagens
- Solte ou escolha a Imagem A (referência) e a Imagem B (para comparar).
- Alterne entre Controle deslizante, Lado a lado e Diferença.
- Leia a porcentagem de divergência e a contagem de pixels.
- Aumente a Tolerância para ignorar pequenas diferenças, como o ruído do JPEG.
Exemplo
Two 40×20 images that differ only in the bottom-right quadrant (white vs black), tolerance 0
25% of pixels differ (200 of 800 pixels)
Quando usar Comparar imagens
Use-a para encontrar mudanças entre duas versões de um design, captura de tela ou renderização, verificar artefatos de compressão ou fazer um teste rápido de regressão visual. Ela compara pixels na mesma posição, então conteúdo deslocado ou girado conta como totalmente diferente; não é uma métrica perceptual ou estrutural de similaridade.
Como funciona Comparar imagens
As duas imagens são decodificadas em RGBA. Se os tamanhos forem diferentes, a imagem B é reamostrada para o tamanho da imagem A (e um aviso informa isso). Cada par de pixels é comparado: se a diferença absoluta de R, G, B ou alfa ultrapassar a tolerância, o pixel conta como divergente e é pintado de vermelho no mapa de diferenças; pixels iguais aparecem como uma escala de cinza esmaecida da imagem A. % de divergência = pixels divergentes ÷ total de pixels × 100.
Casos de Uso Comuns
- Conferir o que mudou entre duas capturas de tela de interface.
- Comparar uma foto original com sua versão comprimida.
- Verificar se um asset exportado de novo é idêntico.
- Mostrar edições de antes/depois com o controle deslizante.
Nota de Segurança
As imagens são decodificadas, processadas e codificadas localmente no seu navegador com a Canvas API. Nada é enviado a um servidor.
Perguntas Frequentes
O que acontece se as imagens tiverem tamanhos diferentes?
A imagem B é redimensionada para coincidir com a imagem A antes da comparação, e um aviso é exibido. Para resultados exatos, compare imagens com as mesmas dimensões.
O que a tolerância faz?
Um pixel só conta como diferente quando um dos seus canais difere mais que a tolerância (0–255). Use 5–20 para ignorar o ruído de compressão com perdas.
A transparência conta?
Sim. O canal alfa é comparado como os canais de cor.