O que é uma comparação de imagens?

Uma comparação de imagens compara duas versões de uma imagem pixel a pixel e marca todos os locais em que elas diferem. Desenvolvedores usam esse recurso para testes de regressão visual: uma captura de tela de uma página feita antes de uma alteração no código é comparada com outra feita depois dela, para que um deslocamento não intencional, um ícone ausente ou uma cor alterada se destaque, mesmo quando as duas capturas parecem iguais à primeira vista.

Descrição da ferramenta

Esta ferramenta compara duas imagens e gera uma imagem de diferenças: as diferenças aparecem em vermelho sobre uma cópia esmaecida da primeira imagem. Ela conta os pixels diferentes, agrupa as diferenças próximas em regiões e mede a área que elas ocupam. Bordas suavizadas de texto e formas são detectadas como anti-aliasing e ficam fora da contagem, para que uma captura feita com um renderizador de fontes ligeiramente diferente não seja identificada como uma alteração. Você também pode arrastar um controle deslizante sobre as duas imagens e aplicar zoom em ambas ao mesmo tempo.

Recursos

  • Comparar imagens PNG, JPEG, WebP, GIF, BMP e AVIF
  • Contar os pixels diferentes e exibi-los como uma proporção da imagem
  • Agrupar diferenças próximas em regiões e contornar cada região na imagem de diferenças
  • Ignorar pixels com anti-aliasing e marcá-los com uma cor separada, ou incluí-los na contagem, se preferir
  • Ajustar o limite de quão diferentes duas cores precisam ser para serem consideradas diferentes
  • Usar uma segunda cor opcional para os pixels que ficaram mais escuros, permitindo distinguir conteúdo adicionado de conteúdo removido
  • Usar o modo somente diferenças, que desenha as diferenças sobre um fundo transparente
  • Ampliar até 3200% com pixels nítidos e baixar as diferenças como uma imagem PNG
  • Usar a visualização com controle deslizante, que aplica zoom e desloca as duas imagens juntas, com modo de tela cheia
  • Comparar imagens de tamanhos diferentes alinhando-as pelo canto superior esquerdo ou redimensionando a segunda imagem

Como funciona

A comparação usa o pixelmatch, a biblioteca de código aberto por trás de muitas ferramentas de teste visual. Para cada pixel, ela mede a distância de cor no espaço de cores YIQ, que atribui mais peso ao brilho do que à tonalidade, assim como o olho humano. Um pixel é considerado diferente quando a distância ultrapassa o limite. Antes de contabilizar um pixel, o pixelmatch verifica os pixels vizinhos para determinar se ele faz parte de uma borda com anti-aliasing. A ferramenta lê os valores dos pixels armazenados nos arquivos e ignora os perfis de cores incorporados, portanto dois arquivos que sejam decodificados para os mesmos pixels sempre coincidem. Tudo é executado no seu navegador, e as imagens nunca são enviadas para um servidor.

Dicas

  • Mantenha o limite em 0,1 para capturas de tela. Reduza-o para 0 para detectar todas as alterações, incluindo ruído de compressão JPEG; aumente-o para ignorar pequenas mudanças de cor.
  • Uma foto salva duas vezes como JPEG difere em milhares de pixels por uma quantidade mínima. Se o resultado indicar que não há diferenças acima do limite, as imagens parecem iguais.
  • Ative Marcar pixels mais escuros para ver qual conteúdo foi adicionado e qual foi removido, pois o texto sobre um fundo claro fica mais escuro onde aparece.
  • Para arquivos GIF, somente o primeiro quadro é comparado.