DEV Community

No Belt Dev
No Belt Dev

Posted on • Edited on

1

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
Enter fullscreen mode Exit fullscreen mode

Exemplo de resultado

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

Resultado da aplicação do script

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

Heroku

This site is built on Heroku

Join the ranks of developers at Salesforce, Airbase, DEV, and more who deploy their mission critical applications on Heroku. Sign up today and launch your first app!

Get Started

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs