Comprimir imagens _

Como funciona a compressão de imagens no navegador

Cada passagem de compressão corre inteiramente em JavaScript. Nenhuma biblioteca de codec é descarregada e nenhum servidor está envolvido. A própria Canvas API do navegador descodifica a imagem, recodifica-a com menor qualidade e entrega-lhe um Blob que a página pode pré-visualizar, descarregar ou compactar em ZIP. Como cada passo fica dentro da sandbox da aba, os ficheiros originais nunca tocam na rede.

1. Lê cada ficheiro carregado como Blob e cria um URL de objeto para que o navegador possa descodificá-lo localmente, sem copiar bytes para um servidor nem escrevê-los em disco.
2. Desenha a imagem descodificada num elemento Canvas fora do ecrã, nas suas dimensões de píxeis originais, pronta para recodificação.
3. Chama canvas.toBlob(callback, mimeType, quality) para recodificar os píxeis. No modo qualidade, o valor do controlo deslizante mapeia-se diretamente para o parâmetro de quantização do codificador; no modo tamanho-alvo, a página bisecta o valor de qualidade até que o blob de saída caiba abaixo do orçamento em bytes.
4. Mostra um resumo antes/depois com o tamanho original, o tamanho comprimido e a percentagem de poupança, depois oferece um download por imagem ou um único ZIP para todo o lote. O ZIP é construído em memória com fflate, uma biblioteca de 8 KB carregada na primeira utilização.

Porquê comprimir imagens?

• Imagens mais pequenas carregam mais depressa. Reduzir uma imagem hero de 4 MB para 600 KB melhora diretamente o Largest Contentful Paint, um dos Core Web Vitals que o Google usa para o ranking. Numa página com várias fotos, a poupança acumula-se num primeiro pintado mais rápido.
• Os limites de upload e de anexos estão em todo o lado. Muitas plataformas CMS, ferramentas de tickets e sistemas de e-mail rejeitam ficheiros com mais de 1 ou 2 MB. Uma passagem rápida de compressão deixa a foto abaixo do limite sem precisar de abrir um editor completo.
• A largura de banda e o armazenamento custam dinheiro a escala. Enviar WebP a qualidade 0.8 em vez de PNG no tamanho completo pode cortar a carga de imagens num terço ou mais, o que reduz as faturas de egresso CDN e o consumo de dados móveis dos seus visitantes.
• A privacidade importa com imagens sensíveis. Como tudo corre no seu navegador, digitalizações de documentos, imagens médicas e capturas internas ficam no seu dispositivo — não há upload para um servidor de terceiros como o TinyPNG de que se preocupar.

Aplicações comuns

A compressão surge sempre que uma imagem é maior do que o sítio para onde vai. Três padrões que vemos repetidamente.

• Preparar fotos de produtos para uma loja online. Os originais JPEG são comprimidos para qualidade 0.8 (ou um objetivo de 200 KB) para que a montra carregue depressa e supere os Core Web Vitals no móvel.
• Reduzir capturas de ecrã antes de as anexar a um bug tracker ou wiki. Um lote de PNG convertidos para JPEG a qualidade 0.85 passa frequentemente de dezenas de megabytes para um par.
• Fazer caber uma foto dentro de um limite de upload — um portal de emprego que rejeita ficheiros com mais de 1 MB, um sistema de e-mail com limite apertado para anexos, ou um avatar de fórum que tem de encaixar num orçamento de bytes.

Um exemplo prático: JPEG de 4 MB para 400 KB

Um JPEG de 4 MB tirado diretamente da câmara de um telemóvel é uma carga comum que faz saltar limites de upload e abranda páginas. Um bom benchmark para medir o que a compressão poupa.

Solte o JPEG na zona de carregamento, deixe o formato em JPEG, e ou arraste o controlo deslizante de qualidade para 0.7 ou mude para o modo de tamanho-alvo e escreva 400 KB. No modo qualidade, o pipeline Canvas recodifica uma vez e mostra o resultado, tipicamente entre 500 e 700 KB dependendo da foto. No modo tamanho-alvo, a página testa alguns valores de qualidade, fica com o mais alto que ainda cabe abaixo de 400 KB e apresenta a percentagem de poupança. Clique em Descarregar no cartão para obter o ficheiro individual, ou em Descarregar .zip se comprimiu várias imagens de uma vez. Todo o processo corre bem abaixo de um segundo para uma imagem deste tamanho e não consome largura de banda depois de a página ter carregado.

Qual é a diferença entre o modo qualidade e o modo tamanho-alvo?

O modo qualidade dá-lhe um único controlo deslizante de 0.1 a 1.0 que mapeia para o parâmetro de quantização do codificador JPEG ou WebP — valores mais baixos significam ficheiros mais pequenos e mais artefactos visíveis. O modo tamanho-alvo inverte o problema: define um tamanho em kilobytes e a página bisecta o valor de qualidade, codificando algumas vezes até encontrar a maior qualidade que ainda cabe dentro do seu orçamento. O modo tamanho-alvo é prático quando há um limite rígido (um teto de upload de 1 MB, por exemplo); o modo qualidade é mais rápido e melhor quando quer simplesmente um resultado visual previsível. PNG é sem perdas, por isso nenhum dos modos se aplica a ele.

Isto acontece no meu dispositivo?

Sim, totalmente. A página usa a Canvas API nativa do navegador e a Web File API para descodificar e recodificar cada imagem em memória. Nenhum dado de imagem é enviado para um servidor, não há upload temporário e não há nenhuma ida e volta à nuvem. Pode verificar você mesmo: abra as DevTools, vá ao painel Network e execute uma compressão. Os únicos pedidos de saída que verá são o carregamento inicial da página e as chamadas de anúncios. Nada em forma de imagem sai da aba.

Porquê comprimir um PNG às vezes mal o encolhe?

PNG é um formato sem perdas, por isso a Canvas API não pode descartar detalhes para o tornar mais pequeno — só pode reempacotar os mesmos píxeis. Para fotografias, um PNG já é grande e a recodificação sem perdas poupa pouco. O verdadeiro ganho vem de mudar o formato de saída para JPEG ou WebP, que usam compressão com perdas adequada para fotos e ficam rotineiramente 4 a 10 vezes mais pequenos. Use PNG apenas quando precisar de qualidade sem perdas ou transparência; caso contrário, escolha JPEG para fotos ou WebP para o melhor equilíbrio tamanho-qualidade.

Que formato devo escolher?

Para fotografias, WebP a qualidade 0.8 oferece o melhor equilíbrio tamanho-qualidade e é suportado por todos os navegadores lançados desde 2021; JPEG é a alternativa universal segura quando o destino é mais antigo ou restrito. Escolha PNG apenas quando precisar de qualidade sem perdas ou canal alfa — arte vectorial, capturas de UI, logos com transparência. Se está a otimizar para velocidade de página e o seu público usa navegadores modernos, WebP é quase sempre a escolha certa; se alimenta um CMS antigo ou um pipeline de impressão que rejeita WebP, fique com JPEG.

Solte as suas imagens, escolha um nível de qualidade ou um tamanho-alvo, comprima. Tudo corre na sua aba. Sem upload, sem conta, sem esperar uma fila de servidor.