A comparação de screenshots é o processo algorítmico pelo qual uma ferramenta de teste visual determina se duas capturas da mesma página web são idênticas ou diferentes — e se são diferentes, em que medida e onde.
Por trás de cada ferramenta de teste visual há um ou mais algoritmos de comparação de imagens. Três métodos dominam o mercado. Cada um tem uma filosofia diferente, e entender essas diferenças vai te ajudar a escolher a ferramenta certa — ou a entender por que a sua ferramenta atual produz resultados frustrantes.
O Pixel Diff: contar os pontos
O pixel diff é a abordagem mais direta. O algoritmo pega duas imagens da mesma dimensão, percorre cada pixel e compara os valores de cor (vermelho, verde, azul, transparência). Se os valores diferem, o pixel é marcado como "diferente".
Imagine duas folhas de papel milimetrado idênticas, exceto que alguém pintou 3 quadrados em vermelho na segunda. O pixel diff encontraria exatamente esses 3 quadrados.
O algoritmo produz duas coisas: o número (ou porcentagem) de pixels diferentes, e uma imagem "diff" onde as zonas de diferença aparecem em vermelho.
É simples, rápido, determinístico. Mas é brutal. Uma leve mudança de anti-aliasing num texto — invisível a olho nu — pode marcar centenas de pixels como "diferentes". O teste falha à toa. Para entender os limites do pixel diff, consulte nosso artigo pixel por pixel vs comparação perceptual e nosso guia sobre redução de falsos positivos.
O pHash: a assinatura visual
O pHash (Perceptual Hash) adota uma abordagem radicalmente diferente. Em vez de comparar pixel por pixel, ele reduz cada imagem a uma "impressão" curta — tipicamente 64 bits — que captura a estrutura visual global.
Pense nisso como a melodia de uma música. Você consegue reconhecer "Asa Branca" mesmo se for tocada no piano, na guitarra ou cantada por alguém desafinado. A melodia é a mesma — os detalhes mudam. O pHash funciona da mesma forma com imagens.
O algoritmo reduz a imagem a um tamanho muito pequeno (por exemplo 32x32 pixels), converte em tons de cinza, aplica uma transformação matemática que extrai as baixas frequências (a estrutura global) e produz uma sequência de bits.
Duas imagens visualmente similares terão impressões próximas. A "distância" entre as impressões (número de bits diferentes, chamada distância de Hamming) mede a similaridade.
A vantagem: imune a microvariações (anti-aliasing, compressão leve, redimensionamento). O problema: pouco preciso para detalhes. Uma mudança de cor sutil ou um deslocamento de 5 pixels pode passar despercebido se a estrutura global permanecer similar.
O SSIM: o olho matemático
O SSIM (Structural Similarity Index Measure) é o método mais sofisticado dos três. Ele não compara pixels individualmente nem a imagem globalmente — compara zonas da imagem segundo três critérios perceptuais.
A luminância: as zonas têm o mesmo brilho? O contraste: as variações de luminosidade são similares? A estrutura: os padrões de pixels estão dispostos da mesma forma?
O algoritmo percorre a imagem com uma janela deslizante e calcula essas três medidas para cada zona. O resultado é uma pontuação entre 0 e 1 — quanto mais próximo de 1, mais as imagens são perceptualmente similares.
Uma pontuação SSIM de 0,99 significa "praticamente idêntico para um humano". Uma pontuação de 0,95 significa "diferenças visíveis mas menores". Abaixo de 0,90, as diferenças são óbvias.
A vantagem: é o método que mais se aproxima da percepção humana. Tolera variações de renderização sem mascarar mudanças reais. O problema: é mais lento que o pixel diff, e o limiar de tolerância precisa ser calibrado com cuidado.
O que cada método deixa passar
O pixel diff perde o contexto. Ele não sabe se um pixel diferente é importante ou não. Uma mudança de anti-aliasing e um botão que desaparece geram o mesmo tipo de alerta.
O pHash perde os detalhes. Sua força (a visão de conjunto) é também sua fraqueza. Mudanças sutis — uma fonte ligeiramente maior, um espaçamento alterado em 2px — passam sob o radar.
O SSIM é o melhor compromisso, mas precisa de calibração fina do limiar. Muito estrito, comporta-se como um pixel diff. Muito permissivo, deixa passar regressões.
A abordagem estrutural: além da imagem
Existe uma quarta abordagem que não compara imagens em absoluto. A análise estrutural compara as propriedades CSS computadas e o DOM diretamente. É o que faz o Delta-QA com seu algoritmo em 5 passes.
Em vez de perguntar "os pixels são idênticos?", ela pergunta "as propriedades CSS de cada elemento são idênticas?". O font-size mudou? A margem se moveu? A cor é diferente?
É mais preciso (zero falsos positivos relacionados à renderização) e mais informativo (sabemos exatamente o que mudou e em quanto). Mas também é mais complexo de implementar.
Como escolher entre os três métodos
Sua escolha depende menos da matemática e mais do contexto:
- Você precisa de simplicidade e velocidade? Pixel diff. Aceite os falsos positivos como custo da simplicidade.
- Você quer ignorar o ruído de renderização? pHash ou SSIM, dependendo da precisão necessária.
- Você quer um diagnóstico exato sem falsos positivos? Abordagem estrutural (Delta-QA).
- Você não tem certeza? Comece pelo SSIM com um limiar de 0,98. É o melhor compromisso default.
FAQ
Qual método é o mais rápido?
O pixel diff é o mais rápido. O pHash é ligeiramente mais lento por causa da transformação. O SSIM é o mais lento pois percorre a imagem com uma janela deslizante.
Qual método produz menos falsos positivos?
O SSIM em modo bem calibrado. O pHash também é bom para ignorar ruído mas pode perder detalhes. O pixel diff produz mais falsos positivos.
As ferramentas usam um só método?
Nem sempre. Algumas combinam pixel diff + SSIM. Outras adicionam uma camada de IA por cima. Delta-QA usa uma abordagem estrutural que não depende da comparação de imagens.
O pHash pode detectar uma mudança de cor?
Apenas se a mudança for significativa. Uma transição de azul escuro para azul ligeiramente mais claro provavelmente será ignorada. Uma transição de azul para vermelho será detectada.
Que limiar SSIM usar para teste visual?
Para teste de regressão estrito: 0,99. Para monitoramento com tolerância ao ruído: 0,95-0,97. Abaixo de 0,95, você corre o risco de perder regressões reais.
O pixel diff é totalmente obsoleto?
Não. Para casos onde a precisão visual absoluta importa (logos, ícones, design pixel-perfect), o pixel diff continua relevante. Para o restante, métodos perceptuais ou estruturais são geralmente mais apropriados.
O pixel diff te diz que algo mudou. O pHash te diz se é visualmente diferente como um todo. O SSIM te diz o quanto é diferente para o olho humano. A análise estrutural te diz exatamente o que mudou e por quê. Quatro abordagens, quatro níveis de resposta. A escolha certa depende da pergunta que você está fazendo.
Para aprofundar
- Delta-QA vs Diffy: Comparação Pixel a Pixel ou Análise Estrutural No-Code?
- Pixel por pixel vs comparação perceptual: como funciona a detecção visual
- Como Funciona a Comparação de Screenshots: O Guia Completo
- Comparador HTML Visual Online: Compare Duas Páginas Pixel a Pixel
- Delta-QA vs BackstopJS: No-Code Estrutural ou Open Source Pixel por Pixel?