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)

DEV

Thank you.

 
Thanks for visiting DEV, we’ve worked really hard to cultivate this great community and would love to have you join us. If you’d like to create an account, you can sign up here.