Verbesserte PNG-Optimierung durch Pngquant-Integration

Kevin van Zonneveld

Mitgründer · Amsterdam, Niederlande · Bio anzeigen

Update: Dieser Artikel beschreibt das Release von 2014. Der unten gezeigte Parameter png_tool wurde 2015 entfernt. Für aktuelle Integrationen nutzen Sie die /image/optimize-Dokumentation; lossy: true aktiviert die verlustbehaftete PNG-Optimierung. Das historische Beispiel unten ist mit der aktuellen API nicht gültig.

Einige Kunden haben angemerkt, dass unsere PNG-Optimierung unterdurchschnittlich sei. Obwohl wir die Größe großer PNGs bereits um den Faktor acht reduzieren konnten, berichteten diese Kunden, dass spezialisierte Dienste wie TinyPNG⁠ und kraken.io⁠ noch bessere Ergebnisse lieferten, insbesondere bei kleineren Bildern.

Wenn diese Dienste größere Einsparungen erzielen können, sollten wir das natürlich ebenfalls anstreben.

Wir haben verschiedene Tools untersucht und sind schließlich bei pngquant⁠ gelandet. Heute veröffentlichen wir es als Erweiterung für unseren bestehenden Robot /image/optimize. Wir machen pngquant jedoch nicht zum Standard, da dies nicht nur die Abwärtskompatibilität brechen würde, sondern auch, weil dieses Tool keine Metadaten erhalten kann.

Metadaten zu erhalten gilt als gutes Verhalten im Internet, da sie Urheberrechtsangaben enthalten können. Das ist auch der Grund, warum wir es, wenn Sie sich für pngquant entscheiden, verpflichtend machen, die Option preserve_meta_data auf false zu setzen, zusätzlich zur Angabe von png_tool. Wir möchten vermeiden, dass Nutzer versehentlich Eigentumsinformationen aus ihren Dateien entfernen.

So könnte ein Step in Ihren Templates aussehen:

optimize: {
  robot             : "/image/optimize",
  use               : ":original",
  preserve_meta_data: false,
  png_tool          : "pngquant"
}

Wie bei allen Robots können Sie diesen Robot direkt auf einen anderen aufsetzen, wie LEGO®. So werden Ihre Video-Thumbnails, hochgeladenen Avatare usw. automatisch optimiert gespeichert.

Nachdem wir diese neue Funktion mit einigen unserer Kunden getestet hatten, erreichten wir Reduzierungen von 65 % bei mittelgroßen Bildern, was nur wenige Punkte von Diensten wie TinyPNG und kraken.io entfernt ist.

Simon⁠ von Yarnee sagte dazu Folgendes:

Mit Yarnee können Sie Sammlungen von Medien anlegen, die in feedbasierten Diensten wie Facebook sonst verloren gehen würden. Wir haben bereits den Robot /html/convert von Transloadit genutzt, um Vorschauen zu erfassen, doch um von Facebook akzeptiert zu werden, mussten sie verkleinert werden. Mit der neuen Komprimierung von Transloadit hat das hervorragend funktioniert!

Wir werden die Optimierung natürlich fortsetzen, um auch die letzten Prozente herauszuholen, aber wir wollten Ihnen die Neuigkeit schon heute mitteilen. 😄

Viel Spaß!