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.
Puis j'ai trouvé quelques commandes qui m'ont fait changer d'avis. Pour créer des pages Web, j'utilise Jekyll, j'ai donc inclus cela dans les instructions. Cependant, ces commandes fonctionneront également avec d'autres générateurs de sites statiques.
Commandes d'image sous Linux
Plus de ressources Linux
- Aide-mémoire des commandes Linux
- Aide-mémoire des commandes Linux avancées
- Cours en ligne gratuit :Présentation technique de RHEL
- Aide-mémoire sur le réseau Linux
- Aide-mémoire SELinux
- Aide-mémoire sur les commandes courantes de Linux
- Que sont les conteneurs Linux ?
- Nos derniers articles 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 rendent la gestion des images facile à gérer ou même à automatiser.
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 :
- Une version miniature recadrée mesurant 422 x 316
- Une version plus grande de la bannière, mesurant 1 024 x 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éer des 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 vont dans 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 bannières.
$ 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 vignettes
Pour redimensionner et optimiser les vignettes, j'utilise mes trois commandes.
J'utilise le 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 en utilisant jpegoptim :
$ for i in *.png; do optipng -o5 -quiet "$i"; done
$ jpegoptim -sq *.jpg
Dans la commande ci-dessus :
- Pour
optipng,-o5switch définit le niveau d'optimisation, 0 étant le plus bas. - Pour
jpegoptim,-ssupprime toutes les métadonnées de l'image, et-qdéfinit le mode silencieux.
Traitement des bannières
Je traite les images de bannière essentiellement de la même manière que je traite les vignettes, à l'exception des 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
Configuration des chemins dans Jekyll
Les img-thumbs répertoire contient maintenant mes vignettes. et img-normal contient les bannières. Pour me faciliter la vie, j'ai défini les deux 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. Lorsque 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
Je pourrais apporter plusieurs améliorations à mes commandes d'optimisation.
Utilisation de rsync pour copier uniquement les fichiers modifiés dans 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é-validation 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 suffisante pour le moment.
Cet article a été initialement publié sur le blog de l'auteur et a été republié avec son autorisation.