Carregando...
Carregando...
Solte duas imagens e destaque cada pixel alterado. Ajuste o limite para ignorar ruídos de compressão menores, veja a porcentagem exata de mudança e exporte a diferença como PNG.
Escolha duas imagens para começar a compará-las pixel a pixel.
Um visualizador de diferença de pixels compara duas imagens no nível de pixel e destaca cada posição onde os valores de cor diferem. É o equivalente visual de uma diferença de código: você vê exatamente o que mudou entre duas capturas de tela, duas exportações de design ou duas instantâneas de um teste de regressão. Esta ferramenta funciona inteiramente no seu navegador usando a API HTML Canvas. Ela escaneia cada pixel na imagem A em comparação com o pixel correspondente na imagem B, soma as diferenças absolutas dos canais e pinta qualquer pixel acima do seu limite na cor de destaque que você escolher. Você também obtém uma porcentagem de mudança para que possa quantificar o quanto as duas imagens realmente diferem.
Arraste ou escolha a imagem A (a base) e a imagem B (a versão que você deseja comparar). Dimensões iguais são recomendadas; tamanhos diferentes são redimensionados automaticamente para a imagem A.
Destacar mudanças é o padrão — cada pixel alterado é pintado na sua cor de destaque. Lado a lado renderiza A, B e a diferença em uma faixa; Sobreposição empilha B a 50% de opacidade sobre A.
Arraste o controle deslizante do limite para cima para ignorar ruídos de compressão menores e pequenos artefatos JPEG. 5% é um bom ponto de partida para fotos comprimidas; 0% captura cada diferença de pixel.
A porcentagem de mudança informa qual fração de pixels excede o limite — útil para revisão de regressão ou QA de design.
Clique em Baixar para salvar a diferença renderizada em resolução total. Útil para anexos de revisão de código e relatórios de bugs.
Para cada posição de pixel p, com canais (r, g, b) das imagens A e B: diff(p) = |Ar - Br| + |Ag - Bg| + |Ab - Bb| Um pixel é tratado como diferente quando: diff(p) > (limite% × 765) / 100 onde 765 = 3 × 255 é a diferença máxima da soma dos canais. Isso é o mesmo métrico de distância L1 usado por ferramentas de diferença de imagem como pixelmatch e resemble.js, apenas expresso como um único limite ajustável em vez de tolerâncias por canal.
A distância L1 (Manhattan) sobre os canais RGB é a métrica mais simples que captura tanto mudanças de cor quanto mudanças de brilho. O alfa é ignorado porque a maioria dos casos de uso de diferença (capturas de tela, regressões de fotos) opera em imagens opacas. Para imagens com dimensões diferentes, a imagem B é redimensionada para a imagem A usando filtragem bilinear de alta qualidade antes que a comparação seja realizada.
Referência: pixelmatch — comparação de imagem em nível de pixel
| Entradas | Resultado da diferença |
|---|---|
Duas PNGs idênticas 1920×1080 | 0% de mudança — a diferença está totalmente escurecida Nenhum pixel excede o limite; teste de regressão ideal. |
Dois JPEGs da mesma cena com qualidade de 85% | ~1–2% com limite = 0 Ruído de compressão cria pequenas diferenças por pixel; aumente o limite para 5% para ignorar. |
Exportação de design A vs B (cor do botão alterada) | Mudança restrita ao retângulo do botão A cor de destaque torna a região modificada instantaneamente visível. |
Recorte o assunto de qualquer foto com IA no dispositivo — sem necessidade de upload.
Reduza arquivos JPG, PNG ou WebP no seu navegador com um controle deslizante de qualidade interativo.
Ajuste, filtre, gire e corte fotos no navegador — sem uploads, sem marca d'água.
Componha memes e colagens de capturas de tela com camadas reais — cole, arraste, corte, legendas, exporte.
Última atualização