Como funciona o slider de comparação de imagens
O comparador de imagens permite criar um slider interativo entre duas fotos, exibindo o resultado antes e depois diretamente em qualquer página HTML. Todo o processamento acontece no navegador, convertendo as imagens em data URIs e embutindo-as no código gerado.
O slider utiliza JavaScript simples integrado ao bloco, sem depender de bibliotecas externas ou servidores. Isso garante que o código é totalmente autossuficiente: basta copiar e colar onde quiser.
Cuidados ao preparar suas imagens
Para uma comparação fiel, é importante que as duas imagens tenham dimensões e enquadramentos idênticos. Caso os arquivos sejam diferentes, o sistema estica a segunda imagem para igualar ao tamanho da primeira, o que pode gerar distorções visuais e um aviso é exibido.
Imagens são limitadas a 1.400 pixels de largura e reencodadas em JPEG para evitar códigos longos demais. Isso pode afetar a qualidade, principalmente em detalhes finos; ajuste suas imagens antes de usar para garantir um resultado mais preciso.
Quando usar e principais limitações
Este slider é ideal para blogueiros, editores e criadores de conteúdo que desejam destacar uma diferença visual entre duas fotos em uma página. Por ser totalmente embutido, não depende de CMS ou plugins específicos; funciona em qualquer editor HTML.
O código gerado tende a ser grande para imagens maiores, tornando-o impraticável para galerias ou múltiplas comparações na mesma página. Se precisa de pixel precisão ou resolução maior, hospede suas imagens e substitua os data URIs no código. Sempre confira o alinhamento antes de publicar.
Perguntas frequentes
Posso criar vários sliders de comparação em uma página?
Sim, é possível, mas o tamanho do código aumenta muito com imagens grandes, tornando a página lenta. Recomenda-se usar apenas para comparações pontuais.
Como garantir que as imagens estejam alinhadas corretamente?
Prepare as imagens com dimensões iguais e enquadramento idêntico antes de usar. O slider não corrige diferenças de enquadramento, apenas estica para igualar o tamanho.
O que acontece se minhas imagens têm tamanhos ou formatos diferentes?
A segunda imagem é ajustada para o tamanho da primeira, podendo causar distorções. Um aviso será exibido para alertar sobre a diferença. Prefira imagens compatíveis para melhor comparação.
Posso utilizar imagens de alta resolução no slider?
As imagens são limitadas a 1.400 pixels e reencodadas em JPEG para evitar sobrecarga no código. Para qualidade superior, hospede as imagens e substitua os URIs manualmente no código embutido.
O slider funciona em todos os navegadores e plataformas?
Sim, o slider utiliza apenas JavaScript e HTML padrão, funcionando em navegadores modernos e diversos CMS. Não há dependências externas.
Minhas imagens são enviadas ou armazenadas fora do navegador?
Não. Todo o processamento e geração do código ocorre localmente no navegador. Nenhuma imagem ou dado é enviado para servidores ou armazenado externamente.
Problema ou sugestão para esta ferramenta? Conte para nós