Permalink

Optimize PNG: Bildkomprimierung mittels pngquant, advpng und Keyboard Maestro

Eine meiner goldenen Regeln beim Bloggen ist die Darstellung von verhältnismäßig vielen Screenshots. Zum einen ergänzt es geschriebene Artikel. Zum anderen macht es die vorgestellte App oder auch Hardware für den Leser greifbarer.

Viele Screenshots wirken sich allerdings oft nachteilig auf die Ladezeiten im Browser aus. Und das erst recht, wenn man so wie ich auf das PNG-Format schwört. Daher ist es umso wichtiger, dass man Bilder vor der Veröffentlichung optimiert.

Viele Bildbearbeitungsprogramme wie Pixelmator (Pro), Acorn oder Affinity Photo bieten schon out-of-the-box für Bilder einen Webexport an, die meiner Meinung nach aber allesamt maximal nur für den schnellen Wurf zu gebrauchen sind. Besser eignen sich kostenlose Tools wie ImageOptim oder ImageAlpha, die Bilder bei gleichbleibender Qualität wesentlich effizienter optimieren bzw. komprimieren.

Gerade ImageAlpha hat sich bei mir in den letzten Jahren als Killerapp etabliert. Eine der Grundlagen dieser App ist ein Kommandozeilentool namens pngquant, das man auch ganz ohne GUI direkt von seiner Webseite oder mittels Homebrew installieren kann.

Im Gegensatz zu ImageAlpha hat man mit pngquant in der Kommandozeile wesentlich mehr Möglichkeiten, was sich schlussendlich in eine noch bessere Bildkompression bei nahezu gleicher Bildqualität niederschlägt.

Damit man nun nicht alle Optionen von pngquant auswendig lernen und für den Batchbetrieb aufwendig ins Terminal eingeben muss, kommt die Allzweckwaffe Keyboard Maestro zum Einsatz.

Einzige Voraussetzung sind der Import eines fertigen Macros und die Installation von pngquant. Dazu muss die Variable ENV_PATH in den Einstellungen von Keyboard Maestro auf den binary Pfad von Homebrew (normalerweise /usr/local/bin) zeigen.

brew install pngquant

Anschließend markiert man eine oder mehrere PNG, TIFF, GIF oder BMP Dateien im Finder und startet das Macro (beispielsweise) mittels eines in KM definierten Shortcuts.

Der daraufhin aufpoppende Setup Dialog ist im Prinzip ein gepimptes ImageAlpha. Nun sind alle in pngquant verfügbaren Optionen in einer GUI sichtbar und können nach Belieben angepasst werden.

Neben der eigentlichen Bildqualität kann man beispielsweise das Dithering, die Geschwindigkeit oder auch das Anhängen eines Suffixes an das neu komprimierte Bild festlegen.

Interessant ist noch die Möglichkeit die Dateigröße des Bildes, nachdem die Komprimierung mit pngquant abgeschlossen ist, mit AdvanceCOMP weiter zu optimieren.

Bei diesem Tool, das zur Nutzung natürlich auch erst mal wieder installiert sein muss (Stichwort Homebrew), handelt es sich um einen Deflate-Encoder, der bei der Kompression von PNG-Dateien oft noch bessere Ergebnisse liefert. Im Optimalfall sind hier zusätzliche 5 bis 20% (verlustfrei) bei der Dateigröße herauszuholen. Das ist super, geht zu Lasten der Geschwindigkeit.

brew install advancecomp

Abschließend kann man die nun (fast) fertig komprimierten Bilder noch automatisiert an ImageOptim übergeben, um die wirklich letzten Bytes aus der Datei herauszuquetschen.

Es lohnt sich übrigens auch mal ein Blick in das importierte Macro. Hier sieht man mal, wie komplex Workflows in Keyboard Maestro sein können und vor allem wie viel Zeit man mit ihnen im Vergleich zum Fußweg über das Terminal (zumindest in diesem Fall) sparen kann.

Schlussendlich kann man festhalten, dass sich durch die zusätzlichen Optionen, die dieses Macro gegenüber ImageAlpha bietet, im Schnitt zusätzliche 10 bis 20% bei der Dateigröße einsparen lassen.

-> https://forum.keyboardmaestro.com/t/png-optimizer

Permalink

ImageOptim · Kostenlose Bildoptimierung unter macOS

Ich persönlich arbeite beim Bloggen vergleichsweise viel mit Bildern; hauptsächlich natürlich Screenshots.

Viele dieser Bilder enthalten Metadaten, wie etwa GPS Informationen, Farbprofile oder die Seriennummer der Kamera, die durch ihren teilweise privaten Charakter nicht immer erforderlich sind und somit entfernt werden können. Zusätzlich bietet sich für die Veröffentlichung von Bildern im Web eine Bildkomprimierung an, um die Dateigröße der Bilder möglichst klein zu halten.

Da diese Bildoptimierungen per Hand recht mühselig sein können, empfiehlt sich unter macOS der Einsatz der kostenlosen App ImageOptim.

Bildschirmfoto 2016-10-24 um 13.50.50-minishadow

Die Funktionsweise der App ist simpel: man muss einfach markierte Bilder per drag’n’drop in ImageOptim fallen lassen. Die Magie passiert danach automatisch.

Was sich hinter dieser Magie versteckt, kann man recht detailliert mit Blick in den Einstellungen der App nachvollziehen.

Im Allgemein-Reiter lässt sich, nach PNG und JPEG getrennt, die Entfernung der Metadaten aktivieren bzw. deaktivieren. Dazu lassen sich Dateiberechtigungen, –attribute und Hardlinks entfernen oder auch erhalten.

Bildschirmfoto 2016-10-24 um 13.51.30

Im Qualität-Reiter sind Angaben zur Bildkomprimierung möglich. Hier vereinigt ImageOptim verschiedenste (im Allgemein-Reiter zu aktivierende) open source Tools, die in Kombination sicherstellen, dass man immer die kleinste Dateigröße als Ergebnis bekommt.

Neben der allgemeinen Qualität für PNG-, JPEG- und GIF-Dateien (hier habe ich mit jeweils 80% gute Erfahrungen gemacht), kann man auch die verlustbehaftete Komprimierung aktivieren. Dabei handelt es sich um eine sehr aggressive Bildoptimierung, die in Sachen Dateigröße zwar sehr gute Ergebnisse liefert aber auch einen gewissen Qualitätsverlust nach sich zieht. Daher etwas Vorsicht mit dieser Einstellung.

Im Reiter Geschwindigkeit kann man zudem den Optimierungsgrad festlegen.

2016-10-24 16_15_14

Wie nutze ich ImageOptim?

In der Regel sammele ich erst einmal Screenshots oder erstelle ein GIF in Verzeichnis X. Anschließend markiere ich alle Dateien und nutze das Instand-Send Feature von LaunchBar, um diese Dateien an ImageOptim zu übergeben. Wie oben im Video zu sehen braucht es anschließend für die schon angesprochene Magie nur ein paar Sekunden.

Eine Einsparung bei der Dateigröße von 60 bis 80% sind bei kaum sichtbarem Qualitätsverlust keine Seltenheit. Dabei ist es auch unerheblich, ob es sich um eine PNG-, JPEG- oder GIF-Datei handelt.

Der Source Code zu ImageOptim ist bei Github zu finden. Zur Installation wir OS X 10.8 Mountain Lion minimal vorausgesetzt.

-> https://imageoptim.com