Escolha as duas imagens, a tela de comparação e o limite de pixels. O resultado descreve as imagens como elas ficam nessa tela, que pode ser redimensionada, e não uma comparação byte a byte dos arquivos.
Funciona localmente no seu navegadorO comparador desenha as duas imagens em uma mesma tela, percorre cada pixel e pinta em um mapa de diferenças os que se afastam mais que o limite. A comparação acontece na memória do Canvas dentro da página: nenhuma imagem é enviada, e a página continua funcionando sem conexão.
A tela não é o arquivo. As duas imagens são esticadas para um tamanho comum antes do primeiro pixel comparado, então o resultado descreve como elas ficam nesse tamanho — não se os bytes são idênticos.
Vermelho, verde, azul e alfa são comparados separadamente em cada pixel, e a maior das quatro diferenças decide. Esse valor precisa superar o limite de forma estrita: no padrão 24, um único pixel com +10 no canal vermelho é ignorado e a execução informa 0 pixels alterados; o mesmo par com limite 5 informa 1 pixel alterado de 64 (1,56%).
O alfa faz parte da comparação, não só a cor. Dois quadrados de 4 × 4 da mesma cor com um nível de diferença na transparência deram 16 de 16 pixels alterados com limite 0.
A diferença média é a média das quatro diferenças de canal em toda a tela, por isso fica pequena quando a área alterada é pequena: um único pixel com um nível de diferença em uma tela de 64 pixels é arredondado para 0,00 / 255 mesmo com Pixels alterados marcando 1.
Igualar à primeira compara com a largura e a altura da primeira imagem, Igualar à segunda com as da segunda, e Maiores dimensões com a maior largura e a maior altura. As duas imagens são esticadas para essa tela: um par de 4 × 8 e 8 × 4 foi comparado como 8 × 8 em Maiores dimensões.
A tela é limitada a 4096 pixels no lado mais longo e a 16.000.000 de pixels no total; um par de 5000 × 100 foi comparado como 4096 × 82. A métrica Dimensões informa sempre a tela realmente comparada, não o tamanho dos dois arquivos.
No mapa de diferenças os pixels alterados aparecem em rosa sólido sobre uma cópia esmaecida em tons de cinza da primeira imagem; por isso a prévia continua parecendo a imagem que você está comparando.
Nada. As duas imagens são decodificadas pelo carregador do próprio navegador e comparadas na memória do Canvas, e o PNG de diferenças é gerado pela própria tela antes de chegar à janela de download. Uma execução que monitorou a rede não viu nenhuma requisição ao adicionar, comparar, baixar ou limpar.
Os números descrevem uma única tela: mudar o limite, a tela ou a ordem dos arquivos muda o resultado, e cada nova execução substitui a anterior. Limpar zera a lista, as quatro métricas e as três prévias, e retira o PNG pronto do botão de download.