A resposta curta
Solte as duas imagens na ferramenta abaixo de uma vez, ou uma depois da outra. A primeira é a referência. Use Deslizante para arrastar entre elas, Lado a lado para ver as duas inteiras e Diferença para ter um mapa de calor: as áreas iguais ficam em cinza claro, e os pixels alterados acendem do amarelo (pouca mudança) ao vermelho (muita mudança). Abaixo das imagens você vê a porcentagem de pixels alterados, o número deles, a maior diferença e o retângulo que contém todas as mudanças. Toque em Baixar diferença (PNG) para salvar o mapa.
Experimente aqui: Comparar imagens
Abrir a página completa da ferramentaQuando uma comparação de pixels ajuda
- Revisões de design: a nova exportação de um banner, ícone ou ilustração mudou alguma coisa além do ajuste pedido?
- QA visual e testes de regressão: compare um print de uma tela de aplicativo ou de uma página antes e depois de uma mudança no código e encontre botões fora do lugar, fontes trocadas ou elementos que sumiram.
- Edição de fotos: veja exatamente o que um retoque, uma correção de cor ou um filtro mudou.
- Compressão e ampliação: compare uma imagem comprimida ou ampliada com a original e avalie onde a qualidade se perdeu.
- Jogo dos sete erros: encontre pequenas mudanças entre duas versões de um documento digitalizado, um mapa ou uma imagem de passatempo.
Deslizante, lado a lado ou diferença
As três visualizações respondem a perguntas diferentes. O modo deslizante coloca a segunda imagem exatamente sobre a primeira; arrastar o controle revela uma ou a outra. O olho é muito bom em perceber o que muda enquanto você arrasta, então essa é a visualização mais intuitiva para cor, nitidez e retoques.
Lado a lado mostra as duas imagens inteiras, cada uma na sua proporção. É útil quando a impressão geral importa, por exemplo duas versões de layout, e também para imagens de formatos diferentes.
Diferença é a visualização objetiva. Ela compara cada pixel das duas imagens e não deixa passar a mudança de um único pixel que o olho não perceberia. A moldura tracejada em volta das mudanças ajuda a encontrá-las em um print grande, mesmo quando só alguns pixels em um canto são diferentes. Depois volte para o modo deslizante para avaliar se a mudança encontrada realmente importa.
| Pergunta | Melhor visualização |
|---|---|
| A nova versão ficou melhor? | Deslizante |
| Qual dos dois layouts funciona? | Lado a lado |
| Alguma coisa mudou, e onde exatamente? | Diferença |
| Quanto mudou, em números? | Diferença (estatísticas) |
Como ler os números
Pixels alterados é a parte da imagem cuja diferença fica acima do limite. Número de pixels mostra a mesma coisa em contagem exata. Maior diferença mostra a mudança mais forte em uma escala de 0 (idêntico) a 100 (preto contra branco). Área alterada é o menor retângulo que contém todos os pixels alterados, com o tamanho e a posição do canto superior esquerdo, em pixels da primeira imagem.
A diferença de um pixel é a maior mudança em qualquer um dos seus canais de cor ou na transparência. Isso quer dizer que um pixel que passou de cinza claro para azul claro conta como claramente alterado, mesmo que o brilho seja parecido, e que uma mudança só na transparência também conta.
Limite e ruído de compressão
Duas imagens que parecem idênticas ainda podem ter milhares de pixels diferentes. A compressão de JPG e WebP muda um pouco os valores dos pixels toda vez que o arquivo é salvo, e o mesmo acontece com redimensionamento, conversão de perfil de cor e prints feitos com escala de tela diferente. Para a maioria das comparações, essas mudanças invisíveis são ruído.
Limite define o tamanho da diferença que é ignorada, de 0 a 100. Em 0, qualquer mudança conta. Um valor de 5 a 15 esconde o ruído de compressão e mantém as mudanças reais, como elementos que mudaram de lugar, um texto novo ou outra cor. Se você comparar duas exportações de um PNG sem perdas feitas no mesmo programa de design, deixe em 0; se comparar dois JPGs, comece em 10.
Imagens de tamanhos diferentes
Uma comparação de pixels precisa das duas imagens na mesma grade. Se a segunda imagem tiver outro tamanho, a ferramenta a redimensiona para o tamanho da primeira e avisa abaixo dos resultados. Quando as proporções também são diferentes, a segunda imagem é esticada, e o aviso também diz isso. O redimensionamento cria pequenas diferenças nas bordas, então, para conferências exatas, compare imagens com dimensões idênticas, por exemplo prints feitos com a janela do mesmo tamanho e o mesmo zoom.
Inverter faz da segunda imagem a referência. As imagens nunca saem do seu dispositivo: as duas são abertas e comparadas no seu navegador, então você pode comparar designs confidenciais e telas ainda não lançadas sem enviar nada.