Pesquisa de site

Meus comandos favoritos do Linux para otimizar imagens da web

Gere imagens redimensionadas e otimizadas para miniaturas e imagens de banner para a web.

Eu costumava ficar longe de imagens quando trabalhava online. O manuseio e a otimização de imagens podem ser imprecisos e demorados.

Então encontrei alguns comandos que me fizeram mudar de ideia. Para criar páginas da web, eu uso Jekyll, então incluí isso nas instruções. No entanto, esses comandos também funcionarão com outros geradores de sites estáticos. 

Comandos de imagem no Linux

Os comandos que fizeram toda a diferença para mim são optipng, jpegoptim e, claro, o venerável imagemagick. Juntos, eles tornam o manuseio de imagens fácil de gerenciar ou até mesmo automatizar.

Aqui está uma visão geral de como implementei minha solução usando esses comandos. Coloquei imagens de artigos na minha pasta static/images. A partir daí, gerei duas cópias de todas as imagens PNG e JPG:

  1. Uma versão em miniatura recortada medindo 422 por 316
  2. Uma versão de banner maior, medindo 1.024 por 768

Em seguida, coloquei cada cópia (a miniatura e o banner) em sua própria pasta e aproveitei as variáveis personalizadas do Jekyll para os caminhos das pastas. Descrevo cada uma dessas etapas com mais detalhes a seguir.

Instalação

Para acompanhar minha solução, certifique-se de ter todos os comandos instalados. No Linux, você pode instalar optipng, jpegoptim e imagemagick usando seu gerenciador de pacotes.

No Fedora, CentOS, Mageia e similares:

$ sudo dnf install optipng jpegoptim imagemagick

No Debian, Elementary, Mint e similares:

$ sudo apt install optipng jpegoptim imagemagick

No macOS, use MacPorts ou Homebrew.

brew install optipng jpegoptim imagemagick

No Windows, use Chocolatey.

Criação de pastas para miniaturas e banners

Após instalar os comandos, criei novas pastas em static/images. As miniaturas geradas são colocadas em img-thumbs e os banners vão em img-normal.

$ cd static/images
$ mkdir -p img-thumbs img-normal

Com as pastas criadas, copiei todos os arquivos GIF, SVG, JPG e PNG para ambas as pastas. Eu uso GIFs e SVGs como estão para miniaturas e imagens de banner.

$ cp content/*.gif img-thumbs/; cp content/*.gif img-normal/
$ cp content/*.svg img-thumbs/; cp content/*.svg img-normal/
$ cp content/*.jpg img-thumbs/; cp content/*.jpg img-normal/
$ cp content/*.png img-thumbs/; cp content/*.png img-normal/

Processando miniaturas

Para redimensionar e otimizar as miniaturas, uso meus três comandos.

Eu uso o comando mogrify do ImageMagick para redimensionar JPGs e PNGs. Como quero que as miniaturas tenham 422 por 316, o comando fica assim:

$ cd img-thumbs
$ mogrify -resize 422x316 *.png
$ mogrify -format jpg -resize 422x316 *.jpg

Agora otimizo os PNGs usando optipng e os JPGs usando jpegoptim:

$ for i in *.png; do optipng -o5 -quiet "$i"; done
$ jpegoptim -sq *.jpg

No comando acima:

  • Para optipng, a opção -o5 define o nível de otimização, sendo 0 o mais baixo.
  • Para jpegoptim, -s remove todos os metadados da imagem e -q define o modo silencioso.

Processando banners

Eu processo as imagens dos banners essencialmente da mesma forma que processo as miniaturas, exceto as dimensões, que são 1024 por 768 para banners.

$ cd ..
$ cd img-normal
$ mogrify -resize 1024x768 *.png
$ mogrify -format jpg -resize 1024x768 *.jpg
$ for i in *.png; do optipng -o5 -quiet "$i"; done
$ jpegoptim -sq *.jpg

Configurando os caminhos no Jekyll

O diretório img-thumbs agora contém minhas miniaturas. e img-normal contém os banners. Para facilitar minha vida, configurei ambos para variáveis personalizadas em meu Jekyll _config.yml.

content-images-path: /static/images/img-normal/
content-thumbs-images-path: /static/images/img-thumbs/

Usar as variáveis é simples. Quando desejo exibir a miniatura, acrescento content-thumbs-images-path à imagem. Quando desejo exibir o banner completo, acrescento content-images-path.

{% if page.banner_img %}
 <img src="{{ page.banner_img | prepend: site.content-images-path | \
prepend: site.baseurl | prepend: site.url }}" alt="Banner image for \
{{ page.title }}" />
{% endif %}

Conclusão

Existem várias melhorias que eu poderia fazer em meus comandos de otimização.

Usar rsync para copiar apenas arquivos alterados para img-thumbs e img-normal é uma melhoria óbvia. Dessa forma, não estou reprocessando arquivos continuamente. Adicionar esses comandos aos ganchos de pré-confirmação do Git ou a um pipeline de CI é outra etapa útil.

Redimensionar e otimizar imagens para reduzir seu tamanho é uma vitória para o usuário e para a web como um todo. Talvez meu próximo passo para reduzir o tamanho das imagens seja o webp.

Menos bytes transmitidos pela rede significam uma menor pegada de carbono, mas isso é outro artigo. A vitória do UX é boa o suficiente por enquanto.

Este artigo foi postado originalmente no blog do autor e republicado com permissão.

Artigos relacionados: