Slider de Comparação de Imagens

Como Funciona o Slider de Comparação de Imagens

O Que a Ferramenta Faz

O Slider de Comparação de Imagens sobrepõe duas imagens e mostra apenas a parte que quer ver ao arrastar um manípulo vertical. À medida que desliza para a esquerda e para a direita, é revelada uma maior parte da imagem de 'antes' ou de 'depois', tornando imediatamente óbvias as diferenças visuais lado a lado. Também são apresentados os tamanhos dos ficheiros e a variação percentual, para que possa ver o impacto ao nível dos bytes.

Casos de Uso Comuns para Programadores

Engenheiros que verificam compressão de imagem com perdas comparam uma versão JPEG com uma versão WebP da mesma origem. Designers analisam alterações de tone mapping, retoque ou correção de cor entre um rascunho e a versão final. Engenheiros de ML/IA visualizam resultados de super-resolução, remoção de ruído ou transferência de estilo face às entradas. Equipas de marketing produzem demonstrações dramáticas de antes/depois para landing pages.

Formatos, Tipos ou Variantes de Dados

Aceita qualquer formato de imagem que o navegador consiga renderizar — PNG, JPEG, WebP, AVIF, GIF, SVG. As imagens ficam no seu navegador através de object URLs (URL.createObjectURL), pelo que nada é carregado. Para uma comparação mais útil, as duas imagens devem ter dimensões e proporção correspondentes; se forem diferentes, ambas são renderizadas com object-fit: contain para que nenhuma seja cortada.

Erros Comuns e Casos Limite

Comparar imagens com proporções diferentes produz barras de letterbox de um dos lados. Imagens muito grandes (>50 MB) podem tornar a interacção de arrastar mais lenta em navegadores mais antigos. O slider expõe a imagem 'depois' na totalidade — se ambos os ficheiros tiverem transparência, posicione o slider sobre uma área opaca ou verá o fundo da página a transparecer através de ambos os painéis.

Quando Usar Esta Ferramenta vs Código

Use a ferramenta do navegador para comparações ad-hoc durante o desenvolvimento ou para demonstrações rápidas a stakeholders. Em websites de produção, integre bibliotecas dedicadas como react-compare-slider ou img-comparison-slider para acessibilidade, lazy loading e suporte a SSR; para verificações de qualidade automatizadas em lote, em centenas de imagens, use ferramentas baseadas em SSIM/PSNR como o ImageMagick `compare` ou o pixelmatch.