Um tempo atrás, escrevi um artigo sobre os aspectos técnicos de SEO. Um dos leitores traduziu para o francês e trouxe uma dica adicional: minhas imagens naquele texto eram muito grandes.

François foi gentil o suficiente para incluir uma screenshot com as economias que eu poderia ter tido.

Eu costumava ter um fluxo de trabalho no qual eu passava cada imagem pelo ImageOptim para comprimi-las tanto quanto possível. Mas é uma etapa manual que é muito fácil de ignorar.

Então aqui está uma maneira de automatizar isso. Estes dois scripts são executados automaticamente e compactam os arquivos para você, para que você não tenha que pensar sobre eles nunca mais. Eles usam a ferramenta optipng em background.

Por que fazer isso?

Agora, a otimização de imagens é parte do processo de construção ou lançamento. Antes de suas imagens chegarem aos seus servidores, elas estarão em sua forma mais ideal. No entanto, a realidade nem sempre é fácil. Se você executar um site dinâmico como WordPress ou Drupal, qualquer um pode fazer upload de imagens e eles não têm necessariamente os mesmos requisitos para as imagens como você.

Essa técnica pega esses uploads, codifica em um melhor formato e ninguém notará.

Ninguém além de você: o seu servidor usará menos largura de banda e consumirá menos espaço em disco. Essa técnica também processa de forma assíncrona: não há atraso nos uploads, imagens são processadas um tempo depois de serem carregadas.

Instalando o optipng

Comece instalando a ferramenta optipng.

No Red Hat ou CentOS:

$ yum install optipng

No Ubuntu/Debian:

$ apt-get install optipng

Agora, vamos automatizar isso.

Otimizando automaticamente as novas imagens a cada hora

Lembrete de amigo: antes de executar qualquer uma dessas ferramentas, tenha certeza de que você tem backup para poder restaurar, se preciso!

Que fique bem claro: a ferramenta otimiza somente novas imagens. Ela procura por elas, a cada hora, e as processa. Ela não faz o processamento das mesmas imagens repetidamente. A busca quase não exige quaisquer recursos do servidor.

A ferramenta optipng tem um funcionamento muito simples. O comando mais básico é optipng image.png, que otimiza a imagem chamada ‘image.png’ e a substitui no seu servidor (você perde a original!).

Podemos acrescentar alguns parâmetros adicionais que reduzem ainda mais o tamanho, aumentam a taxa de compressão e tiram todas as informações META do arquivo PNG que você não precisa. Aqui está o meu comando atual para o tamanho ideal.

$ optipng -o7 -f4 -strip all -quiet image.png

Isso pega o arquivo chamado ‘image.png’, roda todos os tipos de otimizações sobre ele, tira os metadados e sobrescreve o arquivo com a versão nova e melhorada.

Agora, para executar isso automaticamente no seu servidor, tudo que você precisa é o cronjob a seguir. Deixe-o rodando a cada hora, ele vai pegar todos os arquivos PNG criados na última hora e otimizá-los para você.

$ find htdocs/wp-content/ -mmin -60 -name '*.png' -print0 | xargs -0 optipng -o7 -f4 -strip all -quiet -preserve

Ele essencialmente faz estas coisas:

1. Localiza todos os arquivos *.png no diretório ‘htdocs/wp-content” que foram criados na última hora (esse é o diretório onde WordPress carrega seu conteúdo).

2. Para cada arquivo encontrado, executa o comando optipng neles.

Acrescente no seu crontab e você nunca terá que pensar sobre isso novamente.

$ crontab -l
0 * * * * find ~/htdocs/wp-content/ -mmin -60 -name '*.png' -print0 | xargs -0 optipng -o7 -f4 -strip all -quiet -preserve

Tudo pronto!

Otimizando todas as suas imagens existentes

Se você está pensando em ativar isso apenas depois de ter um monte de arquivos, pode querer executar essa ferramenta em todas as suas imagens – não apenas nas modificados na última hora.

Eu vou me repetir, mas aqui vai: antes de executar isso em todos os seus arquivos, faça backup! Essas configurações substituem o arquivo original, então você não terá mais o original.

$ find ~/htdocs/wp-content/ -name '*.png' -print0 | xargs -0 optipng -o7 -f4 -strip all -quiet -preserve

Esse comando pesquisa todos “arquivos *.png na pasta ~/htdocs/wp-content/ e executa o comando optipng em todos eles.

***

Mattias Geniar faz parte do time de colunistas internacionais do iMasters. A tradução do artigo é feita pela redação iMasters, com autorização do autor, e você pode acompanhar o artigo em inglês no link: https://ma.ttias.be/optimize-size-png-images-automatically-webserver-optipng/