Unterstützung für neue Codecs, aktualisiertes Design und CLI-Unterstützung
Squoosh ist eine App zur Bildkomprimierung, die unser Team entwickelt hat und die auf dem Chrome Dev Summit 2018 vorgestellt wurde. Wir haben sie entwickelt, um das Experimentieren mit verschiedenen Bild-Codecs zu erleichtern und die Möglichkeiten des modernen Webs zu demonstrieren.
Heute veröffentlichen wir ein großes Update für die App mit Unterstützung für weitere Codecs, einem neuen Design und einer neuen Möglichkeit, Squoosh über die Befehlszeile zu verwenden: Squoosh CLI.
Unterstützung für neue Codecs
Neben den Codecs, die von Ihrem Browser nativ unterstützt werden, unterstützen wir jetzt auch OxiPNG, MozJPEG, WebP und AVIF. Ein neuer Codec wurde wieder durch die Verwendung von WebAssembly ermöglicht. Durch das Kompilieren eines Codec- Encoders und -Decoders als WebAssembly-Modul können Nutzer auch dann auf neuere Codecs zugreifen und mit ihnen experimentieren, selbst wenn ihr bevorzugter Browser sie nicht unterstützt.
Einführung von Squoosh über die Befehlszeile
Seit der ursprünglichen Einführung im Jahr 2018 war es ein häufiger Wunsch der Nutzer, programmatisch ohne Benutzeroberfläche mit Squoosh zu interagieren. Wir waren uns nicht sicher, ob wir diesen Weg einschlagen sollten, da unsere App eine Benutzeroberfläche für befehlszeilenbasierte Codec-Tools war. Wir verstehen jedoch den Wunsch, mit dem gesamten Paket von Codecs anstelle von mehreren Tools zu interagieren. Genau das bietet Squoosh CLI.
Sie können die Betaversion der Squoosh CLI installieren, indem Sie npm i @squoosh/cli ausführen, oder sie
direkt mit npx @squoosh/cli [parameters] ausführen.
Die Squoosh CLI ist in Node geschrieben und verwendet genau dieselben WebAssembly-Module wie die PWA
verwendet. Durch die umfangreiche Verwendung von Workern werden alle Bilder parallel decodiert, verarbeitet und codiert.
Wir verwenden auch Rollup, um alles in einer JavaScript-Datei zu bündeln, damit die Installation über
npx schnell und nahtlos erfolgt. Die CLI bietet auch eine automatische Komprimierung, bei der die
Qualität eines Bildes so weit wie möglich reduziert wird, ohne die visuelle Wiedergabe zu beeinträchtigen
(mit der Butteraugli-Metrik).
Mit der Squoosh CLI können Sie die Bilder in Ihrer Web-App in mehrere Formate komprimieren und mit dem
<picture> Element
den Browser die beste Version auswählen lassen. Wir planen auch,
Plug-ins für Webpack, Rollup und andere Build-Tools zu entwickeln, um die Bildkomprimierung
zu einem automatischen Teil des Build-Prozesses zu machen.
Änderung des Build-Prozesses von Webpack zu Rollup
Dasselbe Team, das Squoosh entwickelt hat, hat dieses Jahr viel Zeit mit der Analyse von Build-Tools für den Tooling Report verbracht und beschlossen, den Build-Prozess von Webpack zu Rollup zu wechseln.
Das Projekt wurde ursprünglich mit Webpack gestartet, weil wir es als Team ausprobieren wollten. Zu der Zeit im Jahr 2018 war Webpack das einzige Tool, das uns genügend Kontrolle gab, um das Projekt so einzurichten, wie wir es wollten. Im Laufe der Zeit haben wir festgestellt, dass das einfache Plug-in-System und die Einfachheit von Rollup mit ESM es zu einer natürlichen Wahl für dieses Projekt gemacht haben.
Aktualisiertes Design der Benutzeroberfläche
Wir haben auch das Design der Benutzeroberfläche der App aktualisiert und blobs als visuelles Element eingeführt. Das ist ein kleiner
Wortwitz darauf, wie wir Daten in unserem Code behandeln. Squoosh übergibt Bilddaten als Blob, daher war es
naheliegend, einige Blobs in das Design aufzunehmen.
Auch die Farbverwendung wurde verfeinert, sodass die Farbe mehr als nur ein Akzent ist, sondern auch ein Vektor, um zu unterscheiden und zu verstärken, welches Bild im Kontext der Optionen steht. Insgesamt ist die Startseite etwas lebendiger und das Tool selbst etwas klarer und prägnanter.
Wie geht es weiter?
Wir planen, weiter an Squoosh zu arbeiten. Wenn das neue Bildformat veröffentlicht wird, möchten wir unseren Nutzern eine Möglichkeit bieten, mit dem Codec zu experimentieren, ohne viel Aufwand zu betreiben. Wir hoffen auch, die Verwendung von Squoosh CLI zu erweitern und sie stärker in den Build-Prozess einer Web-App zu integrieren.
Squoosh war schon immer Open Source, aber wir haben uns nie darauf konzentriert, die Community zu vergrößern. Im Jahr 2021 planen wir, die Anzahl der Mitwirkenden zu erhöhen und einen besseren Onboarding-Prozess für das Projekt zu entwickeln.
Haben Sie Ideen für Squoosh? Dann teilen Sie uns diese bitte in unserer Problemverfolgung mit. Das Team geht in eine längere Winterpause, aber wir melden uns im neuen Jahr wieder bei Ihnen.