Como Comprimir Imagens: Um Guia do Web Designer

Sep 14, 2025

Como

A velocidade média de uma moderna conexão de internet soaria muito futurista para os mestres da Web do passado. Nos primeiros dias da Web, a quantidade de dados transferidos foi crucial, tanto em termos de tempo e custo, portanto, todos os envolvidos na hospedagem de algo on-line tentavam fazer imagens menores.

Ironicamente, o problema não foi embora hoje em dia. Cada vez que você visita um site de script pesado (como Notícias Maintstream World), muitas vezes puxa uma dúzia de megabytes de código Javascript, imagens, vídeos e whatnot. Ainda pode ser dolorosamente lento e até custar um centavo bonito para alguns usuários de dados móveis (isso não deve ser um problema se você usar um decente Construtor de sites , e bom hospedagem na web. deve ficar de olho nisso para você).

Neste tutorial, descobriremos as maneiras pelas quais você pode reduzir os arquivos de bitmap para a Web. Contanto que utilize os bons e antigos formatos PNG e JPEG (veja mais sobre Formatos de arquivo de imagem. aqui, e certifique-se de salvar seus arquivos à direita armazenamento na núvem bem), vamos ver como podemos torná-los menores sem comprometer a qualidade, usando um pouco de Projetos de código aberto . No final, teremos arquivos substancialmente menores que ainda parecerão bons, mas exigem menos tempo e dados para serem renderizados nos navegadores da Web dos usuários.

Leia para mergulhar nos detalhes. Primeiro, uma nota rápida no software. Todas as ferramentas mencionadas aqui são código aberto - Salte para o fundo para um guia para Como obter o software você precisa.

Os melhores temas do portfólio Wordpress

Escolha o formato certo

Pode parecer trivial ainda estar em torno do tamanho do arquivo, mas há exemplos suficientes em que uma imagem é muito maciça sem qualquer propósito ou parece terrível apesar de ser pequeno. Para evitar esses erros, escolha um formato para salvar ou converter uma imagem com sabedoria. Usar o JPEG implica quebrar uma imagem em telhas de pixels 8x8, onde cada telha é comprimida. O nível de compactação depende do usuário (é esse controle deslizante quando você salva uma imagem), mas normalmente o JPEG permite 10: 1 ganho de tamanho de arquivo com uma perda aceitável em qualidade.

A diferença perceptual entre arquivos JPEG feitos com alta (80-100) e baixa relação de compressão (40-100) é mínima para imagens fotográficas, mas altamente perceptíveis para coisas como obras de arte, ícones e capturas de tela digitais. Portanto, é recomendável escolher JPEG para fotos e ir com outra coisa para os outros tipos de imagens de bitmap.

O PNG é um dos formatos mais adequados para gráficos de rede (na verdade, é isso que sua abreviação significa). Enquanto o formato JPEG é sempre perdido (mesmo com a qualidade definida como 100), o formato PNG pode ser perdido ou não. Além disso, mesmo quando é, compacta dados reduzindo o número de cores usadas na imagem, para que o resultado geralmente pareça nítido e claro. Portanto, escolha PNG para retratar ScreenGrabs ou qualquer outro tipo de fotos com preenchimento sólido.

Comece com métodos convenientes

Imagine is based on Electron and provides a friendly interface for processing several images at once — Imagine é baseado em elétron e fornece uma interface amigável para processar várias imagens de uma só vez

Otimizando os arquivos de bitmap é possível com um monte de ferramentas freeware, para que você não tenha que confiar em um editor de imagens completa. Imagine é uma dessas aplicações e é incrivelmente fácil de usar. Basta arrastar uma imagem (ou uma pilha de imagens) sobre a janela Imagine e use os pequenos sliders para ajustar a taxa de compactação.

Imagine funciona com arquivos JPEG, PNG e WebP e é ideal para codificação perdida. A maior vantagem é que a ferramenta é interativa; Ele mostra instantaneamente como a imagem procurará com as configurações atuais e exibirá o tamanho do arquivo proposto. Imagine funciona ótimo para processamento em lote - pelo menos pode salvar todas as imagens abertas de uma vez, se você precisar.

Escusado será dizer que há dezenas, se não centenas de outros otimisadores JPEG e PNG, incluindo alguns serviços on-line acessíveis (como Tinyjpg. ). Mas não se apresse ainda - temos algo melhor em nossa manga.

Técnicas avançadas de compressão

For JPEG, we used a test photo of a straw hat on a blurred background; Guetzli reduced file size by 33 per cent and Lepton by another 23 per cent — Para JPEG, usamos uma foto de teste de um chapéu de palha em um fundo desfocado; Guetzli reduziu o tamanho do arquivo por 33% e Lepton por outros 23%

À primeira vista, parece que não podemos tirar muito mais de uma mordida de tamanhos de arquivo JPEG com perdas, algo que pode ser instantaneamente comprovado por tentativas fúteis para arquivar novas imagens usando Zip ou qualquer outra técnica de compressão. Mas aqui vem Guetzli, um cookie suíço inteligente e codificador perceptivo sofisticado para JPEG.

Guetzli faz um JPEG médio menor em 20 a 30%, aumentando sua densidade de compressão. O segredo é que o algoritmo está ciente da maneira como os humanos percebem o que vêem, então a imagem resultante ainda parece ótima para os olhos. Guetzli é uma ferramenta de linha de comando de plataforma cruzada, que usa a seguinte sintaxe:

guetzli [--quality Q] [--verbose] original_image output_jpeg_image

A imagem original pode ser PNG ou JPEG, enquanto a saída é sempre JPEG. Portanto, você pode usar o Guetzli para converter PNG para JPEG graças à sua compressão de última geração. A qualidade deve cair entre 0-100. Guetzli é um software incrivelmente pesado em recursos; Consome quase 300MB de memória por 1 megapixel e também muita energia da CPU. Esperamos que seus JPEGs super otimizados não aumentem o aquecimento global ...

Gráficos de rede portáteis são uma história diferente, desde que fosse projetada para codificação de imagem sem perdas. Quando você salva uma imagem como PNG em um editor de imagens como o GIMP, você tem um controle deslizante de taxa de compressão com valores de 0 a 9. Aqui 0 significa nenhuma compressão e faz a imagem pesar como se fosse salva como um TIFF. Em contraste, 9 tiras a maioria das informações de cores desnecessárias e resulta em um arquivo que é de 15 a 20 vezes menor que o TIFF.

Desta vez, vamos tentar fazer um arquivo PNG já pequeno (com proporção de 9) ainda menor. Para este propósito, usaremos o ZOPFLI, outra ferramenta de código aberto que novamente tem raízes no Google Labs. O ZOPFLI é um compressor de alta qualidade para codificação de dados de deflate, gzip e zlib.

A parte interessante é que o ZOPFLI contém dois codificadores em um pacote: o binário de uso geral e a ferramenta dedicada "zopflipng". Este último é exatamente o que precisamos! O Zopflipng é um codificador baseado em desinflate com determinados algoritmos de reportagem do formato da WebP. É inteligente o suficiente para escolher automaticamente a melhor estratégia usando códigos de scanline e remover vários pedaços desnecessários dentro de PNG. Use-o com esta simples sintaxe:

zopflipng original_png output_png

Zopflipng provavelmente pode fazer o trabalho ainda melhor com as seguintes opções explícitas:

 Zopflipng - 800 --Filters = 01234Mepb --lossy_8bit --lossy_transparent original_png
Saída_png

O preço que você paga é o mesmo que com Guetzli: A ferramenta leva muito tempo para processar uma imagem, especialmente se for grande. Quanto mais iterações você usa, mais tempo levará, mas 500 é um número razoável. O ganho de tamanho de arquivo com ZOPFLI fica entre 8 a 20 por cento, o que é muito bom para imagens visuais perfeitas. Em resumo, ganhando 8 por cento é comum para capturas de tela, enquanto 20 por cento é possível com fotografias (quando você precisa armazená-las como PNGs).

Atualize para os formatos de arquivo Next-Gen

The test PNG image was an ordinary 1920x1080 screenshot; consequent compression by Zopflipng and then FLIF gained 14 per cent without reducing the number of colours — A imagem de PNG de teste era uma captura de tela comum de 1920x1080; consequente compressão por zopflipng e, em seguida, flif ganhou 14 por cento sem reduzir o número de cores

Formalmente, esta parte vai além do escopo de PNG e JPEG, mas é muito prático, uma vez que você pode organizar a conversão de arquivos na mosca. O que queremos dizer aqui é usar formatos alternativos e novos que superam os melhores padrões do setor (ler webp).

Um é flif, um novo formato de imagem sem perdas baseado no método de compactação maníaco (meta-adaptável inteiro inteiro aritmético), que pode superar PNG, FFV1, WebP sem perdas, BPG sem perdas e JPEG 2000 sem perdas em termos de taxa de compressão. Flif está disponível para todas as plataformas e alguns visualizadores de imagens já a apoiarem, mas tem um longo caminho a percorrer o mainstream. Neste momento, faz sentido usar flif para armazenamento ou no lado do servidor. Pode agir como um formato de arquivamento eficiente. Você precisará pegar o código da página do github do projeto e compilá-lo. Depois de ter o flif Binário instalado, use o seguinte comando para codificar uma imagem PNG:

 flif -e original_png output_flif

Substituir -e. com -d. e coloque os arquivos na ordem inversa para 'descompactar' sua imagem de volta ao PNG. Em termos de ferramentas, agora há o componente FLIF WIC API para Windows, o plugin do QT FLIF para Linux e o Phew Image Viewer e o Plugin Quicklook para MacOS (consulte a seção Links para detalhes). Comparado com a imagem anteriormente torturada pelo Zopflipng, a FLIF reduz seu tamanho de arquivo mais abaixo por ~ 10 por cento. Resultados impressionantes!

Nosso último herói é Lepton, outro formato de código aberto, generosamente publicado pelos desenvolvedores do Dropbox. Lepton faz com JPEG que flif faz com png. Lepton pode diminuir os JPEGs em até 22% no modo sem perdas, o que significa que o codificador não causa perda de qualidade em comparação com o arquivo JPEG original. Sob o capô Lepton implica técnicas inteligentes de compactar esses blocos JPEG 8x8. Em vez de escrever zeros e uns, Lepton codifica dados de bitmap usando o codificador aritmético VP8, que respeita o contexto em torno de cada bloco.

Nosso teste provou que Lepton seja muito eficiente e rápido. O comando parecia o seguinte:

 Lepton Original.jpg Output.lep

E em um segundo ou dois, a ferramenta produziu o arquivo .lep que era menor em quase um quarto do original. Em comparação com o tempo que consome guetzli, Lepton está em forma de rapidez. Você pode usar o Lepton da mesma maneira que o Dropbox faz. O formato permite reduzir os custos de armazenamento em 20 a 25% e, uma vez que é tão mal-humorado, você pode fazer sequências de codificação / decodificação on-the-fly sem grandes inconvenientes. By the way, o comando de decodificação é igualmente simples, só precisa trocar os dois arquivos e o arquivo resultante é idêntico ao JPEG original:

 Lepton Original.lep Output.jpg

Use as técnicas descritas para otimizar o armazenamento de dados do usuário ou melhorar ainda mais as velocidades de carregamento de seus projetos da web.

Como obter o software

Cada peça de software descrito neste tutorial é fonte aberta, para que você possa usá-lo livremente. Não há necessidade de incomodar a compilação de tudo, desde que a maioria das ferramentas abaixo tenha downloads binários. Aqui está como obter o software e funcionar.

Pegue o binário de guetzli aqui . É a coisa mais fácil de fazer. Zopfli só dá o código (construí-lo com 'make') em Github. . No entanto, pode ser mais sábio para você obtê-lo através do Nó.JS Package Manager:

NPM Install Node-ZOPFLI

Alguns links úteis para FLIF:

Flif-hub : Referência de implementação, fontes e janelas binários
Xnview mp. : Um visualizador de fotos de plataforma cruzada com suporte FLIF integrado
plugin qt-flif : Um céu para usuários do Linux
Few. : Um viewer e o plug-in Quicklook para macos
Lepton. : Código-fonte e binários do Windows

Este artigo foi originalmente publicado em questão 316 de internet , a revista mais vendida do mundo para web designers e desenvolvedores. Comprar edição 316 aqui ou Inscreva-se aqui .

Artigos relacionados:

O guia final para a resolução da imagem
Como criar efeitos de texto e gravação em CSS
O guia do designer para usar imagens de forma mais eficaz
4 dicas essenciais de otimização de imagem

Como Comprimir Imagens: Um Guia do Web Designer

Escolha o formato certo

Comece com métodos convenientes

Técnicas avançadas de compressão

Atualize para os formatos de arquivo Next-Gen

Como obter o software

Como - Artigos mais populares

Como virar uma camada no Photoshop: um guia completo

30 Dicas de Renderização de Keyshot

21 maneiras de otimizar seu CSS e acelerar o seu site

Criar texto 3D no Photoshop: um guia passo a passo

O Colourize Greyscale funciona no Photoshop

Como criar glazes com aquarela

Comece com tela HTML

Como preparar gráficos ilustradores para efeitos após

Categorias