Comece combinando a linha de base e os arquivos alterados da mesma cena, layout, viewport ou fluxo de trabalho de exportação.
Guia do verificador de diferenças de imagem
Como usar um verificador de comparação de imagens
Revisão em nível de pixel para capturas de tela, exportações de compactação, edições de produtos e pequenas alterações visuais que precisam de métricas de diferença local.
Execute Diff destacado para detecção de área alterada e, em seguida, confirme o resultado no controle deslizante, Lado a lado ou visualização de sobreposição.
Use limite, pixels alterados, RMSE e PSNR como sinais de revisão. A decisão final ainda deriva do resultado visível.
Revisão de pixel para áreas alteradas exatas
Um verificador de diferenças de imagens localiza diferenças entre duas imagens relacionadas. Ele se adapta a verificações de captura de tela da IU, revisão de retoque de produto, revisão de exportação de compactação e pequenas alterações visuais que são fáceis de perder em um controle deslizante.
A ferramenta compara pixels decodificados pelo navegador em uma tela compartilhada. Um pixel conta como alterado quando o maior delta do canal vermelho, verde, azul ou alfa excede o limite selecionado.
Fluxo de trabalho
Sequência de revisão de diferenças
Carregue a imagem de linha de base primeiro
Use a captura de tela original anterior ou a exportação de referência como imagem de base. Uma linha de base clara facilita a detecção de alterações na contagem de pixels.
Carregue a imagem alterada em segundo lugar
Use a nova captura de tela, a foto editada, a imagem otimizada ou a variante exportada como a imagem alterada. Dimensões incompatíveis precisam de uma verificação de alinhamento antes da revisão métrica.
Executar diferença de destaque
Realçar diferenças marca áreas alteradas e preenche os cartões de métricas. As visualizações com controle deslizante, lado a lado e sobreposição verificam o resultado destacado no contexto visual.
Ajuste o limite deliberadamente
Limiares mais baixos detectam mudanças sutis. Limiares mais altos ignoram ruído de compressão, pequenas mudanças de iluminação e anti-aliasing. Atualize a diferença após alterar o limite.
Limite
Como escolher um limite de diferença
O limite define o corte de diferença de canal para pixels alterados. Não existe melhor valor universal; combine o valor com a tarefa de revisão.
8
Verificações rigorosas da IU
Experimente 8 para pequenas alterações na captura de tela que devem ser detectadas com clareza.
O rótulo do botão mudou de Salvar para Aplicar.
Um ícone mudou ligeiramente, uma borda fina desapareceu ou o espaçamento do texto foi alterado.
Este valor também pode capturar pequenos ruídos de renderização ao redor do texto e das bordas.
18
Detalhe fino da foto
Experimente 18 para edições de imagens que só ficam visíveis após uma análise mais detalhada.
A sombra do produto ficou mais suave, um retoque facial removeu uma pequena marca ou a textura do tecido mudou.
Uma foto parece quase igual, mas um realce, reflexo ou mancha de cor foi editado.
Bom para uma revisão detalhada.
32
Padrão equilibrado
Comece com 32 para a maioria das comparações.
Uma captura de tela da página de destino contém texto e fotos.
Uma imagem de produto foi exportada novamente ou uma visualização de outra ferramenta precisa de uma verificação rápida.
Ajuste para baixo para verificações mais rígidas e para cima para arquivos com mais ruído.
64
Principais mudanças visíveis
Tente 64 para se concentrar nas mudanças óbvias.
Um plano de fundo foi substituído, um objeto movido, um corte alterado ou uma forte mudança de cor apareceu.
Uma exportação JPEG ou WebP tem pouco ruído, mas a revisão só se preocupa com as mudanças que as pessoas percebem rapidamente.
Texto pequeno, ícones finos e bordas finas podem não se destacar mais.
Métricas
Como ler as métricas de diferença de imagem
Pixels alterados
O número de pixels de tela comparáveis acima do limite atual. O valor depende muito do limite e do alinhamento.
Porcentagem de pixels alterada
Pixels alterados divididos por todos os pixels comparáveis. Ajuda a comparar duas execuções com tamanhos de imagem ou áreas de corte diferentes.
Delta RGB médio
A diferença média absoluta do canal RGB. Grandes mudanças de cor ou brilho podem aparecer aqui mesmo com uma pequena porcentagem de área alterada.
RMSE
Erro RGB médio quadrático raiz. Diferenças locais maiores afetam mais fortemente o RMSE do que pequenas diferenças dispersas.
PSNR
Relação sinal-ruído de pico. PSNR mais alto geralmente significa que as imagens estão mais próximas no sinal RGB; PSNR mais baixo significa erro mais visível ou mensurável.
Armadilhas comuns
Resultados diferentes que precisam de uma segunda olhada
As imagens estão ligeiramente deslocadas
Um deslocamento de 1 px pode iluminar muitas áreas, mesmo que a imagem pareça quase idêntica. Abra Sobreposição e verifique se as bordas principais estão alinhadas.
Os tamanhos das imagens não correspondem
Larguras ou alturas diferentes tornam a comparação menos direta. Use as visualizações visuais para encontrar a mudança visível e, em seguida, corte ou exporte os tamanhos correspondentes para obter métricas mais limpas.
Ruído de compressão aparece
As exportações JPEG e WebP geralmente adicionam pequenas manchas em cores e bordas planas. Aumente o limite se a revisão for sobre edições visíveis.
Bordas do texto alteradas durante a renderização
Fontes, ícones e bordas vetoriais podem aparecer em pixels ligeiramente diferentes após uma alteração no navegador, na fonte ou na exportação. Use um limite baixo para controle de qualidade da captura de tela e confirme a área destacada a olho nu.
Casos de uso
Revise as tarefas deste guia
Revisão de regressão de captura de tela da IU
Comparação da qualidade da compressão de imagem
Revisão de retoque de foto do produto
Antes e depois das verificações de edição
Pequenas diferenças de layout ou exportação
Teste agora
Abra a ferramenta depois de ler o guia
Carregue uma imagem de linha de base e uma imagem alterada, execute Diff destacado e ajuste o limite até que as áreas destacadas correspondam à tarefa de revisão.
Perguntas frequentes
Use um verificador de diferença de imagem
Qual limite devo usar em um verificador de diferenças de imagem?
Comece com 32 para revisão geral. Use 8 para verificações rigorosas de capturas de tela do mesmo tamanho, 18 para detalhes finos da foto e 64 para alterações visíveis maiores.
O que cria muitos pixels alterados em imagens semelhantes?
Pequenas mudanças de alinhamento, anti-aliasing, ruído de compressão, diferenças de perfil de cores e pequenas alterações de iluminação podem contar como pixels alterados. Use a visualização de sobreposição e o ajuste de limite para entender o resultado.
O RMSE e o PSNR são melhores do que a porcentagem de pixels alterados?
Eles respondem a uma pergunta diferente. A porcentagem de pixels alterada mostra quanta área ultrapassou o limite, enquanto RMSE e PSNR resumem o erro RGB na tela comparável.
Os meus dados de imagem estão seguros?
Sim. A visualização da imagem e a comparação de pixels são executadas localmente no seu navegador. A comparação não requer upload de imagens para um servidor, portanto, os dados da imagem permanecem na sessão ativa do navegador.