PageSpeed e otimizações de imagens

Estive precisando dar uma otimizada em um sistema web e me lembrei de algumas boas práticas, como cache, compactar imagens, javascript, etc. Foi quando verifiquei que alguém poderia analisar o projeto para eu, alguém com muio mais experiência e foi quando me deparei com Make the Web Faster.

Make the Web Fester é uma iniciativa da Google para analisar e relatar dicas de otimização para websites. Basta colocar a URL do seu site e aguardar a análise. O sistema fornece uma pontuação entre o e 100 para o site informado, duvido muito que alguém alcance 100 pontos pois além de se ter todas as boas práticas em programação e configuração de servidor atendidas, tem que ter uma boa máquina como servidor (não teste seu site em hora de pico)*. É uma boa fonte de estudo pois em cada dica além de explicar a melhoria, faz referência a boas ferramentas. Através dele encontrei boas ferramentas que podem ser úteis a outras pessoas.

Ainda não chequei tudo e também não estudei tudo, entre algumas melhorias que fiz foi a otimização de imagens para serem processadas mais rapidamente. O exemplo que eu trago aqui são as ferramentas para compactar figuras, as vezes podemos ter grandes imagens/fotos sendo utilizadas no site e além de configurar a parte de cache dessas imagens no servidor, também podemos compactá-las.

Encontrei então duas ferramentas (existem outras) úteis. São ferramentas para Linux mas também existem suas variantes para Windows (ou não). As ferramentas por linha de comando são extremamente poderosas pois além de serem rápidas podem ser incluídas em scripts que automatizam grande parte do trabalho. Uma delas é o Jpegoptim aqui e aqui. Jpegoptim é uma ferramenta em linha de comando que otimiza imagens no formato .jpg, depois de baixá-la, descompacte e instale:

tar zxvf programa.tar.gz
./configure
make
make install

O comando é no formato jpegoptim [opções][arquivos]:

jpegoptim -m 75 *.jpg -d diretorio/otimizados

Onde,

  • Parâmetro -m determina a qualidade máxima da imagem otimizada, entre 0 e 100. Utilizei o valor 75 onde o tamanho do arquivo deu uma boa reduzida e não perdi tanta qualidade. Para nossos olhos cerca de 70%, dependendo da qualidade da imagem original, é o suficiente para não notarmos perda da qualidade.
  • Nome do arquivo como *.jpg porque eu gostaria que todas as imagens .jpg do diretório corrente fossem otimizadas.
  • Parâmetro -d determina um diretório para colocar as imagens otimizadas (no meu caso em /diretorio/otimizados). Se não especificar -d, as imagens serão substituídas pelas otimizadas.

A saída (verbose) do comando será qual a porcentagem de otimização/compactação a ferramenta conseguiu efetuar. Mais informações na sua man page.

Para imagens .png uma ferramenta pode ser a OptiPNG. Essa ferramenta basicamente faz o mesmo que jpegoptim, só que pra .png. O comando é na forma optipng [opções][arquivo]:

optipng -o 6 imagem.png > /otimizados
  • Onde, o parâmetro -o é de optimize (auto explicativo). Informei 6 como nível de otimização, essa é a diferença aqui: este comando tenta por algum critério, selecionar o melhor nível de otimização. O esforço para tentar níveis de otimização é determinado por um valor igual ou superior a 0, onde 0 é pouco esforço e valores acima definem toda tentativa possível de otimização (não precisa passar do 6 nas últimas versões da ferramenta).
  • imagem.png é o nome do arquivo.
  • A ferramenta substitui a imagem original pela otimizada e uma opção que encontrei é direcionar a saída do comando para outro lugar (>), no meu caso foi para o diretório /otimizados.

Otimizando uma figura seta_azul.png de exemplo, a saída do comando foi essa (.png ficou 6.99% menor):

optpng

Resultado do comando optipng.

CUIDADO: essas duas ferramentas alteram as permissões do arquivo, sempre cheque as permissões das imagens ao recolocar as mesmas no seu servidor, portanto, nunca substitua diretamente as otimizações.

Existem outras ferramentas por linha de comando como o jpegtran e online que possam lhe ajudar a otimizar imagens como a Online Image Optimizer. Existem outro fator na otimizações que é redimensionar imagens (baixar resolução de imagens), mas não utilizei porque meu ganho de performance seria de 1% então deixei para estudar depois. Um exemplo de ferramenta online disso é a iResize.

* Correção: sistema de avaliação PageSpeed não considera o tempo de resposta das páginas e sim boas práticas.

Anúncios
  • Trackback are closed
  • Comentários (1)
  1. Corrigindo meu post agora com mais experiência: utilizando todas as táticas de otimização, com conhecimento também sobre o TCP além de tecnologias de desenvolvimento, é possível sim chegar aos 100 pontos e deveria ser meta de todos, quanto mais próximo melhor, principalmente se for em mobile =)

Comentários encerrados.
%d blogueiros gostam disto: