Meine Lieblings-Linux-Befehle zum Optimieren von Webbildern

Früher habe ich mich bei der Online-Arbeit von Bildern ferngehalten. Die Handhabung und Optimierung von Bildern kann sowohl ungenau als auch zeitaufwändig sein.

Dann fand ich einige Befehle, die meine Meinung änderten. Um Webseiten zu erstellen, verwende ich Jekyll, also habe ich das in die Anleitung aufgenommen. Diese Befehle funktionieren jedoch auch mit anderen statischen Site-Generatoren.

Bildbefehle unter Linux

Weitere Linux-Ressourcen

• Spickzettel für Linux-Befehle
• Spickzettel für fortgeschrittene Linux-Befehle
• Kostenloser Online-Kurs:RHEL Technical Overview
• Spickzettel für Linux-Netzwerke
• SELinux-Spickzettel
• Spickzettel für allgemeine Linux-Befehle
• Was sind Linux-Container?
• Unsere neuesten Linux-Artikel

Die Befehle, die für mich den Unterschied gemacht haben, sind optipng , jpegoptim , und natürlich der altehrwürdige imagemagick . Zusammen machen sie die Handhabung von Bildern einfach zu verwalten oder sogar zu automatisieren.

Hier ist eine Übersicht darüber, wie ich meine Lösung mit diesen Befehlen implementiert habe. Ich habe Artikelbilder in meine static/images eingefügt Mappe. Von dort habe ich zwei Kopien aller PNG- und JPG-Bilder generiert:

1. Eine beschnittene Thumbnail-Version im Format 422 x 316
2. Eine größere Bannerversion mit den Maßen 1024 x 768

Dann platzierte ich jede Kopie (das Thumbnail und das Banner) in einem eigenen Ordner und nutzte die benutzerdefinierten Variablen von Jekyll für die Ordnerpfade. Ich beschreibe jeden dieser Schritte im Folgenden ausführlicher.

Installation

Um meiner Lösung zu folgen, stellen Sie sicher, dass Sie alle Befehle installiert haben. Unter Linux können Sie optipng installieren , jpegoptim , und imagemagick mit Ihrem Paketmanager.

Auf Fedora, CentOS, Mageia und ähnlichen:

$ sudo dnf install optipng jpegoptim imagemagick

Unter Debian, Elementary, Mint und ähnlichen:

$ sudo apt install optipng jpegoptim imagemagick

Verwenden Sie unter macOS MacPorts oder Homebrew.

brew install optipng jpegoptim imagemagick

Verwenden Sie unter Windows Chocolatey.

Ordner für Thumbnails und Banner erstellen

Nach der Installation der Befehle habe ich neue Ordner unter static/images erstellt . Generierte Thumbnails werden in img-thumbs platziert , und Banner gehen in img-normal .

$ cd static/images

$ mkdir -p img-thumbs img-normal

Mit den erstellten Ordnern habe ich alle GIF-, SVG-, JPG- und PNG-Dateien in beide Ordner kopiert. Ich verwende die GIFs und SVGs unverändert für Thumbnails und Bannerbilder.

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

Thumbnails verarbeiten

Um die Thumbnails zu skalieren und zu optimieren, verwende ich meine drei Befehle.

Ich verwende das mogrify Befehl von ImageMagick um die Größe der JPGs und PNGs zu ändern. Da ich möchte, dass die Thumbnails 422 x 316 groß sind, sieht der Befehl so aus:

$ cd img-thumbs

$ mogrify -resize 422x316 *.png

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

Jetzt optimiere ich die PNGs mit optipng und die JPGs mit jpegoptim :

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

$ jpegoptim -sq *.jpg

Im obigen Befehl:

• Für optipng , -o5 Schalter legt die Optimierungsstufe fest, wobei 0 die niedrigste ist.
• Für jpegoptim , -s entfernt alle Bildmetadaten und -q setzt den stillen Modus.

Verarbeitung von Bannern

Ich verarbeite die Bannerbilder im Wesentlichen genauso wie die Thumbnails, abgesehen von den Abmessungen, die für Banner 1024 x 768 betragen.

$ 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

Konfigurieren der Pfade in Jekyll

Die img-thumbs Verzeichnis enthält jetzt meine Thumbnails. und img-normal enthält die Banner. Um mir das Leben zu erleichtern, setze ich beide auf benutzerdefinierte Variablen in meiner Jekyll _config.yml .

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

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

Die Verwendung der Variablen ist einfach. Wenn ich das Thumbnail anzeigen möchte, stelle ich content-thumbs-images-path voran zum Bild. Wenn ich das vollständige Banner anzeigen möchte, stelle ich content-images-path voran .

{% 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 %}

Schlussfolgerung

Es gibt mehrere Verbesserungen, die ich an meinen Optimierungsbefehlen vornehmen könnte.

Verwenden von rsync um nur geänderte Dateien nach img-thumbs zu kopieren und img-normal ist eine offensichtliche Verbesserung. Auf diese Weise muss ich Dateien nicht immer wieder neu verarbeiten. Das Hinzufügen dieser Befehle zu Git-Pre-Commit-Hooks oder einer CI-Pipeline ist ein weiterer nützlicher Schritt.

Das Anpassen und Optimieren von Bildern, um ihre Größe zu reduzieren, ist ein Gewinn für den Benutzer und das Web als Ganzes. Vielleicht ist mein nächster Schritt zum Reduzieren der Bildgröße webp.

Weniger über das Kabel übertragene Bytes bedeuten einen geringeren CO2-Fußabdruck, aber das ist ein anderer Artikel. Der UX-Sieg ist erstmal gut genug.

---

Dieser Artikel wurde ursprünglich im Blog des Autors gepostet und mit Genehmigung erneut veröffentlicht.