I miei comandi Linux preferiti per l'ottimizzazione delle immagini web

Ero solito stare lontano dalle immagini quando lavoravo online. La gestione e l'ottimizzazione delle immagini possono essere imprecise e richiedere molto tempo.

Poi ho trovato alcuni comandi che mi hanno fatto cambiare idea. Per creare pagine web, utilizzo Jekyll, quindi l'ho incluso nelle istruzioni. Tuttavia, questi comandi funzioneranno anche con altri generatori di siti statici.

Comandi immagine su Linux

Più risorse Linux

• Comandi Linux cheat sheet
• Cheat sheet sui comandi avanzati di Linux
• Corso online gratuito:Panoramica tecnica RHEL
• Cheat sheet della rete Linux
• Cheat sheet di SELinux
• Cheat sheet dei comandi comuni di Linux
• Cosa sono i container Linux?
• I nostri ultimi articoli su Linux

I comandi che hanno fatto la differenza per me sono optipng , jpegoptim e, naturalmente, il venerabile imagemagick . Insieme, rendono la gestione delle immagini facile da gestire o addirittura automatizzare.

Ecco una panoramica di come ho implementato la mia soluzione utilizzando questi comandi. Ho inserito le immagini degli articoli nel mio static/images cartella. Da lì, ho generato due copie di tutte le immagini PNG e JPG:

1. Una versione in miniatura ritagliata che misura 422 per 316
2. Una versione banner più grande, che misura 1024 per 768

Quindi ho posizionato ciascuna copia (la miniatura e il banner) nella propria cartella e ho sfruttato le variabili personalizzate di Jekyll per i percorsi delle cartelle. Descrivo ciascuno di questi passaggi in modo più dettagliato di seguito.

Installazione

Per seguire la mia soluzione, assicurati di aver installato tutti i comandi. Su Linux, puoi installare optipng , jpegoptim e imagemagick utilizzando il tuo gestore di pacchetti.

Su Fedora, CentOS, Mageia e simili:

$ sudo dnf install optipng jpegoptim imagemagick

Su Debian, Elementary, Mint e simili:

$ sudo apt install optipng jpegoptim imagemagick

Su macOS, usa MacPorts o Homebrew.

brew install optipng jpegoptim imagemagick

Su Windows, usa Chocolatey.

Creazione di cartelle per miniature e banner

Dopo aver installato i comandi, ho creato nuove cartelle in static/images . Le miniature generate vengono inserite in img-thumbs e i banner vanno in img-normal .

$ cd static/images

$ mkdir -p img-thumbs img-normal

Con le cartelle create, ho copiato tutti i file GIF, SVG, JPG e PNG in entrambe le cartelle. Uso le GIF e gli SVG così come sono per le miniature e le immagini dei 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/

Elaborazione delle miniature

Per ridimensionare e ottimizzare le miniature, utilizzo i miei tre comandi.

Uso il mogrify comando da ImageMagick per ridimensionare JPG e PNG. Poiché voglio che le miniature siano 422 per 316, il comando è simile al seguente:

$ cd img-thumbs

$ mogrify -resize 422x316 *.png

$ mogrify -format jpg -resize 422x316 *.jpg

Ora ottimizzo i PNG usando optipng e i JPG usando jpegoptim :

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

$ jpegoptim -sq *.jpg

Nel comando sopra:

• Per optipng , -o5 switch imposta il livello di ottimizzazione, dove 0 è il più basso.
• Per jpegoptim , -s rimuove tutti i metadati dell'immagine e -q imposta la modalità silenziosa.

Elaborazione banner

Elaboro le immagini dei banner essenzialmente nello stesso modo in cui elaboro le miniature, a parte le dimensioni, che sono 1024 per 768 per i banner.

$ 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

Configurazione dei percorsi in Jekyll

I img-thumbs la directory ora contiene le mie miniature. e img-normal contiene gli striscioni. Per semplificarmi la vita, ho impostato entrambi su variabili personalizzate nel mio Jekyll _config.yml .

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

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

Usare le variabili è semplice. Quando voglio visualizzare la miniatura, antepongo content-thumbs-images-path all'immagine. Quando voglio visualizzare il banner completo, antepongo 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 %}

Conclusione

Ci sono diversi miglioramenti che potrei apportare ai miei comandi di ottimizzazione.

Usando rsync per copiare solo i file modificati in img-thumbs e img-normal è un evidente miglioramento. In questo modo, non sto rielaborando i file più e più volte. L'aggiunta di questi comandi agli hook di precommit di Git o a una pipeline CI è un altro passaggio utile.

Il ridimensionamento e l'ottimizzazione delle immagini per ridurne le dimensioni è una vittoria per l'utente e per il Web nel suo insieme. Forse il mio prossimo passo per ridurre le dimensioni delle immagini sarà webp.

Meno byte trasmessi via cavo significano una minore impronta di carbonio, ma questo è un altro articolo. La vittoria UX è abbastanza buona per ora.

Questo articolo è stato originariamente pubblicato sul blog dell'autore ed è stato ripubblicato con il permesso.