DEV Community

No Belt Dev
No Belt Dev

Posted on • Edited on

Aws S3 - Otimizando todas as png de um bucket

#aws #s3 #otimizar #png

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)