Como comprimir imagens sem perder qualidade

Ficheiros de imagem grandes tornam os sites lentos, entopem caixas de e-mail e devoram armazenamento. Comprimi-los é uma das formas mais simples de acelerar as coisas, e pode fazê-lo sem instalar software, sem enviar nada para um servidor, e geralmente sem qualquer perda visível de qualidade. As definições de compressão certas podem retirar 80% do tamanho de uma foto mantendo-a idêntica à distância normal de visualização.

Uma breve história da compressão de imagem

A compressão como ideia digital é mais antiga que a web. A codificação por comprimento de carreira em formatos bitmap antigos (TIFF em 1986, PCX antes) reduzia cores repetidas a uma contagem mais um valor, encolhendo dramaticamente capturas e gráficos simples. O padrão JPEG de 1992 trouxe a compressão com perdas para o grande público usando a transformada discreta de cosseno (DCT) para descartar informação que o sistema visual humano não consegue perceber facilmente, ideia que ainda hoje, três décadas depois, sustenta a maior parte da compressão fotográfica.

O PNG chegou em 1996 com compressão sem perdas baseada em DEFLATE, ideal para capturas e logótipos que o JPEG estraga. WebP (Google, 2010) adicionou um modo com perdas mais inteligente que bate o JPEG em 25-35% e um modo sem perdas que bate o PNG em 20-30%. AVIF (2019) dá outro grande salto, frequentemente metade do tamanho de WebP à mesma qualidade. JPEG XL (2021) é o último candidato, querendo substituí-los a todos com um formato único que faz sem perdas, com perdas, animação e até recomprime JPEGs antigos sem perda adicional. A adoção pelos browsers é o fator limitante; os algoritmos em si já ultrapassaram em larga medida a eficiência do JPEG.

Porque o tamanho do ficheiro de imagem importa

Cada imagem numa página web tem de ser descarregada pelo browser do visitante. Uma única foto não comprimida do telemóvel pode ter 5-10 MB. Multiplique por várias imagens e a sua página demora bem mais a carregar numa ligação rápida, e minutos numa lenta. Imagens mais pequenas significam:

• Carregamentos de página mais rápidos: os visitantes veem o conteúdo mais cedo. Os Core Web Vitals da Google (LCP, Largest Contentful Paint) são muitas vezes dominados pela imagem hero; reduzi-la a metade costuma reduzir o tempo de LCP a metade.
• Menor uso de largura de banda: importante para utilizadores móveis com planos limitados, e para a sua própria fatura de hosting se servir muito tráfego.
• Partilha mais fácil: anexos de e-mail mantêm-se abaixo dos limites de tamanho (Gmail topa nos 25 MB), e as apps de chat deixam de transcodificar as suas fotos pelas suas costas.
• Mais espaço de armazenamento: o telemóvel, drive na nuvem ou servidor guarda mais ficheiros. Uma viagem de 5000 fotos passa de 5 GB para 1 GB.
• Melhor SEO: os sinais de velocidade de página contam no ranking da Google, por isso uma página cheia de imagens que carrega rápido supera uma idêntica que está lenta.

Como funciona a compressão de imagem

Há dois tipos de compressão, cada um com os seus compromissos.

A compressão com perdas (JPEG, WebP, AVIF) remove dados de imagem que o olho dificilmente notará. Em níveis de qualidade moderados (cerca de 60-80%), o resultado parece virtualmente idêntico ao original, mas pode ser 50-80% mais pequeno. O algoritmo trabalha em três passos: converte RGB para YCbCr (separando brilho de cor), faz subamostragem dos canais de cor (o olho é bem menos sensível ao detalhe de cor do que ao brilho), e aplica a DCT para descartar detalhe de alta frequência. Cada passo não custa nada em qualidade percebida e poupa quantidades enormes de dados.

A compressão sem perdas (PNG, FLAC para áudio) reorganiza os dados para ocupar menos espaço sem retirar nada. A imagem fica pixel-perfeita igual ao original, mas a poupança de tamanho é menor, tipicamente 10-30% em fotos e 30-60% em capturas e logótipos.

Formatos mistos (WebP, AVIF, JPEG XL) deixam-no escolher com ou sem perdas por ficheiro. A maior parte dos pipelines de foto modernos usa com perdas para entrega e mantém um master sem perdas para arquivo.

Como comprimir imagens online

1. Carregue as suas imagens: arraste e largue uma ou várias imagens (JPEG, PNG, WebP, AVIF, HEIC, GIF, BMP, até 50 MB cada) na ferramenta, ou clique para procurar ficheiros. Tudo é processado localmente; nada é enviado.
2. Ajuste as definições de qualidade: use o controlo de qualidade para controlar o nível de compressão. Valores mais baixos significam ficheiros mais pequenos com mais compressão. Pode também definir uma largura máxima, mudar o formato de saída ou apontar para um tamanho de ficheiro alvo.
3. Pré-visualize o resultado: a maioria das ferramentas mostra miniaturas antes-e-depois com o novo tamanho. Afine a qualidade até o compromisso encaixar no seu caso de uso.
4. Descarregue os resultados: descarregue imagens comprimidas individualmente ou clique em "Descarregar tudo" para um ZIP do lote.

Por trás, o ficheiro é lido via FileReader, descodificado pelo pipeline de imagem do browser, desenhado num canvas fora do ecrã, e re-codificado à qualidade alvo via canvas.toBlob. Versões WebAssembly dos codificadores WebP, AVIF e MozJPEG dão desempenho de compressão quase nativo sem sair da página.

Definições de qualidade que funcionam

Não há uma qualidade "certa" universal. A tabela abaixo é um ponto de partida; ajuste a partir daí com base no aspeto real das suas imagens.

Dicas para obter os melhores resultados

• Comece em qualidade 80 para fotos, 90 para capturas, são os pontos em que a maioria dos espectadores não distingue o resultado do original. Desça mais se quiser ficheiros mais pequenos; suba se a imagem tiver detalhe fino ou texto.
• Use WebP quando puder, o suporte de WebP ultrapassa 97% dos browsers em 2024. Para os poucos que não têm, sirva um fallback JPEG com o elemento picture. AVIF poupa ainda mais, mas confirme que o codificador é rápido o suficiente.
• Redimensione antes de comprimir, uma foto de 4000px mostrada a 800px num site desperdiça largura de banda independentemente da qualidade. Redimensione para o maior tamanho que realmente vai mostrar (frequentemente 2x a largura em píxeis CSS para ecrãs retina), e só depois comprima.
• Mantenha os seus originais, comprima sempre uma cópia, não o ficheiro original. Pode sempre recomprimir a partir do original, mas nunca recupera dados perdidos pela compressão.
• Retire metadados ao partilhar publicamente, os dados EXIF podem incluir coordenadas GPS, modelo da câmara, até o seu nome. Os compressores de browser geralmente removem automaticamente; verifique se a privacidade importa.
• Defina um tamanho de ficheiro alvo para e-mails, os anexos do Gmail topam nos 25 MB, muitos sistemas empresariais nos 10 MB. Aponte para 1-2 MB por imagem por segurança.
• Escolha JPEG progressivo para a web, JPEGs progressivos carregam de cima para baixo em passagens, mostrando uma pré-visualização desfocada antes de afinar. Os descodificadores modernos lidam com eles facilmente e costumam comprimir um pouco mais que o baseline.
• Evite recomprimir a mesma imagem repetidamente, cada passagem adiciona artefactos. Se houver hipótese de reeditar, guarde um master sem perdas e reexporte a partir dele de cada vez.

Que formato usar

Para conteúdo novo em 2024, a melhor prática é servir AVIF onde for suportado, WebP como fallback moderno universal, e JPEG ou PNG como último recurso. O elemento picture trata disto de forma limpa em HTML.

Armadilhas comuns

• Comprimir imagens já comprimidas, gravar de novo um JPEG a qualidade 80 não duplica a poupança; apenas adiciona mais uma ronda de artefactos. Comprima a partir do original (ou de um master sem perdas) uma única vez.
• Formato errado para o conteúdo, comprimir um logótipo com texto em JPEG produz ringing visível à volta das letras. Gravar uma foto 4000x3000 como PNG dá um ficheiro de 30 MB. Combine o formato com o conteúdo.
• O controlo de qualidade parece agressivo demais a 90, a escala de qualidade do JPEG não é linear. Passar de 90 para 80 poupa muito mais do que de 100 para 90, com quase nenhum custo visível.
• Esquecer ecrãs retina, uma imagem de 600px mostrada num slot CSS de 600px fica mole em telemóveis e portáteis modernos. Exporte a 2x os píxeis CSS e deixe o browser reduzi-la.
• Remover o perfil de cor, descartar o perfil ICC embutido pode deslocar cores de forma visível em ecrãs de gamut largo. Os compressores modernos preservam-no; os antigos podem não preservar.
• Gravar todos os PNG com a mesma profundidade, uma captura de texto a preto e branco cabe em PNG-8 (256 cores) a uma fração do tamanho de PNG-24. Use um quantizador como pngquant para grandes poupanças em gráficos.
• Recodificar para um formato pior, converter WebP para JPEG perde tanto qualidade como vantagem de tamanho. Se precisar de um fallback JPEG, codifique a partir do master original, não a partir do WebP.
• Confiar na diferença visual em pequeno, um artefacto invisível na miniatura é óbvio num ecrã 4K quando alguém faz zoom. Teste ao tamanho real de visualização.
• Esquecer o canal alfa, JPEG não suporta transparência. Comprimir um PNG transparente para JPEG enche o fundo de branco (ou da cor que a ferramenta escolher).
• Animação como GIF, os GIFs são maiores e de pior qualidade que MP4 ou WebP animado. Para entrega moderna, converta quase sempre.

Ferramentas e bibliotecas alternativas

Um compressor web é o caminho mais rápido para uma ou poucas imagens. Para lotes ou pipelines com scripts, as ferramentas de linha de comandos e bibliotecas tomam conta.

Para automatizar um pipeline de fotos de produto, sharp + MozJPEG + AVIF dá a melhor relação velocidade/qualidade em 2024. Para uploads pontuais, a ferramenta de browser ganha em conveniência e privacidade.

Privacidade e o compressor

O compressor de imagens corre inteiramente no seu browser. O ficheiro que seleciona é lido com a API FileReader, descodificado pelo pipeline de imagem do browser, desenhado num canvas fora do ecrã, e re-codificado via canvas.toBlob. Nada é enviado, nada é registado, nada é partilhado. Para material sensível, capturas de dashboards internos, scans de identificação, rascunhos de contratos como provas em imagem, esse fluxo só-local é a diferença entre confiar no servidor de um estranho e não confiar em ninguém. Mesmo fotos comuns têm muitas vezes metadados EXIF (coordenadas GPS, número de série do dispositivo, timestamp) que pode não querer que um terceiro veja; o pipeline baseado em Canvas remove a maior parte do EXIF por defeito, e a falta de upload significa que esses dados nunca saem da página de qualquer forma. Para uma tarefa tão rotineira como tornar uma foto mais pequena, o nível de privacidade por defeito deve ser: nada sai da página, nada é armazenado, nada é partilhado.