DEV Community

No Belt Dev
No Belt Dev

Posted on • Updated on

Aws S3 - Otimizando todas as png de um bucket

Introdução

Após seguir os passos descritos em: Otimizando Imagens PNG. Utilizado na otimização de imagens para a aplicação do 7Belts.

Utilizei o CLI da AWS para poder sincronizar as imagens otimizadas e atualiza-las no bucket do S3.

Para facilitar o entendimento vamos utilizar esses dados como exemplo:

  Perfil: nobeltdev
  Key: SNW3KSNUNS203JSIEK30
  Secret: n+Skg/12hd0912h0hd0921hd09h10dh1dn
  BucketName: nobelt.dev.bucket
  BucketFolder: static # Pasta static onde ficam as imagens estáticas da aplicação.
  Region: us-west-2
Enter fullscreen mode Exit fullscreen mode

Instalar o CLI da AWS:

Vai ser necessário instalar o CLI da aws para poder realizar os passos que fiz para sincronizar as imagens.

No meu caso fiz a instalação para a versão do Ubuntu Linux:
AWS CLI

Configurar o perfil de acesso:

É necessário criar um perfil para o cli poder utilizar as credenciais.

#~/.aws/config
[nobeltdev]
region=us-west-2
output=json
Enter fullscreen mode Exit fullscreen mode
#~/.aws/credentials
[nobeltdev]
aws_access_key_id=SNW3KSNUNS203JSIEK30
aws_secret_access_key=n+Skg/12hd0912h0hd0921hd09h10dh1dn
Enter fullscreen mode Exit fullscreen mode

Selecionando um arquivo ou pasta do Bucket

O comando do aws cli utilizado para copiar um arquivo, de qualquer origem e destino, podendo ser:

  • Origem de um bucket para outro bucket;
  • De um bucket para outro bucket;
  • De bucket para um destino local.

Documentação com maiores detalhamentos do comando cp

$ aws s3 cp <source> <target> [--options]
Enter fullscreen mode Exit fullscreen mode

Exemplo:

$ aws s3 cp s3://nobelt.dev.bucket/folder /local/anypath/static/ --recursive --profile nobelt
Enter fullscreen mode Exit fullscreen mode

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.sh
#!/bin/bash
if [ -z $1 ] ; then
  echo "Error: Necessario 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.

Sincronização para o S3

E para finalmente atualizar os arquivos no S3 basta utilizar o comando do Aws cli:

$ aws s3 sync <source> <target> [--options]
Enter fullscreen mode Exit fullscreen mode
$ aws s3 sync ./static s3://nobelt.dev.bucket/static/ --profile nobeltdev
Enter fullscreen mode Exit fullscreen mode

Top comments (0)