Otimizar as imagens para a web

Maio 2017



1. Breve introdução

1.1 Por que esta página?


Páginas pesadas demais, é chato e, com isso, a gente tende a pulá-las. Nada mais idiota do que uma página com uma imagem de fundo com 3MB?

A redução de peso das páginas web permite:
  • Acelerar o carregamento das páginas para os usuários
  • Economizar espaço de disco no seu alojador se este espaço for limitado
  • Economizar a largura de banda

1.2 Como acelerar estas páginas?


Não é fácil para ganhar velocidade, otimizando o código HTML. Na verdade, a otimização do peso das páginas é feita, principalmente, nas imagens e arquivos anexos (som, vídeo, scripts, etc).

Aqui, vou explicar aqui como reduzir, de forma inteligente, o peso das imagens sem perder a qualidade.
Este tutorial utiliza os softwares Pngnq, Optipng e Jpegoptim. Eles estão disponíveis gratuitamente para o Windows (download através do link, exceto o Jpegoptim) e Linux (através dos depósitos de distribuição). Eles são executados em linha de comando. Aqui, eu só falarei dos comandos no Linux.
Para as imagens do tipo imagem/jpeg eu utilizo o The Gimp disponível gratuitamente para todos os sistemas.

No Linux, se os softwares citados não estiverem instalados, consulte a documentação da sua distribuição para instalá-los.


Eu me inspirei nesta dica para criar este tutorial.

2. JPEG ou PNG (ou GIF)?


Estes são três diferentes formatos de imagem que têm suas especificidades, vantagens e desvantagens.

2.1 GIF e PNG: a diferença


Antigamente, o formato GIF era licenciado. E o formato PNG livre foi criado para substituí-lo. Hoje, a única vantagem do GIF são as imagens animadas.
Para as imagens "não-animadas" que tradicionalmente faríamos em formato GIF, é em PNG que vamos salvá-las.

2.2 PNG ou JPEG?


Me inspirei na página do Sebsauvage (em francês). Vou deixá-los ler a seção visando escolher entre GIF/PNG ou JPEG.
Aqui, a escolha é bem mais importante! De fato, os algoritmos de compressão são diferentes e, portanto, os tipos de imagens visados, também.

Basicamente, utilize:
  • a JPEG para as fotos.
  • a PNG para os ícones e, principalmente, para as imagens com texto (incluindo as capturas de tela).

A PNG comprime bem se tiver grandes blocos de cor. Ele exibe junções de cores nítidas (ao contrário da JPEG, que faz cores difusas (uma vantagem às vezes).

Obviamente, utilize a PNG para as imagens parcialmente transparentes. A JPEG não suporta transparência.

3. Otimização dos JPEG

3.1 Lidando com a qualidade (compressão destrutiva)


Na maioria das vezes, os softwares comprimem em "porcentagem". Saiba que uma imagem JPEG com 100% de qualidade utiliza muito espaço. O simples fato de reduzi-la, mesmo que seja a 95% pode, às vezes, reduzir o tamanho pela metade, sem que isso se veja na tela.

Veja o exemplo em uma miniatura de fundo de tela do Ubuntu 8.10: A imagem com qualidade de 100% tem 80.2 KB.

Qualidade: 95% - peso: 42.5 KB

Qualidade: 52% - peso: 8.6 KB


Aqui, a diferença entre as imagens com qualidade de 100 e 95 não é visível. No entanto, o peso é reduzido pela metade.

Podemos determinar um valor onde a qualidade começa a se deteriorar. Para esta foto é de cerca de 50%.
Para esta imagem, portanto, uma diminuição de qualidade de 50% é pouco visível, mas o peso é dividido por 10.

3.1.1 Ajustar a qualidade com o GIMP


Isso acontece ao salvar a sua imagem.

Faça: Arquivo> Salvar como e salve o seu arquivo no formato JPEG, selecionando IMAGEM JPEG na lista abaixo.

Depois, clique em salvar embaixo e a janela abaixo
Aparece

Marque a caixa Exibir a visualização na janela de imagem e você verá a sua imagem com a qualidade e o tamanho do arquivo variar, em tempo real, com o cursor. Teste à vontade.
Quando encontrar a qualidade que lhe convier, salve a imagem.

3.2 Removendo as informações inúteis (não destrutivas)


Para fazê-lo, eu utilizo o software jpegoptim. Ele só está disponível no GNU/Linux (por enquanto?) e o ganho de lugar é não-destrutivo.
Para utilizá-lo, abra um terminal e digite:
jpegoptim *.jpg
Para mais informações sobre a compressão dos Jpeg

4. Otimização das PNG

4.1 Com o GIMP, na criação


Os arquivos PNG têm, muitas vezes, vários milhões de cores, no entanto, algumas nuances são tão próximas umas das outras, que é impossível distingui-las a olho nu. Assim sendo, é possível reduzir o número de cores, a fim de economizar espaço: isto se chama posterização.

Está aqui um exemplo:

Número de cores: 6 141 - posterização: nenhuma peso : 54.2 KB

Número de cores: 95 - posterização: posta em 8 peso : 11.2 KB

Você pode ver as diferenças, se olhamos de perto mas você verá que elas são pequenas ... De qualquer maneira, as diferenças são visíveis porque podemos comparar.

Se só tivéssemos uma das fotos, eu não poderia dizer qual é a imagem e a mais fiel a este pássaro (um pokemon).

A diferença visual é pequena, mas o peso é dividido por 5.

4.1.1 Como fazê-lo?


No GIMP, sua imagem aparece.
Faça: Cores > Posterizar. Uma peque na janela aparece:

Use o cursor para ajustar o nível de posterização. Quanto maior, mais nuances por cor e mais cores. Tente colocar valores "potências de 2", tais como 4, 8, 16, 32 e, se não bastar, 64 ou 128.

Pode ser que a opção "Posterizar" esteja acinzentada. Neste caso, as cores, provavelmente, já estarão indexadas e, assim, a imagem já estará otimizada. Logo, a posterização é desnecessária.
Para ver o número de cores de uma imagem (ainda no The GIMP) faça:
Cores > Informações > análise colorimétrica:

4.2 Com o Pngnq


Tudo é feito, muito facilmente, na linha de comando.
O Pngnq utiliza uma compressão destrutiva de imagens. Isto significa que a qualidade da imagem é degradada.

Às vezes, é melhor não usar apenas o Optipng em vez do Pngnq. Você decide.
Usado sozinho, o Pngnq reduz o tamanho do arquivo de de 50 a 60%.

4.2.1 No Linux:


Abra um terminal e digite:
pngnq minha_imagem.png
Se você tiver um grupo de arquivos a serem otimizados:
pngnq *.png
E se você quiser ver o que faz o software (por curiosidade) :
pngnq -v *.png
A imagem otimizada fica na pasta fonte com um nome terminado por "-nq8".

4.3 Com o Optipng:


O Optipng usa uma compressão não-destrutiva. O software apaga informações desnecessárias das imagens e a qualidade não é afetada.
Em média, ganhamos entre 30% e 40% no tamanho dos arquivos, sem perda de qualidade. Seria um desperdício não utilizá-lo, não?
Veja o resultado de um relatório Optipng sobre a otimização final de 6 arquivos em uma pasta:
Output file size = 614151 bytes (7636 bytes = 1.23% decrease)
Output file size = 385005 bytes (186669 bytes = 32.75% decrease)
Output file size = 62529 bytes (31871 bytes = 33.76% decrease)
Output file size = 204913 bytes (58259 bytes = 22.14% decrease)
Output file size = 83622 bytes (14375 bytes = 14.67% decrease)
Output file size = 272024 bytes (190089 bytes = 41.32% decrease)

4.3.1 No Linux:


O Optipng possui vários algoritmos de otimização. Para que ele faça os testes e aplique o melhor, basta digitar:
optipng minha_imagem.png
Idem no Pngnq, podemos otimizar as imagens por grupos com:
optipng *.png A imagem fonte é otimizada diretamente.

4.3.2 No Windows:


Comece baixando o software aqui. Depois, descompacte o arquivo Zip onde quiser. Vou fazer como se você o tivesse posto no desktop. Tudo é feito em linha de comando:
Abra um terminal: WIN + R e digite "cmd". Uma janela preta se abrirá.
Digite:
cd Desktop
Digamos que você tenha o seu arquivo "image.png" no desktop, basta digitar:
optipng image.png
se você tem várias imagens png no desktop:
optipng *.png
Os arquivos png originais serão otimizados.

4.4 Recapitulação

  • The GIMP e a posterização para diminuir o número de cores (destrutiva)
  • Pngnq para diminuir as cores substituindo as cores menos utilizadas, por outras, bem parecidas e já existentes na imagem. (destrutiva)
  • Optipng para excluir todas as informações inúteis dos arquivos. (não destrutiva)


Utilizar o Optipng em último lugar.

O Optipng não altera a qualidade das imagens. Seria uma pena não aproveitar!

5. Otimização dos SVG

5.1 Remoção do código inútil com o Scour


Na verdade, essas imagens são apenas textos XML em um arquivo externo.

Isto não impede que possamos otimizá-las significativamente. Na verdade, na criação com softwares como o Inkscape ou o Adobe Illustrator, esses softwares preenchem a página com um código totalmente inútil, tipo "made with Inkscape".

O software Scour (escrito em Python) permite, justamente, limpar o código SVG de todos os supérfluos. Na maioria das vezes, ganhamos mais de 50% no tamanho do arquivo
(já me aconteceu até de ganhar 99,2% no tamanho do arquivo, passando de 202 KB para 1,6 KB).

5.1.1 Utilização:


Depois de baixado em sua página, o Scour se apresenta como um arquivo Zip. Descompacte-o, vá para a pasta e faça em um terminal:
python ./scour.py -i input.svg -o output.svg
A imagem fonte será otimizada e ficará no arquivo output.svgd.

6. Capturas de tela


Faço muitas capturas de tela para os meus tutoriais ou minhas explicações. Além disso, as três imagens deste tutorial só fazem 13 KB, ao todo.
Obviamente, elas foram otimizadas com os três métodos acima, mas eu nunca teria conseguido essa redução, se eu não tivesse feito alguns ajustes antes de fazer a captura.

Veja o que você deve saber.

6.1 A suavização do pixel

6.1.1 O que é isso?


A suavização do pixel é uma função que permite suavizar as fontes da tela em telas planas. Eu aconselho que você leia este tutorial, muito bem explicado, no Kioskea.
Como você pode ver isso melhora a legibilidade das fontes, sem essa suavização a leitura em telas planas seria muito desagradável (basta desativá-la para perceber isso).

Como você pode ver nas imagens da explicação, a suavização acrescenta cor ao texto em preto e branco. Isso aumenta consideravelmente o número de cores... Veja você mesmo: (as duas capturas são idênticas e são mostrados exatamente como na tela):

Suavização: Ativada - Número de cores: 96 - Peso: 1 753 bytes



Suavização: Desativada - Número de cores: 6 - Peso: 929 bytes

Neste exemplo, o número de cores foi multiplicado por 16 e o peso da imagem dobrou.
Claro, esse exemplo é exagerado: o número de cores das capturas é minimizado, assim em uma imagem normal, podemos ganhar entre 10% e 15% sobre o tamanho final do arquivo. Se a imagem é uma captura pequena (como essas), você pode ir mais longe (entre 30% e 50%). Nada mau!

Além disso, eu acho a imagem da direita mais nítida e mais agradável de ver.

6.1.2 Como ativá-la/desativá-la?

  • No Windows (XP): clique, com o lado direito do mouse, no desktop > preferências > Aba Aparência > clique em Efeitos, embaixo. Desmarque a casa Utilizar o seguinte método para suavizar as bordas das fontes de tela.

Aplique e Feche.
Para reativá-la, marque a casa novamente e, simplesmente, reponha "ClearType" no menu correspondente.
  • No Gnome (Ubuntu): clique, com o lado direito do mouse, no desktop > Mudar o plano de fundo do desktop > Aba Fontes (Polices) > marque a casa Monochrome na parte "Renderização".

Para reativá-la, ponha o que você tinha antes. Eu marquei a casa "Melhor contraste" e em "Efeitos", eu marquei subpixel (LCD) e total, embaixo.
No Ubuntu, a fonte padrão usada com uma suavização do pixel nula rende muito mal. Melhor instalar fontes livres "liberação". Elas são bonitas, mesmo sem suavização. (basta instalar o pacote <gras>ttf-liberation .

6.2 A sombra do ponteiro do mouse


Aqui também podemos ganhar alguns bytes (quase nada). A sombra é uma adição de nuances. Sempre vinte cores a menos do que na imagem final. No entanto, a posterização é melhor e a imagem resultante é mais nítida se desativamos a sombra.
Isso é feito com o mouse, em "Preferências":
  • Windows: Iniciar> Painel de Controle> Mouse> Aba Ponteiro > desmarque a casa "Ativar a sombra do ponteiro".


Também é possível remover sombras dos menus e, quando utilizamos janelas transparentes (Windows 7 por exemplo, ou certos temas no Linux com o Emerald/Compiz), tente desativar a transparência ou colocar um fundo liso (sempre a fim de reduzir o número de cores).

6.3 O tema das janelas


Isso é super importante!
Nas duas últimas imagens, eu utilizei o tema tradicional do Windows: Não há grandes áreas de cor e muito pouca nuance. Isto é perfeito para o PNG, mas não é bonito.
Eu sei que nossas páginas não são feitas para ser impressas em papel brilhante, mas mesmo assim...
Nesses casos, eu prefiro usar o tema padrão do Windows, mas eu aplico uma posterização forte o suficiente.

No Ubuntu, idem. Alguns temas são melhores que outros. Alguns, pela estética, e outros pelo peso da imagem. Temos que achar um meio termo. Eu gosto do "Human": o resultado não é ruim.

Por exemplo, os temas cinza do Pack Bisigi são muito bonitos e as cores são muito próximas, apesar das nuances.

6.4 Fundo no desktop/fundo de tela


Quando fazemos uma captura de tela do desktop, por exemplo, uma imagem do nosso "menu", é possível que o nosso fundo de tela apareça. Se for para mostrar o seu lindo desktop, ótimo! Mas, se for para dirigir a atenção para o menu Iniciar, o fundo de tela é inútil. Porém, ele será responsável pelo peso da sua imagem.

Exemplo: veja a captura de tela do meu menu no Ubuntu. O primeiro, mantendo a imagem como papel de parede, a segunda, excluindo-a, com um software de desenho:

A imagem possui mais de 5 000 cores e pesa 130 KB.


Agora a imagem só tem 2 000 cores e pesa apenas 26 KB. Ou seja, 5 vezes menos.

O efeito é tão benéfico para o peso da página web, quanto para o usuário: ele não será distraído ( eu não tenho certeza de que este argumento seja muito convincente!)

Bem, se realmente você não quiser usar cor lisa em sua captura, você pode Pixelizar o fundo: isso também reduz o peso da página. Veja este exemplo.

6.5 Recapitulação


Donc, pour une bonne capture d'écran, qui puisse bien s'optimiser par la suite :
  • Desative a suavização das fontes de tela.
  • Remova as sombras (apontador do mouse, menus...)
  • Escolha um tema de janela sóbrio (sem muitas cores, nem muitas nuances)
  • Apague o papel de parede da sua imagem e substitua-o por uma cor lisa.
  • E, novamente, Optipng e Pngnq para otimizar tudo!

7. Conclusão


Bem... acho que está na hora de concluir! Eu acho que já disse tudo. Eu adicionarei novas dicas, caso encontre.

Veja um breve resumo:

7.1 A escolha do formato

  • Escolha o JPEG para as fotos. O JPEG também é uma ótima escolha para o fundo das páginas web.
  • Utilize, ao contrário, o PNG para os ícones, imagens sem nuances, em preto e branco ou as capturas de tela.

7.2 Os JPEG

  • Para otimizar os JPEG, utilizamos a compressão destrutiva dos mesmos. Tente comprimi-los sempre: a compressão de apenas 5% pode reduzir o tamanho do arquivo da imagem pela metade!

Uma compressão inteligente (parar quando a qualidade se deteriora demais) pode reduzir o tamanho do arquivo de 80% e às vezes mais!

7.3 Os PNG

  • Nos editores de imagens (como o The GIMP): utilize a posterização para diminuir o número de nuances nos canais de cores (RVB). Neste caso também, o nível de posterização é visível.
  • Com o Pngnq, podemos reduzir ainda mais o número de cores e a economia de espaço é impressionante (mas, às vezes, a qualidade é reduzida demais). É uma compressão destrutiva.


Concluindo, com o Optipng: apague todas as <gras>informações desnecessárias de suas imagens para ganhar espaço bastante. (20 ~ 30% em média).
O Optipng utiliza uma compressão não destrutiva. O espaço ganho (e a largura de banda) é gratuito! Divirta-se!

7.3.1 Caso das capturas de tela

  • Desativar a suavização sub-pixel.
  • Desative as sombras do apontador do mouse, dos menus, das janelas. Sempre que possível, evite janelas transparentes.
  • Escolha um tema de janela sem muitas nuances e transparência de todas as cores.
  • Se sua imagem contiver um pedaço do seu papel de parede, a menos que seja voluntário, exclua este fundo com um editor de imagens e substitua-o por uma cor lisa. Ou então, utilize um papel de parede com poucas cores.

7.4 Os SVG

  • Como nestas "imagens" só se trata do código XML, ele deve ser válido W3C<gras>.
  • Para reduzir o peso do arquivo, também devemos <gras>remover quaisquer códigos desnecessários contidos no mesmo (comentários, tags automáticos dos softwares de edição...)
  • Na declaração das coordenadas das figuras SVG, não é necessário especificar as coordenadas com 10 casas decimais: a tela é dividida em pixels e não é possível exibir uma ponto entre dois pixels...

Corrigir isso já pode economizar bastante espaço...
O mais importante: Reduzir o número de cores para diminuir o peso da imagem.

Artigo original publicado por Le hollandais volant

Tradução feita por Lucia Maurity y Nouira

Veja também

Publicado por pintuda. Última modificação: 31 de maio de 2011 às 18:27 por pintuda.
Este documento, intitulado 'Otimizar as imagens para a web', está disponível sob a licença Creative Commons. Você pode copiar e/ou modificar o conteúdo desta página com base nas condições estipuladas pela licença. Não se esqueça de creditar o CCM (br.ccm.net) ao utilizar este artigo.