Mes commandes Linux préférées pour optimiser les images Web

J’avais l’habitude de rester à l’écart des images lorsque je travaillais en ligne. La gestion et l’optimisation des images peuvent être à la fois imprécises et chronophages.

Ensuite, j’ai trouvé des commandes qui m’ont fait changer d’avis. Pour créer des pages Web, j’utilise Jekyll, donc je l’ai inclus dans les instructions. Cependant, ces commandes fonctionneront également avec d’autres générateurs de sites statiques.

Commandes d’images sous Linux

Les commandes qui ont fait toute la différence pour moi sont optipng, jpegoptim, et, bien sûr, le vénérable imagemagick. Ensemble, ils facilitent la gestion des images, voire leur automatisation.

Voici un aperçu de la façon dont j’ai implémenté ma solution à l’aide de ces commandes. J’ai placé des images d’articles dans mon static/images dossier. À partir de là, j’ai généré deux copies de toutes les images PNG et JPG :

1. Une version miniature recadrée mesurant 422 par 316
2. Une version de bannière plus grande, mesurant 1024 par 768

Ensuite, j’ai placé chaque copie (la vignette et la bannière) dans son propre dossier et j’ai utilisé les variables personnalisées de Jekyll pour les chemins de dossier. Je décris chacune de ces étapes plus en détail ci-dessous.

Installation

Pour suivre ma solution, assurez-vous que toutes les commandes sont installées. Sous Linux, vous pouvez installer optipng, jpegoptim, et imagemagick en utilisant votre gestionnaire de paquets.

Sur Fedora, CentOS, Mageia et similaires :

$ sudo dnf install optipng jpegoptim imagemagick

Sur Debian, Elementary, Mint et similaires :

$ sudo apt install optipng jpegoptim imagemagick

Sur macOS, utilisez MacPorts ou Homebrew.

brew install optipng jpegoptim imagemagick

Sous Windows, utilisez Chocolatey.

Création de dossiers pour les vignettes et les bannières

Après avoir installé les commandes, j’ai créé de nouveaux dossiers sous static/images. Les vignettes générées sont placées dans img-thumbs, et les bannières entrent img-normal.

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

Une fois les dossiers créés, j’ai copié tous les fichiers GIF, SVG, JPG et PNG dans les deux dossiers. J’utilise les GIF et les SVG tels quels pour les vignettes et les images de bannière.

$ 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/

Traitement des miniatures

Pour redimensionner et optimiser les vignettes, j’utilise mes trois commandes.

Je utilise l mogrify commande de ImageMagick pour redimensionner les JPG et PNG. Puisque je veux que les vignettes soient 422 par 316, la commande ressemble à ceci :

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

Maintenant, j’optimise les PNG en utilisant optipng et les JPG utilisant jpegoptim:

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

Dans la commande ci-dessus :

• Pour optipng, -o5 switch définit le niveau d’optimisation, 0 étant le plus bas.
• Pour jpegoptim, -s supprime toutes les métadonnées de l’image, et -q définit le mode silencieux.

Traitement des bannières

Je traite les images des bannières essentiellement de la même manière que je traite les vignettes, à part les dimensions, qui sont de 1024 par 768 pour les bannières.

$ 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

Configurer les chemins dans Jekyll

le img-thumbs répertoire contient maintenant mes vignettes. et img-normal contient les bannières. Pour me faciliter la vie, je les ai tous deux définis sur des variables personnalisées dans mon Jekyll _config.yml.

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

L’utilisation des variables est simple. Quand je veux afficher la vignette, je préfixe content-thumbs-images-path à l’image. Lorsque je veux afficher la bannière complète, je préfixe 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 %}

Conclusion

Il y a plusieurs améliorations que je pourrais apporter à mes commandes d’optimisation.

Utilisant rsync pour copier uniquement les fichiers modifiés vers img-thumbs et img-normal est une amélioration évidente. De cette façon, je ne retraite pas les fichiers encore et encore. L’ajout de ces commandes aux hooks de pré-commit Git ou à un pipeline CI est une autre étape utile.

Redimensionner et optimiser les images pour réduire leur taille est une victoire pour l’utilisateur et le Web dans son ensemble. Peut-être que ma prochaine étape pour réduire la taille des images sera webp.

Moins d’octets transmis sur le fil signifie une empreinte carbone plus faible, mais c’est un autre article. La victoire UX est assez bonne pour le moment.

Cet article a été initialement publié sur le le blog de l’auteur et a été republié avec autorisation.