Neue Codecs-Unterstützung, aktualisiertes Design und Befehlszeilen-Unterstützung.
Squoosh ist eine App zur Bildkomprimierung, die unser Team entwickelt und auf dem Chrome Dev Summit 2018 vorgestellt und vorgestellt hat. Es soll das Experimentieren mit verschiedenen Bild-Codecs erleichtern und die Möglichkeiten des modernen Webs demonstrieren.
Heute veröffentlichen wir ein großes App-Update mit mehr Unterstützung für Codecs, einem neuen Design und einer neuen Möglichkeit zur Verwendung von Squoosh in der Befehlszeile: Squoosh CLI.
Neue Codecs-Unterstützung
Neben den nativ im Browser unterstützten Codecs werden jetzt auch OxiPNG, MozJPEG, WebP und AVIF unterstützt. Durch WebAssembly wurde wieder ein neuer Codec ermöglicht. Durch das Kompilieren eines Codec-Encoders und -Decodierers als WebAssembly-Modul können Nutzer auf neuere Codecs zugreifen und mit ihnen experimentieren, auch wenn sie von ihrem bevorzugten Browser nicht unterstützt werden.
Die Befehlszeile, Squoosh!
Seit der Einführung im Jahr 2018 wurden Nutzer häufig gebeten, mit Squoosh programmatisch ohne Benutzeroberfläche zu interagieren. Wir hatten ein gewisses Konfliktpotenzial in Bezug auf diesen Weg, da unsere App eine UI auf Basis befehlszeilenbasierter Codec-Tools war. Wir verstehen jedoch den Wunsch, mit dem gesamten Codecspaket zu interagieren, anstatt mit mehreren Tools. Mit Squoosh CLI ist genau das möglich.
Sie können die Betaversion der Squoosh CLI installieren, indem Sie npm i @squoosh/cli ausführen oder direkt mit npx @squoosh/cli [parameters].
Die Squoosh-Befehlszeile ist in Node geschrieben und verwendet genau dieselben WebAssembly-Module, die die PWA verwendet. Durch die umfassende Verwendung von Workern werden alle Bilder parallel decodiert, verarbeitet und codiert.
Außerdem verwenden wir Rollup, um alles in einer JavaScript-Datei zu bündeln, um die Installation über npx schnell und nahtlos zu ermöglichen. Die Befehlszeile bietet auch eine automatische Komprimierung, bei der versucht wird, die Qualität eines Bildes so weit wie möglich zu reduzieren, ohne die visuelle Qualität zu beeinträchtigen (mithilfe des Butteraugli-Messwerts).
Mit der Squoosh-Befehlszeile können Sie die Bilder in Ihrer Webanwendung in mehreren Formaten komprimieren und das <picture>-Element verwenden, damit der Browser die beste Version auswählen kann. Außerdem planen wir, Plug-ins für Webpack, Rollup und andere Build-Tools zu erstellen, um die Image-Komprimierung zu einem automatischen Teil Ihres Build-Prozesses zu machen.
Änderung des Build-Prozesses von Webpack zu Rollup
Das Team, das Squoosh entwickelt hat, hat dieses Jahr viel Zeit damit verbracht, Tools für den Tooling Report zu erstellen, und beschlossen, unseren Build-Prozess von Webpack auf Rollup umzustellen.
Das Projekt wurde ursprünglich mit Webpack gestartet, weil wir es als Team ausprobieren wollten. 2018 war Webpack das einzige Tool, das uns genug Kontrolle bot, um das Projekt so zu gestalten, wie wir es wollten. Im Laufe der Zeit haben wir festgestellt, dass das einfache Plug-in-System von Rollup und die Einfachheit mit ESM eine natürliche Wahl für dieses Projekt waren.
Aktualisiertes UI-Design
Wir haben auch das UI-Design der App mit blobs als visuelles Element aktualisiert. Das ist ein kleines Wortspiel
für den Umgang mit Daten in unserem Code. Squoosh leitet Bilddaten als Blob weiter, sodass es sich natürlich anfühlte, einige Blobs in das Design zu integrieren.
Auch die Verwendung von Farben wurde verfeinert, sodass sie nicht nur ein Akzent, sondern auch ein Vektor war, um zu unterscheiden und zu betonen, welches Bild im Kontext der Optionen zu sehen ist. Insgesamt ist die Startseite etwas lebendiger und das Tool selbst ist ein bisschen klarer und prägnanter.
Wie geht es weiter?
Wir haben vor, weiter an Squoosh zu arbeiten. Mit der Veröffentlichung des neuen Bildformats möchten wir unseren Nutzern einen Ort bieten, an dem sie ohne großen Aufwand mit dem Codec spielen können. Außerdem möchten wir die Verwendung der Squoosh CLI ausweiten und stärker in den Build-Prozess einer Webanwendung integrieren.
Squoosh war schon immer Open Source, aber wir haben uns nie darauf konzentriert, die Community zu vergrößern. Für 2021 planen wir, die Anzahl der Mitwirkenden zu vergrößern und den Onboarding-Prozess für das Projekt zu optimieren.
Haben Sie Ideen für Squoosh? Dann teilen Sie uns dies über die Problemverfolgung mit. Das Team fliegt für einen längeren Winterurlaub, aber wir versprechen Ihnen, uns im neuen Jahr wieder bei Ihnen zu melden.