O que acontece se as duas imagens tiverem tamanhos diferentes?

Ambas as imagens são redimensionadas automaticamente para as mesmas dimensões para a comparação. O PNG exportado é gerado no tamanho de exportação selecionado.

🖼️

antes & depois,

Comparador
Antes e Depois

Compare duas imagens com um slider interativo em tempo real.
Exporte a comparação como PNG para compartilhar resultados.

↔️

Slider Interativo

Ajuste a posição com mouse ou toque

📸

Exportação PNG

Baixe a comparação em qualquer posição

🔒

Processamento Local

As imagens nunca são enviadas a nenhum servidor

📷 Imagem Antes

📁Clique ou arraste a imagem

✨ Imagem Depois

📁Clique ou arraste a imagem

Mostrar rótulos Direção: Tamanho:

👆 Envie uma imagem Antes e Depois para começar a comparar

🔒As imagens enviadas nunca são enviadas a nenhum servidor. Todo o processamento é feito localmente no seu navegador.

about,

Sobre

O Comparador Antes e Depois permite comparar duas imagens com um slider interativo de arrastar. Ideal para retoques, construção, fitness e muito mais, funciona completamente no seu navegador usando a Canvas API.

Arraste o slider para qualquer posição e baixe a comparação como PNG. Nenhum dado de imagem é enviado para nenhum servidor.

how to,

Como usar

PASSO 1

Envie imagens

Envie suas imagens Antes e Depois clicando ou arrastando.

PASSO 2

Arraste o slider

Arraste o slider na área de comparação para ajustar a posição.

PASSO 3

Exporte

Clique em "Baixar PNG" para salvar a comparação.

glossary,

Glossário

Antes e Depois: Apresentação visual que compara o estado antes e depois de um tratamento, construção ou edição. Usa duas imagens, uma para cada estado.
Slider de Comparação: UI interativa onde arrastar um slider para esquerda/direita revela a imagem antes ou depois dentro do mesmo quadro.
Canvas API: API de desenho 2D do HTML5. Usada para renderizar ambas as imagens em um canvas e recortá-las na posição do slider.
Pointer Events API: API Web que lida uniformemente com entrada de mouse, toque e caneta. Usada para implementar o comportamento de arrastar o slider em qualquer dispositivo.
Recorte (Clipping): Restringir a área de desenho a uma forma específica. Em sliders antes/depois, o canvas é dividido na posição do slider com cada imagem de um lado.
Proporção de Aspecto: A relação entre largura e altura de uma imagem. Ambas as imagens devem ter a mesma proporção para que a comparação funcione corretamente.
PNG: Formato de imagem sem perdas. Sem degradação de qualidade ao salvar. Suporta transparência. Usado como formato de exportação.
WebP: Formato de imagem moderno do Google que oferece tamanhos de arquivo menores que JPEG e PNG com qualidade comparável.

faq,

Perguntas frequentes

Q.O que acontece se as imagens tiverem tamanhos diferentes?: São redimensionadas automaticamente para as mesmas dimensões, mantendo a proporção de aspecto.
Q.Posso exportar PNG na posição atual do slider?: Sim. Pressione "Baixar PNG" para salvar a imagem exatamente como aparece na comparação.
Q.Posso ocultar os rótulos ANTES/DEPOIS?: Sim. Desmarque a opção "Mostrar rótulos" para ocultá-los.
Q.Funciona com imagens retrato/paisagem?: Sim. Ambas as orientações são suportadas, e você pode alternar entre direções de comparação horizontal e vertical.
Q.As imagens são enviadas para algum servidor?: Não. Todo o processamento usa a Canvas API localmente no seu navegador. Nenhum dado de imagem é enviado externamente.
Q.Quais formatos de imagem são suportados?: JPEG, PNG, WebP, GIF (estático) e qualquer formato compatível com seu navegador.
Q.O slider funciona em smartphones?: Sim. Suporte total a entrada por toque — arraste o dedo para a esquerda ou direita.
Q.Posso comparar vários pares de imagens ao mesmo tempo?: Atualmente um par por vez. Exporte cada comparação como PNG, depois carregue novas imagens.