Por que comparar com um controle deslizante
Duas imagens lado a lado são surpreendentemente difíceis de avaliar. Os olhos pulam de uma para a outra, o cérebro preenche as lacunas, e pequenas diferenças de nitidez ou de cor simplesmente passam despercebidas. Um controle deslizante coloca as duas versões exatamente no mesmo lugar da tela, então, quando você arrasta o divisor, tudo o que muda entre elas pisca bem em cima da linha.
Isso é útil sempre que uma imagem é a versão processada de outra:
- Verificar se uma configuração de compressão criou artefatos visíveis antes de aplicá-la a uma pasta inteira.
- Comparar duas configurações de exportação de um editor de fotos, como JPG a 80 contra WebP a 75.
- Ver o que uma ampliação por IA ou uma remoção de fundo realmente mudou.
- Revisar um retrato retocado em relação ao arquivo bruto.
- Encontrar diferenças entre duas versões quase idênticas de um layout ou de uma captura de tela.
Como a visualização é montada
Arraste ou escolha duas imagens de uma vez; os dois primeiros arquivos fornecidos são os usados. A primeira ocupa a largura total da página e a segunda fica exatamente por cima dela, ajustada ao mesmo quadro. Arrastar (ou tocar) move o divisor: a segunda imagem aparece à esquerda da alça, a primeira à direita.
Abaixo do controle deslizante, dois cartões mostram as dimensões em pixels e o tamanho do arquivo de cada imagem. Juntos, eles respondem à pergunta real por trás da maioria das comparações: a economia em kilobytes compensa a diferença que dá para ver?
Alguns detalhes que vale saber:
- A ordem em que os arquivos chegam depende de como você os seleciona. Se não tiver certeza de qual lado é qual, veja os tamanhos nos cartões; a versão processada normalmente é a menor.
- As duas imagens precisam ser decodificadas pelo seu navegador. JPG, PNG, WebP e AVIF são aceitos; converta antes fotos HEIC com o HEIC para JPG.
- Se as duas imagens tiverem proporções diferentes, a segunda é ajustada para cobrir o quadro da primeira e partes dela são cortadas nas bordas. Compare imagens com a mesma proporção para um resultado que faça sentido.
- Nada é enviado. Os dois arquivos são lidos direto do seu dispositivo e ficam na página até você escolher um novo par.
No que prestar atenção
O estrago da compressão não se espalha por igual na imagem. Passe o divisor devagar primeiro por estas áreas:
- Degradês suaves, como céu, fundos de estúdio ou paredes. Formatos com perdas mostram faixas ou blocos quadrados fracos primeiro aqui.
- Bordas nítidas sobre cor chapada, como texto, logotipos e contornos de prédios. Procure halos, ondulações ou uma franja borrada.
- Vermelhos e azuis saturados. O JPEG guarda a cor em resolução menor que o brilho, então detalhes em vermelho forte borram antes de qualquer outra coisa.
- Texturas finas e repetitivas, como cabelo, grama ou tecido. Imagens comprimidas demais perdem isso primeiro, e a textura vira uma mancha lisa.
- Sombras escuras, onde ruído e blocos se escondem bem numa tela com pouco brilho, mas aparecem numa tela clara.
Faça isso no tamanho em que a imagem vai realmente ser vista. No celular, um nível de compressão que parece grosseiro num monitor de 27 polegadas pode ser invisível.
Uma rotina prática para escolher configurações
A comparação é mais útil como parte de um pequeno ciclo de testes:
- Escolha uma imagem representativa do lote, de preferência uma com céu, pele e algum detalhe fino.
- Exporte-a duas vezes com configurações diferentes, por exemplo com a compressão de JPG em 80 e em 65.
- Carregue o original e a configuração mais baixa. Se você não enxergar diferença nas cinco áreas acima, a configuração mais baixa é segura.
- Se enxergar, carregue o original e a configuração mais alta e repita.
- Aplique a configuração vencedora ao lote inteiro.
O mesmo método funciona para níveis de paleta do PNG, qualidade do WebP e redimensionamento. Quando dois candidatos parecem idênticos, os tamanhos nos cartões decidem: fique com o menor.