Imagem & Foto

Comparador de Imagens

Insira duas imagens e revele a diferença com um divisor arrastável, coloque-as lado a lado ou desfaça uma sobre a outra — útil para revisões de design, passes de retoque e fotografia antes/depois.

Before

Drop or click to upload

After

Drop or click to upload

Both images stay on this device. Nothing is uploaded — comparison runs entirely in your browser.

O que é um comparador de imagens?

Um comparador de imagens permite que você coloque duas imagens uma sobre a outra e revele uma ou outra arrastando um divisor pela moldura. É a ferramenta padrão para qualquer visual 'antes vs. depois': passes de retoque fotográfico, redesigns de uma interface, duas renderizações da mesma cena, duas gradações de cor do mesmo disparo, build A vs. build B de um modelo 3D. O modo lado a lado mostra ambas ao mesmo tempo para comparações de proporção. O modo de sobreposição de desvanecimento faz a transição entre as duas com um deslizante de opacidade, que é útil para detectar pequenas mudanças de alinhamento ou diferenças de tom que um divisor rígido esconderia. Tudo acontece localmente — ambas as imagens permanecem no seu dispositivo, a comparação é renderizada no navegador e nada é enviado.

Como comparar duas imagens

1
Faça upload da sua imagem antes
Arraste um arquivo JPG, PNG, WebP, GIF, BMP ou AVIF para o slot Antes, ou clique para escolher do seu dispositivo. A imagem é renderizada no painel e a área de trabalho aparece abaixo.
2
Faça upload da sua imagem depois
Arraste a segunda imagem para o slot Depois. Para melhores resultados, ambas as imagens devem ter as mesmas dimensões — o contêiner de comparação se ajusta à proporção da primeira imagem que você carrega.
3
Escolha um modo de comparação
O modo Deslizante coloca as duas imagens uma sobre a outra com um divisor arrastável. Lado a lado as coloca em duas colunas. A sobreposição de desvanecimento faz a transição entre elas com um deslizante de opacidade — útil para detectar desvios de alinhamento.
4
Arraste o divisor ou deslizante
No modo deslizante, arraste em qualquer lugar na área de comparação para mover o divisor. Mude o divisor para vertical se suas imagens forem comparadas de cima para baixo em vez de da esquerda para a direita. No modo de desvanecimento, arraste o deslizante de opacidade Depois.
5
Trocar, redefinir ou carregar novos arquivos
Use Trocar para inverter A e B sem re-enviar. Redefinir limpa ambas as imagens e retorna a área de trabalho aos padrões. Carregue novos arquivos a qualquer momento arrastando-os para o slot — não é necessário redefinir primeiro.

Como funciona o clipe do deslizante

1. Ambas as imagens são renderizadas com object-fit: contain dentro de um contêiner com proporção bloqueada.
2. A imagem Depois fica em uma sobreposição posicionada absolutamente.
3. Um clip-path CSS: inset(0 [100 - posição]% 0 0) revela apenas o lado esquerdo da sobreposição.
4. O modo vertical troca o eixo inset: clip-path: inset(0 0 [100 - posição]% 0).
5. Eventos de ponteiro atualizam a posição a partir do deslocamento do cursor dentro do retângulo delimitador do contêiner.
6. O modo de desvanecimento ignora o clip-path e apenas anima a opacidade de 0 a 1 na imagem Depois.

Usar clip-path mantém ambas as imagens com qualidade total sem re-encodificação de canvas — o que você vê é o arquivo fonte pixel por pixel, apenas mascarado. O manuseio de arraste captura pointermove na janela, então o divisor continua rastreando mesmo se o cursor sair da área de comparação durante o arraste. O bloqueio da proporção significa que o contêiner escala com a largura da página sem distorcer as imagens, e object-fit: contain lida graciosamente com o caso em que as duas imagens têm dimensões ligeiramente diferentes.

Referência: MDN — clip-path

Comparações comuns antes/depois

Caso de uso	Melhor modo
Passagem de retoque fotográfico (pele, substituição de céu, gradação de cor)	Slider — arraste o divisor pela moldura para identificar exatamente onde as edições estão. Mantenha ambos os arquivos nas mesmas dimensões para que a linha do divisor permaneça significativa.
Redesign de site — capturas de tela do layout antigo vs. novo	Slider para seções principais, lado a lado quando a rolagem importa. Tire ambas as capturas de tela na mesma largura de viewport ou a comparação não será justa.
Duas renderizações da mesma cena 3D com iluminação diferente	Sobreposição de desvanecimento — transite entre elas para identificar sutis mudanças de GI ou sombra. O modo de desvanecimento também é ótimo para identificar onde um denoiser alterou detalhes.
Captura de tela de relatório de bug vs. saída esperada	Lado a lado — engenheiros podem ver ambos ao mesmo tempo sem precisar arrastar. Adicione o slider por cima no tópico do problema para o momento de 'revelação'.
Mapa ou gráfico com dois estados de dados (março vs. abril)	Slider — deslize pelo gráfico para ver quais regiões mudaram. O divisor vertical funciona bem para mapas geográficos que comparam norte vs. sul.

Quando usar um slider de comparação

Revisões de retoque fotográfico — mostre aos clientes exatamente o que mudou em um único arraste.
Revisões de design — compare o layout antigo vs. novo de uma seção principal sem duas abas do navegador.
Iteração de renderização 3D — desfaça entre duas configurações de iluminação para identificar sutis mudanças de iluminação global.
Gradação de cor — deslize o divisor pela moldura para avaliar um LUT ou passagem de gradação.
Relatórios de bugs — emparelhe a captura de tela quebrada com a esperada para que os triadores não precisem rolar.
Antes/depois de imóveis — encenação vs. não encenado ou fotos pré-renovação vs. pós-renovação.
Visualização de dados — compare duas instantâneas do mesmo mapa ou gráfico tiradas em diferentes momentos.

Ferramentas relacionadas

Removedor de Fundo

Recorte o assunto de qualquer foto com IA no dispositivo — sem necessidade de upload.

Compressor de Imagem

Reduza arquivos JPG, PNG ou WebP no seu navegador com um controle deslizante de qualidade interativo.

Editor de Fotos

Ajuste, filtre, gire e corte fotos no navegador — sem uploads, sem marca d'água.

Criador de Meme

Componha memes e colagens de capturas de tela com camadas reais — cole, arraste, corte, legendas, exporte.

Perguntas frequentes

Minhas imagens são carregadas?

Não. Ambas as imagens são lidas com FileReader e renderizadas localmente em elementos <img>. A sobreposição de comparação é pura CSS — clip-path e opacidade. Você pode verificar na aba de rede que nenhum byte de imagem sai da página após o carregamento da ferramenta.

E se minhas duas imagens tiverem dimensões diferentes?

O contêiner bloqueia sua proporção para a primeira imagem que você carregar, e ambas as imagens usam object-fit: contain para que sejam letterboxed em vez de esticadas. Para uma comparação limpa antes/depois, as duas imagens devem idealmente compartilhar as mesmas dimensões, mas a ferramenta lida com discrepâncias graciosamente.

Posso exportar o resultado?

Esta ferramenta é construída para revisão ao vivo, não para exportação — não produz um GIF ou vídeo gravado da varredura do slider. Para compartilhar, tire uma captura de tela ou grave a tela da comparação. Para exportações estáticas lado a lado, use o modo Lado a lado e faça uma captura de tela.

Por que há um alternador de divisor horizontal vs. vertical?

A maioria das comparações antes/depois lê da esquerda para a direita, mas algumas não — fotos de cima para baixo, layouts de rolagem comparados na altura do herói, mapas geográficos com uma divisão norte/sul. O modo de divisor vertical troca o eixo de clip para que a revelação deslize de cima para baixo em vez de lado a lado.

Para que serve o modo de sobreposição de desvanecimento?

O modo de desvanecimento é a escolha certa quando a diferença entre A e B é sutil — pequenas mudanças de cor, alterações de anti-aliasing, leve desvio de alinhamento. Um divisor rígido oculta isso porque ambos os lados do divisor mostram pixels diferentes. O desvanecimento transita entre eles para que você possa ver a mudança surgir à medida que desliza.

Há um tamanho máximo de imagem?

Cada upload é limitado a 25 MB. Não há limite de dimensão de pixel, mas imagens muito grandes (mais de ~6.000 px no lado mais longo) podem renderizar lentamente em dispositivos mais antigos, uma vez que ambas as cópias são mantidas na memória simultaneamente. Comprimir para JPG ou WebP primeiro mantém a comparação ágil.

Qual é a diferença entre isso e ferramentas de Diferença de Imagem que mostram deltas de pixel?

Ferramentas de diferença de pixel destacam cada pixel que mudou em vermelho — útil para automação de QA, mas visualmente barulhento. Um slider de comparação mostra as imagens reais lado a lado para que um humano possa ver o que mudou e decidir se a mudança importa. Elas são complementares: use ferramentas de diferença para testes de regressão, o slider de comparação para revisão de design e editorial.

Última atualização: 2026-04-29

O que é um comparador de imagens?

Como comparar duas imagens

Faça upload da sua imagem antes

Arraste um arquivo JPG, PNG, WebP, GIF, BMP ou AVIF para o slot Antes, ou clique para escolher do seu dispositivo. A imagem é renderizada no painel e a área de trabalho aparece abaixo.

Faça upload da sua imagem depois

Arraste a segunda imagem para o slot Depois. Para melhores resultados, ambas as imagens devem ter as mesmas dimensões — o contêiner de comparação se ajusta à proporção da primeira imagem que você carrega.

Escolha um modo de comparação

O modo Deslizante coloca as duas imagens uma sobre a outra com um divisor arrastável. Lado a lado as coloca em duas colunas. A sobreposição de desvanecimento faz a transição entre elas com um deslizante de opacidade — útil para detectar desvios de alinhamento.

Arraste o divisor ou deslizante

No modo deslizante, arraste em qualquer lugar na área de comparação para mover o divisor. Mude o divisor para vertical se suas imagens forem comparadas de cima para baixo em vez de da esquerda para a direita. No modo de desvanecimento, arraste o deslizante de opacidade Depois.

Trocar, redefinir ou carregar novos arquivos

Use Trocar para inverter A e B sem re-enviar. Redefinir limpa ambas as imagens e retorna a área de trabalho aos padrões. Carregue novos arquivos a qualquer momento arrastando-os para o slot — não é necessário redefinir primeiro.

Como funciona o clipe do deslizante

1. Ambas as imagens são renderizadas com object-fit: contain dentro de um contêiner com proporção bloqueada.
2. A imagem Depois fica em uma sobreposição posicionada absolutamente.
3. Um clip-path CSS: inset(0 [100 - posição]% 0 0) revela apenas o lado esquerdo da sobreposição.
4. O modo vertical troca o eixo inset: clip-path: inset(0 0 [100 - posição]% 0).
5. Eventos de ponteiro atualizam a posição a partir do deslocamento do cursor dentro do retângulo delimitador do contêiner.
6. O modo de desvanecimento ignora o clip-path e apenas anima a opacidade de 0 a 1 na imagem Depois.

Comparações comuns antes/depois

Caso de uso	Melhor modo
Passagem de retoque fotográfico (pele, substituição de céu, gradação de cor)	Slider — arraste o divisor pela moldura para identificar exatamente onde as edições estão. Mantenha ambos os arquivos nas mesmas dimensões para que a linha do divisor permaneça significativa.
Redesign de site — capturas de tela do layout antigo vs. novo	Slider para seções principais, lado a lado quando a rolagem importa. Tire ambas as capturas de tela na mesma largura de viewport ou a comparação não será justa.
Duas renderizações da mesma cena 3D com iluminação diferente	Sobreposição de desvanecimento — transite entre elas para identificar sutis mudanças de GI ou sombra. O modo de desvanecimento também é ótimo para identificar onde um denoiser alterou detalhes.
Captura de tela de relatório de bug vs. saída esperada	Lado a lado — engenheiros podem ver ambos ao mesmo tempo sem precisar arrastar. Adicione o slider por cima no tópico do problema para o momento de 'revelação'.
Mapa ou gráfico com dois estados de dados (março vs. abril)	Slider — deslize pelo gráfico para ver quais regiões mudaram. O divisor vertical funciona bem para mapas geográficos que comparam norte vs. sul.

Quando usar um slider de comparação

Revisões de retoque fotográfico — mostre aos clientes exatamente o que mudou em um único arraste.

Revisões de design — compare o layout antigo vs. novo de uma seção principal sem duas abas do navegador.

Iteração de renderização 3D — desfaça entre duas configurações de iluminação para identificar sutis mudanças de iluminação global.

Gradação de cor — deslize o divisor pela moldura para avaliar um LUT ou passagem de gradação.

Relatórios de bugs — emparelhe a captura de tela quebrada com a esperada para que os triadores não precisem rolar.

Antes/depois de imóveis — encenação vs. não encenado ou fotos pré-renovação vs. pós-renovação.

Visualização de dados — compare duas instantâneas do mesmo mapa ou gráfico tiradas em diferentes momentos.