Otimizando Imagens PNG

Introdução

Uma demanda que surgiu no 7Belts foi da otimização e redução de tamanho das imagens, que são armazenadas na AWS S3, para melhorar a velocidade de renderização da aplicação e melhorar a experiência do usuário.

O optimize-png-images é um script bash utilizado em sistema unix para compactar imagens png sem quase perder a qualidade da imagem original.

Github - Optimize Png Images

Otimização dos arquivos PNG

Para otimizar as imagens utilizei 2 cli:

• optipng - Otimiza um png sem perder nenhuma informação;
• pngnq - Quantiza imagens em PNG em formato 8 bit RGBA.

Script de otimização

Criei o script optimize-png.sh que recebe como parâmetro um pasta que possuí imagens png e vai otimiza-los reduzindo seus tamanhos sem quase nenhum efeito.
O script também irá varrer todos os arquivos png das subpastas.

# optimize-png-images.sh
#!/bin/bash
if [ -z $1 ] ; then
  echo "Error: Necessário informar um path contendo imagens png!" && exit 1;
fi
pngnq $(find $1 -type f -name '*.png') -e -temp.png  # Realiza a quantização
rm $(find $1 -type f -name '*.png' | grep -v "\-temp.png") # Remove os antigos arquivos
find $1 -type f -name '*.png' | grep "\-temp.png" | awk -F '-temp.png' '{print "mv "$1"-temp.png "$1".png"}' > temp-script.sh # Cria um script temporário que removerá os sufixo "-temp"
sh temp-script.sh # Executa o script temporário
rm temp-script.sh # Remove o script temporário
optipng $(find $1 -type f -name '*.png') # Otimiza o resultado

Exemplo de resultado

Exemplo real da aplicação do script. Utilizo ele na pasta static que guardam as imagens utilizadas numa aplicação web:

O resultado foi a redução de 2.7Mb -> 1.2Mb, redução de 44% do tamanho total.