..loading..

Verlustfreie Bildoptimierung (CLI): IMGULT

Posted By Pascal Jordin

|

03. May 2019|07:14 Uhr

Kennst du das Problem, dass einem Google PageSpeed Insights immer anmeckert, die Bilder auf einer Website sind noch zu groß? Ich habe es immer als zu großen Aufwand empfunden jedes kleine Bild nochmal via Photoshop oder anderen Tools zu optimieren. Irgendwann bin ich dann auf dieses kleine aber feine CLI-Tool namens IMGULT gestoßen. Es durchsucht rekursiv nach unterstützten Bildformaten, optimiert diese automatisch und verlustfrei mit der jeweils nötigen Bibliothek. Unterstützte Formate: GIF, JPG, PNG und SVG

Installation

Für die Optimierungen werden einige Abhängigkeiten benötigt, man kann theoretisch auch nur  die gewünschten Pakete  installieren. 

Abhängigkeiten installieren

sudo apt-get update
sudo apt-get install -y jpegoptim optipng pngquant gifsicle exiv2 pkg-config libpng-dev cmake autoconf automake libtool nasm make pkg-config git
npm install -g svgo

Mozjpeg installieren

Die Installation von Mozjpeg hat sich seit der letzten Version etwas geändert. Deswegen sieht der Ablauf wie folgt aus:

cd ~
git clone https://github.com/mozilla/mozjpeg.git
cd mozjpeg
mkdir build && cd build
sudo cmake -G"Unix Makefiles" ../
sudo make install
sudo ln -s /opt/mozjpeg/bin/jpegtran /usr/bin/mozjpeg
cd ~

IMGULT installieren

Schließlich clonen wir uns das Repo von Github und installieren IMGULT in unser local/bin

wget -N https://raw.githubusercontent.com/ryanpcmcquen/image-ultimator/master/imgult; sudo install -m755 imgult /usr/local/bin/; rm imgult

IMGULT Website: https://imgult.github.io/

Optimierung vor/nach Deployment

Händisches optimieren von Bildern ist so 2000! Heute werden solche Befehle einfach mit in den pre-commit hook deiner Entwicklungsumgebung gesetzt oder ins Deployment deines Projektes. So sieht zum Beispiel mein Deploy Script bei Forge für diese Website aus: 

cd /home/forge/jordin.eu
git pull origin master
php please clear:cache
php please search:update
cd site/themes/jordin
npm install 
gulp --production
imgult
cd -
echo "" | sudo -S service php7.3-fpm reload


Wie sieht dein Workflow für solche Aufgaben aus? Kennst du andere Tools die ich mir mal angucken sollte? :) 

Kommentar schreiben