Otimizar imagens para a web e para o desempenho

Resumo

Uma maneira de tornar o teu site mais rápido é torná-lo mais pequeno. Não com letra pequena, mas com menos bytes! Mais de metade do peso de um site médio vem das imagens. E, no entanto, muito poucas pessoas otimizam as imagens para a web e para o desempenho. Está na hora de descobrir quantos bytes consegues poupar!

Texto completo

Otimiza o teu site

Se otimizares o teu site, ele carrega mais depressa. Como muita gente prefere sites rápidos, motores de busca como o Google começaram a medir a velocidade das páginas para determinar a posição do teu site nos resultados de pesquisa.

Tamanho médio de uma página

Apesar de muitos criadores de sites se concentrarem primeiro no HTML e nos scripts, a maior parte do peso de um site médio vem das imagens (Fonte HttpArchive, peso das páginas, setembro de 2018).

Uma otimização eficaz das imagens pode, por isso, ter efeitos incríveis na velocidade do teu site.

O que é a otimização de imagens?

Uma imagem digital é como um tabuleiro de xadrez, um retângulo com 8x8 quadrados pretos e brancos. Se guardasses o tabuleiro sem compressão, escreverias a cor de cada quadrado individualmente ("o quadrado um é branco, o quadrado dois é preto, o quadrado três é branco, o quadrado cinco é preto, etc."). Seriam precisas 64 linhas para descrever o tabuleiro inteiro, o que é rigoroso mas pouco eficiente.

Otimizar uma imagem é encontrar formas mais eficientes de descrever as suas cores. Podias descrever o tabuleiro inteiro numa só linha de texto: "alterna entre preto e branco, começa pelo branco", ou de forma ainda mais eficiente: "repete branco, preto". Nas imagens digitais chama-se compressão: o algoritmo tenta identificar sequências de cores que se repetem.

Existem diferentes algoritmos, todos com pontos fortes e fracos. Uns funcionam melhor em fotografias (com milhões de cores), outros funcionam melhor com imagens com muito menos cores (como um diapositivo de PowerPoint). Escolher o algoritmo certo é o teu primeiro ganho de desempenho.

Formatos de imagem comuns

• JPG é um tipo de ficheiro de imagem muito comum, com compressão eficaz para imagens com muitas cores diferentes, como as fotografias. Este formato existe desde 1992 e é suportado em quase todos os dispositivos.
• GIF é outro tipo de ficheiro de imagem antigo, desenvolvido em 1987. É popular porque suporta animação. Tecnicamente é muito limitado: apenas 256 cores diferentes por imagem.
• PNG foi desenvolvido em 1994 para substituir o GIF, por causa da polémica em torno do algoritmo de compressão do GIF. É popular porque quase todos os dispositivos o suportam e o PNG suporta milhões de cores, incluindo transparência. Permite compressão sem perdas, que garante texto e linhas nítidos, o que torna este formato perfeito para gráficos e logótipos.

Recentemente a Google (WebP) e a Apple (HEIF) introduziram novos formatos de imagem, que oferecem uma compressão ainda melhor do que o JPG, o GIF e o PNG. Mas estes formatos ainda não são amplamente adotados.

Escolher o formato de imagem certo

O melhor formato depende do conteúdo real da tua imagem. Não há uma regra universal que determine o melhor formato para uma dada imagem. O melhor é experimentares tu mesmo e veres o que acontece ao tamanho do ficheiro se guardares a imagem em diferentes formatos. Muitos programas de computador permitem escolher o formato quando selecionas "Guardar como".

Podes começar com JPG para fotografias e PNG para imagens com menos cores, como um logótipo, um gráfico ou um diapositivo de PowerPoint. Formatos como o JPG oferecem diferentes definições de qualidade de compressão, que afetam a qualidade da imagem e o tamanho do ficheiro. Uma definição de qualidade mais baixa diminui a qualidade da imagem a favor de um ficheiro mais pequeno, e deves tentar encontrar um bom equilíbrio entre qualidade e tamanho.

Compressão com perdas e sem perdas

Os algoritmos de compressão que trocam qualidade por tamanho de ficheiro chamam-se algoritmos de compressão com perdas. Já os algoritmos que preservam a qualidade original da imagem chamam-se algoritmos de compressão sem perdas.

Como otimizar imagens

Depois de teres a tua imagem JPG ou PNG, podes otimizá-la escolhendo as definições certas para o algoritmo de compressão. Não te preocupes, não precisas de o fazer à mão: podes usar software de otimização automática para encontrar as melhores definições de compressão para uma dada imagem.

Otimizar imagens JPG

Se usas o Photoshop, podes usar a função integrada Guardar para a Web para obteres uma imagem JPG razoavelmente otimizada.

Ou então podes usar um utilitário de linha de comandos como o jpegoptim. Esta ferramenta reduz os ficheiros JPG otimizando as tabelas de Huffman internas, o que melhora o desempenho do algoritmo de compressão. Em média, podes esperar uma melhoria de 10-15% sem perda de qualidade da imagem.

Outra maneira de otimizar imagens JPG é usar um otimizador online, como o TinyJPG ou o ImageOptim.

Se usas WordPress, podes considerar um plugin que faça a otimização das imagens por ti, como o Imagify da xtremerain.

Otimizar imagens PNG

Os ficheiros PNG podem ser otimizados com o Photoshop, através da função Guardar para a Web. Para otimizares ainda melhor os teus ficheiros PNG, podes usar uma app especializada, como o ImageAlpha para Mac ou o PNGGauntlet para Windows.

Há otimizadores online para ficheiros PNG, como o TinyPNG e o Compressor.io.

Ou então podes usar programas de linha de comandos como o optipng, o pngcrush ou o pngquant. Vale a pena explorar estas ferramentas de PNG um pouco mais a fundo.

Testar optipng vs pngcrush vs pngquant

No meu trabalho como programador web integro a otimização de imagens em sistemas de gestão de conteúdos, para facilitar aos meus clientes que as suas imagens sejam otimizadas automaticamente. Como o número de clientes cresceu bastante, deparei-me com problemas de desempenho.

Para ganhar desempenho, decidi testar o optipng, o pngcrush e o pngquant. Esperava encontrar uma boa otimização de imagens com menos poder de processamento do servidor. Isso melhoraria o desempenho para os meus clientes.

PACE-CME

Um desses clientes é o PACE-CME, um site com recursos de formação cardiovascular para médicos. Este site contém milhares de diapositivos de PowerPoint guardados como ficheiros PNG.

Para testar o desempenho usei uma imagem de teste especial, maior e mais pesada do que um diapositivo de PowerPoint típico. Esta imagem de teste tem alta resolução e conteúdo misto, em parte fotografias, texto e cores sólidas.

Método

Fiz os testes num servidor Intel XEON de quatro núcleos com 8 GB de RAM. Para cada ferramenta de otimização de PNG usei tanto as definições mais extremas (para ver o que conseguia fazer ao tamanho do ficheiro) como a definição predefinida (para ver quanto mais rápidas são as predefinições e como o resultado se compara com as melhores definições de compressão).

Resultados

• imagem de teste original 2897 KB
• optipng extremo (-o7): 2510 KB em 2 minutos e 36 segundos / predefinição: 2536 KB em 4,9 segundos
• pngcrush extremo (-brute): 2510 KB em 1 minuto e 42 segundos / predefinição: 2531 KB em 9,2 segundos
• pngquant extremo (-s 1): 744 KB em 5,2 segundos / predefinição: 746 KB em 4,2 segundos

O desempenho do pngquant é espantoso: é muito mais rápido e ainda por cima produz um ficheiro muito mais pequeno. Não é magia, no entanto, porque usa um algoritmo de compressão diferente, com perdas. Isto significa que as imagens otimizadas com o pngquant perdem um pouco de qualidade. Comparei-as de perto e não notei a diferença.

Conclusão

Otimizar imagens para a web e para o desempenho é mesmo importante. Como mostraram os meus testes, escolher o algoritmo certo pode fazer toda a diferença.

Para mim isso significou escolher o pngquant, mas a tua decisão pode ser diferente, consoante o tipo de imagens que queres otimizar.

A grande lição a tirar deste artigo é, então, que deves dar atenção às imagens. O teu site vai ficar muito mais rápido, e quem não gosta de um site rápido?