Sobre esta ferramenta
O Image Diff compara duas imagens pixel a pixel e destaca exatamente onde elas diferem, inteiramente no seu navegador. Solte uma captura de tela ou maquete de design "antes" como Imagem A e uma versão "depois" — uma nova captura, uma versão implementada do mesmo design, ou uma cópia reexportada — como Imagem B. Se as duas imagens não tiverem o mesmo tamanho, ambas são colocadas numa tela dimensionada para caber na maior; qualquer área coberta por apenas uma imagem conta como diferença, já que uma mudança de tamanho é, por si só, algo que você gostaria de detectar. O resultado é uma imagem de diferenças: a Imagem A renderizada novamente com cada pixel alterado pintado em magenta vibrante, além de uma contagem e porcentagem de quantos pixels diferem.
Este é um fluxo de trabalho genuinamente voltado para desenvolvedores: detectar regressões visuais comparando duas capturas de tela feitas antes e depois de uma mudança de CSS ou componente, verificar uma UI implementada contra sua maquete de design original pixel a pixel, ou identificar o leve blocado e as faixas que uma segunda rodada de compressão JPEG/WebP adiciona a uma imagem já exportada uma vez. O limite de sensibilidade controla o quão grande uma mudança de cor precisa ser para que um pixel conte como diferente — valores mais baixos (mais perto de 0) sinalizam quase qualquer mudança, incluindo ruído de compressão de 1–2 bits, enquanto valores mais altos sinalizam apenas diferenças claramente visíveis, que costuma ser o que você quer ao comparar duas exportações da mesma imagem de origem. Nada é enviado: ambas as imagens são decodificadas e comparadas com a API Canvas diretamente no seu dispositivo, e a imagem de diferenças que você baixa é gerada da mesma forma.
Perguntas frequentes
O que acontece se as duas imagens forem de tamanhos diferentes?
Ambas as imagens são colocadas em uma tela comum dimensionada para caber a maior das duas, e qualquer área coberta apenas por uma das imagens (porque a outra é menor) conta como uma diferença — isso mostra corretamente incompatibilidades de tamanho como parte da comparação, em vez de esticar silenciosamente uma imagem para corresponder à outra (o que distorceria a comparação e esconderia o fato de que elas têm tamanhos diferentes em primeiro lugar).
Qual limite de sensibilidade devo usar?
Um limite baixo capta até diferenças minúsculas e sutis (útil para detectar artefatos de compressão ou mudanças de renderização muito menores), enquanto um limite mais alto só marca pixels obviamente diferentes (útil para detectar mudanças visuais significativas como elementos movidos ou conteúdo diferente, ignorando o ruído menor de anti-aliasing/compressão entre duas imagens de outra forma idênticas). Comece por volta do meio do intervalo e ajuste com base em se você está vendo muito ruído (aumente) ou perdendo diferenças reais (diminua).