Diferença de um píxel
d = máx(|ΔR|, |ΔG|, |ΔB|, |ΔA|) > 32
O píxel conta como diferente quando a maior diferença de canal ultrapassa 32 em 255.
Comparador de imagens
Carregue duas imagens: compare-as com o cursor ou lado a lado, ou mostre a vermelho os píxeis alterados com a respetiva percentagem, localmente.
Imagem
Nenhuma imagem carregada
Arraste uma imagem para aqui
Adicione exatamente duas imagens para comparar. Pode selecioná-las em conjunto ou adicionar a segunda depois da primeira.
Precisas de mais opções?
Utiliza várias ferramentas de edição num único espaço, com o ficheiro aberto e as alterações em curso.
Abrir o editor completoA processar…0 %
Esta ferramenta foi útil?
Como funciona esta ferramenta?
Duas versões da mesma imagem parecem-se muitas vezes tanto que já não se vê o que mudou: uma maqueta corrigida, uma captura antes e depois de uma atualização, uma fotografia retocada ou recomprimida. Este comparador mostra-as com um cursor antes/depois, lado a lado, ou realça a vermelho os píxeis que diferem com a respetiva percentagem, sem enviar as imagens.
Adicione exatamente duas imagens PNG, JPEG ou WebP, selecionando-as em conjunto ou uma após a outra; a primeira passa a «Antes» e a segunda a «Depois». Antes / depois sobrepõe as duas imagens com uma separação vertical que pode arrastar, e Lado a lado coloca-as à esquerda e à direita. O zoom ajuda a examinar os pormenores.
Diferenças compara as duas imagens píxel a píxel. Um píxel é marcado a vermelho quando um dos seus canais (vermelho, verde, azul ou transparência) se afasta mais de 32 níveis em 255; os outros píxeis aparecem em cinzento-claro a partir da primeira imagem, para manter o contexto. O limiar evita assinalar o ruído de uma compressão JPEG.
O resultado indica a percentagem e o número de píxeis diferentes. Se as duas imagens não tiverem o mesmo tamanho, a segunda é ajustada ao tamanho da primeira antes do cálculo e uma mensagem indica-o. Clique outra vez em Diferenças ou noutra vista para voltar às imagens.
Como usar esta ferramenta
Adicione as duas imagens
Selecione o original e depois a versão alterada, em conjunto ou uma após a outra.
Escolha a vista
Antes / depois para o cursor, Lado a lado, ou Diferenças para realçar os píxeis alterados.
Examine as diferenças
Amplie as zonas assinaladas e leia a percentagem de píxeis diferentes.
Deteção das diferenças
Cada píxel da segunda imagem é comparado com o píxel na mesma posição da primeira.
Parte de píxeis diferentes
p = n_diff ÷ (W × H) × 100
Calculada ao tamanho da primeira imagem.
- ΔR, ΔG, ΔB, ΔA
- diferenças dos canais vermelho, verde, azul e alfa entre as duas imagens
- n_diff
- número de píxeis marcados a vermelho
- W, H
- largura e altura da primeira imagem
Casos de uso
Rever uma maqueta corrigida
Veja de imediato o que mudou entre duas versões de um ecrã ou de um design.
Verificar uma regressão visual
Compare uma captura antes e depois de uma atualização para encontrar o botão ou o texto alterado.
Avaliar um retoque ou uma compressão
Veja com o cursor se uma fotografia otimizada perdeu pormenor em relação ao original.
Exemplos
Botão alterado numa captura
200 × 50 = 10 000 píxeis alterados em 1280 × 720 = 921 600, ou seja 1,09 %. O resto do ecrã aparece em cinzento-claro.
Entrada
Duas capturas de 1280 × 720 px; só um botão de 200 × 50 px muda de corResultado
Vista Diferenças: o botão aparece a vermelho; «1,09 % dos píxeis diferem (10 000 de 921 600)»Duas imagens de tamanhos diferentes
A proporção 16:9 é a mesma, por isso nada fica deformado; ainda assim, os contornos podem surgir a vermelho por causa da suavização da ampliação.
Entrada
Original de 1920 × 1080 px e uma exportação de 1280 × 720 pxResultado
A segunda imagem é ajustada a 1920 × 1080 px antes da comparação, com uma mensagem que o indicaDicas e boas práticas
- Coloque sempre o original primeiro: a vista Diferenças usa o seu tamanho e os seus cinzentos como fundo.
- Para comparar duas exportações, mantenha as mesmas dimensões: uma mudança de escala cria diferenças em todos os contornos.
- Use o cursor Antes / depois para avaliar um retoque de cor e Diferenças para encontrar uma alteração localizada.
- Uma percentagem baixa numa fotografia recomprimida em JPEG é normal: a compressão altera ligeiramente milhares de píxeis.
Fontes e referências
- Canvas API (abre num novo separador), MDN Web DocsPágina em inglês
Perguntas frequentes
Quantas imagens posso comparar?
Exatamente duas. Se selecionar só uma, a ferramenta espera pela segunda; com mais de duas, pede para recomeçar.
Como são detetadas as diferenças?
Cada píxel é comparado com o que ocupa a mesma posição na outra imagem. É marcado a vermelho se o canal vermelho, verde, azul ou alfa diferir mais de 32 em 255.
As imagens têm de ter o mesmo tamanho?
Não, mas é preferível. A segunda é ajustada ao tamanho da primeira; se as proporções forem diferentes, fica deformada e muitos píxeis surgirão como diferentes.
Posso ajustar a sensibilidade?
Não nesta versão: o limiar está fixado em 32 níveis, o suficiente para ignorar o ruído de compressão e detetar uma mudança de cor ou de texto.
Posso transferir a imagem das diferenças?
Não, o comparador serve para examinar no ecrã. Faça uma captura da vista Diferenças se a precisar de partilhar.
As minhas imagens são enviadas para um servidor?
Não. A apresentação e o cálculo das diferenças acontecem no seu navegador.
Ferramentas relacionadas
Continue com estas ferramentas
Ferramentas semelhantes ou complementares a esta.
Ferramentas semelhantes
Recorte, redimensione, adicione texto ou marcas de água, aplique efeitos e otimize uma imagem num único editor.
Imagens e gráficosEm destaqueUtilizar esta ferramenta
Aligeire uma imagem ajustando a qualidade ou apontando para um peso em KB, com o peso final mostrado antes de transferir.
Imagens e gráficosEm destaqueUtilizar esta ferramenta
Converta uma imagem para PNG, JPEG ou WebP e ajuste a qualidade antes de descarregar.
Imagens e gráficosEm destaqueUtilizar esta ferramenta
Leia também
GuiaBoas práticasIntermédio
Imagens responsivas: compreender srcset e sizes
Compreenda como srcset e sizes permitem ao navegador escolher uma imagem adequada à largura de apresentação, densidade de píxeis e contexto responsive.
31 de agosto de 20263 min
GuiaBoas práticasIniciante
Metadados de imagem: ler, conservar ou remover
Compreenda que metadados podem estar incorporados numa imagem, para que servem e quando os conservar ou remover antes de partilhar.
31 de agosto de 20263 min
GuiaBoas práticasIniciante
Como otimizar 50 imagens para a Web de uma só vez
Redimensione um lote de imagens, converta-o para WebP e remova metadados com um único Pipeline.
6 de setembro de 20262 min
TutorialBoas práticasIniciante
Como comprimir uma imagem sem perder qualidade?
Reduza o tamanho de uma imagem escolhendo dimensões, formato e qualidade adequados sem introduzir degradação visual desnecessária.
31 de agosto de 20263 min