Comparação de Imagens

Carregue duas imagens e compare-as com um controle deslizante ou visão lado a lado. Perfeito para edições antes/depois. Sem upload.

Como o Controle deslizante de comparação de imagens funciona

O Controle Deslizante de Comparação de Imagens permite carregar duas imagens lado a lado e arrastar um divisor vertical para revelar mais de uma imagem e menos da outra. Esse layout antes e depois é uma forma direta e sem atrito de mostrar a diferença entre duas versões de uma imagem. Ambas as imagens são carregadas do seu disco local usando a API File e renderizadas na tela pelo navegador; nada é enviado para um servidor.

O controle deslizante usa uma abordagem CSS clip-path para que a transição entre as duas imagens seja sempre alinhada com os pixels e não haja mistura ou interpolação na fronteira. Você também pode mudar para uma vista dividida que mostra as duas imagens em painéis fixos esquerdo e direito. A ferramenta é útil para comparar edições de fotos, resultados de compressão, iterações de design ou quaisquer duas imagens onde você precisa ver as diferenças claramente.

Escrito por Bastien Sulyan

Como usar o Controle deslizante de comparação de imagens, passo a passo

Arraste a primeira imagem (a versão 'antes') para a área de upload esquerda.
Arraste a segunda imagem (a versão 'depois') para a área de upload direita.
Arraste o divisor para a esquerda e direita para revelar mais de uma imagem por vez.
Mude para a vista dividida para ver ambas as imagens em painéis fixos se preferir uma comparação estática.
Use o botão de tela cheia para maximizar a comparação para inspeção detalhada.

Casos de uso comuns

Um fotógrafo compara a exportação RAW original com uma versão retocada para avaliar quanto a edição mudou a imagem.
Um desenvolvedor verifica um par de imagens comprimidas antes e depois para avaliar se a perda de qualidade em um determinado nível de compressão é aceitável.
Um designer de UX apresenta um redesign de interface colocando a captura de tela da interface antiga à esquerda e a nova à direita para revisão das partes interessadas.
Um editor de conteúdo verifica se uma manipulação de imagem (gradação de cores, recorte) é consistente entre uma miniatura e uma versão em tamanho completo.

Perguntas frequentes

As duas imagens precisam ter o mesmo tamanho?

A ferramenta funciona melhor quando ambas as imagens têm as mesmas dimensões, porque o controle deslizante as sobrepõe exatamente. Se as imagens diferirem em tamanho, a ferramenta as dimensiona para um tamanho de exibição comum. Algum desalinhamento pode aparecer nas bordas se as proporções forem diferentes.

As imagens são enviadas para algum lugar para que a comparação funcione?

Não. Ambas as imagens são carregadas do seu sistema de arquivos via API File e desenhadas em elementos Canvas no seu navegador. A comparação é uma operação de renderização no lado do cliente. Nenhuma imagem sai do seu dispositivo.

Posso comparar imagens de duas URLs diferentes em vez de arquivos locais?

A ferramenta atual aceita apenas arquivos locais. Carregar imagens de URLs remotas exigiria que o navegador as buscasse e estaria sujeito a restrições de CORS que muitos hosts de imagens não permitem.

Há um tamanho máximo de imagem que a comparação pode suportar?

O limite é a memória Canvas do seu navegador. Imagens de até cerca de 20 megapixels cada são tratadas sem problemas na maioria dos dispositivos desktop. Imagens muito grandes podem tornar a renderização mais lenta ou causar um erro de memória em hardware de baixo desempenho.

Posso salvar uma captura de tela de uma posição específica do controle deslizante?

A ferramenta de captura de tela do seu sistema operacional (ou o recurso de captura de tela do navegador no DevTools) é a forma mais simples de capturar uma posição específica do controle deslizante. A própria vista de comparação não tem um botão de exportação integrado para uma imagem mesclada.

Ferramentas relacionadas

Mantenha tudo local, explore ferramentas complementares.

Todas as ferramentas de imagem