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 hat. Wir haben ihn entwickelt, damit Sie einfach mit verschiedenen Bild-Codecs experimentieren und die Möglichkeiten des modernen Webs demonstrieren können.
Heute veröffentlichen wir ein größeres Update für die App, das mehr Codecs unterstützt, ein neues Design und eine neue Art, Squoosh über die Befehlszeile zu verwenden, namens Squoosh CLI bietet.
Unterstützung neuer Codecs
Neben den nativ in Ihrem Browser unterstützten Codecs werden jetzt auch OxiPNG, MozJPEG, WebP und AVIF unterstützt. Durch die Verwendung von WebAssembly wurde wieder ein neuer Codec ermöglicht. Durch die Kompilierung eines Codec-Encoders und -Decoders als WebAssembly-Modul können Nutzer auf neuere Codecs zugreifen und mit ihnen experimentieren, auch wenn ihr bevorzugter Browser diese nicht unterstützt.
Die Befehlszeile Squoosh! wird gestartet.
Seit der Einführung im Jahr 2018 wünschten sich häufig Nutzer, programmatisch ohne Benutzeroberfläche mit Squoosh zu interagieren. Wir fühlten uns in Bezug auf diesen Pfad etwas widersprüchlich, da unsere App eine Benutzeroberfläche war, die auf Befehlszeilen-basierten Codec-Tools aufsetzt. Wir verstehen jedoch den Wunsch, mit dem gesamten Codecs-Paket zu interagieren, anstatt mit mehreren Tools. Squoosh CLI macht genau das.
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-Befehlszeile ist in Node geschrieben und verwendet genau die gleichen WebAssembly-Module, die die PWA verwendet. Durch die intensive Nutzung von Workern werden alle Bilder parallel decodiert, verarbeitet und codiert.
Außerdem bündeln wir mit Rollup alles in einer JavaScript-Datei, damit die Installation über npx schnell und nahtlos erfolgt. Die Befehlszeile bietet auch eine automatische Komprimierung. Dabei wird versucht, die Qualität eines Bildes so weit wie möglich zu reduzieren, ohne die visuelle Genauigkeit zu beeinträchtigen (mithilfe des Butteraugli-Messwerts).
Mit der Squoosh CLI 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, die die Bildkomprimierung automatisch zu einem festen Bestandteil Ihres Build-Prozesses machen.
Build-Prozessänderung von Webpack zu Rollup
Das Team, das Squoosh entwickelt hat, hat dieses Jahr viel Zeit mit Build-Tools für den Tooling Report verbracht und beschlossen, unseren Build-Prozess von Webpack auf Rollup umzustellen.
Das Projekt wurde ursprünglich mit Webpack begonnen, weil wir es im Team ausprobieren wollten. 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 von Rollup und seine Einfachheit mit ESM es für dieses Projekt zu einer natürlichen Wahl gemacht haben.
Aktualisiertes UI-Design
Außerdem haben wir das UI-Design der App aktualisiert. Dabei ist blobs als visuelles Element zu sehen. Es ist ein kleines Wortspiel, wie wir
mit Daten in unserem Code umgehen. Squoosh übergibt Bilddaten als Blob, sodass es sich natürlich anfühlt, einige Blobs in das Design aufzunehmen.
Auch die Verwendung von Farben wurde optimiert: Farbe war mehr als ein Akzent, sondern auch ein Vektor, um zu erkennen und zu betonen, welches Bild im Kontext für die Optionen steht. Alles in allem ist die Startseite ein bisschen lebendiger und das Tool selbst ist etwas klarer und prägnanter.
Wie geht es weiter?
Wir haben vor, weiter an Squoosh zu arbeiten. Wenn das neue Bildformat veröffentlicht wird, möchten wir, dass unsere Nutzer einen Ort haben, an dem sie ohne großen Aufwand mit dem Codec spielen können. Wir hoffen, dass wir die Nutzung von Squoosh CLI erweitern und mehr in den Erstellungsprozess einer Webanwendung integrieren können.
Squoosh war schon immer Open Source, aber wir hatten noch nie den Schwerpunkt darauf, die Community zu vergrößern. 2021 wollen wir unsere Zahl der Mitwirkenden erweitern und einen besseren Onboarding-Prozess für das Projekt einführen.
Haben Sie eine Idee für Squoosh? Teilen Sie uns dies bitte über unsere Problemverfolgung mit. Das Team hat demnächst einen längeren Winterurlaub geplant, aber wir versprechen uns, uns im neuen Jahr wieder bei Ihnen zu melden.