#node #opensource #webentwicklung #performance

Bildkomprimierung einfach automatisieren mit Merlin

Die Komprimierung von Grafiken ist ein unstrittiger und kritischer Teil der Performance-Optimierung. Für diese Komprimierung gibt es jede Menge Tools, ob Plugins für Code-Editoren (wie Image Optimizer), Standalone-Apps (wie ImageOptim) oder Skripte (wie die Node-Module der imagemin-Familie). Zwei Probleme bleiben bestehen: Tooling löst nicht das Kontextproblem der Bildkomprimierung, und Automatisierung ist oft unnötig kompliziert.

Das Kontextproblem ist interessant und etwas, an dem wir auch bei sum.cumo noch arbeiten – seine Lösung ist wichtig, um bei der Komprimierung das Maximum herauszuholen.

Das Automatisierungsproblem sind wir nochmal anders angegangen, über einen eigenen Weg. Dieser ermöglicht uns, in sehr verschiedenen Projekten und buchstäblich mit anderthalb Befehlen und einer Zeile Konfiguration das Minimum zumindest für GIFs, JPGs und PNGs zu gewährleisten: automatisierte verlustfreie Komprimierung, die ressourcenschonend ist (es wird geschaut, ob Änderungen Bilder betreffen, und nur dann und garantiert regressionsfrei komprimiert) und welche die Quelldateien selbst ebenfalls verbessert.

Was ist dieser Weg? imagemin-merlin (kurz: Merlin), das wir frei auf GitHub und npm veröffentlicht haben.

Ein Node-Projekt vorausgesetzt, kann man Bildkomprimierung über Merlin wie folgt aufsetzen:

  1. Merlin installieren: npm i -D @sum.cumo/imagemin-merlin (mit folgendem script in der package.json: "imagemin": "imagemin-merlin", zur Ausführung manuell und automatisch).

  2. Git-Hook für pre-commit einrichten (ggf. über Husky): npm run imagemin -- --staged.

Die Dokumentation beschreibt das etwas ausführlicher und erklärt dazu noch weitere Parameter. Der Punkt aber ist, dass Merlin nach Installation und Einrichtung des Hooks sicherstellt, dass GIFs, JPGs und PNGs immer grundkomprimiert sind. Wir haben damit in den letzten Monaten gute Erfahrungen gemacht und die Flanke, dass Grafiken gar nicht komprimiert werden oder erstmal jemand mit Spezialwissen für xyz alles einrichten muss, für uns geschlossen. Wir hoffen, das gelingt euch mit Merlin auch in euren Projekten.

Wir arbeiten an weiteren Verbesserungen, von zusätzlichen Konfigurationsmöglichkeiten bis zu anderen Bildformaten, und werden über größere Neuigkeiten hier (Feed), auf Twitter oder natürlich auf GitHub berichten.