コーデックのサポート、設計の更新、CLI のサポート
Squoosh は、Google のチームが開発し、Chrome Dev Summit 2018 で発表された画像圧縮アプリです。さまざまな画像コーデックを簡単に試し、最新のウェブの機能を紹介するために構築されています。
本日、アプリのメジャー アップデートをリリースします。このメジャー アップデートでは、サポートされるコーデックの追加、新しいデザインに加え、Squoosh CLI というコマンドラインで Squoosh を使用する新しい方法が追加されています。
新しいコーデックのサポート
お使いのブラウザでネイティブにサポートされているコーデックに加え、OxiPNG、MozJPEG、WebP、AVIF もサポートされるようになりました。WebAssembly を使用して、新しいコーデックが再び利用可能になりました。コーデックのエンコーダとデコーダを WebAssembly モジュールとしてコンパイルすると、使用するブラウザでサポートされていない場合でも新しいコーデックにアクセスして試すことができます。
コマンドライン Squoosh を起動すると、
2018 年の初回リリース以来、ユーザーからよく寄せられる要望は、UI を使用せずにプログラムで Squoosh を操作することでした。このアプリはコマンドライン ベースのコーデック ツール上の UI であったため、このパスについては少し矛盾しているように感じました。ただし、複数のツールではなくコーデックのパッケージ全体を操作したいという要望は理解しています。Squoosh CLI なら、それができます。
Squoosh CLI のベータ版をインストールするには、npm i @squoosh/cli を実行するか、npx @squoosh/cli [parameters] を使用して直接実行します。
Squoosh CLI は Node で記述されており、PWA が使用する WebAssembly モジュールとまったく同じモジュールを使用します。ワーカーを多用することで、すべての画像のデコード、処理、エンコードが並列で行われます。また、Rollup を使用してすべてを 1 つの JavaScript ファイルにバンドルし、npx を介したインストールを迅速かつシームレスに行えるようにしています。CLI では自動圧縮も行われ、Butteraugli 指標を使用して、視覚的な再現性を低下させることなく、可能な限り画像の品質を低下させようとします。
Squoosh CLI を使用すると、ウェブアプリ内の画像を複数の形式に圧縮し、<picture> 要素を使用してブラウザに最適なバージョンを選択させることができます。また、Webpack や Rollup などのビルドツール用のプラグインを構築し、ビルドプロセスにイメージ圧縮を自動的に組み込むことも計画しています。
Webpack から Rollup へのビルドプロセスの変更
Squoosh を構築したチームは、今年、かなりの時間を費やして Tooling Report のビルドツールを検討し、ビルドプロセスを Webpack から Rollup に切り替えることにしました。
このプロジェクトは当初、Webpack をチームで試そうと考えたため開始されました。2018 年の時点では、Webpack が思いどおりにプロジェクトを設定するための十分な制御を提供した唯一のツールでした。これまでの経験から、Rollup の簡単なプラグイン システムと ESM によるシンプルさは、このプロジェクトにとって自然な選択であることがわかりました。
UI デザインの更新
また、視覚要素として blobs を使用するアプリの UI デザインも更新しました。コード内のデータの取り扱いには
ちょっとしたダジャレがあります。Squoosh は画像データを blob として渡すため、デザインにいくつかの blob を含めるのは自然なことです。
また、色の使用も細工されたため、色はアクセントだけでなく、オプションのコンテキストにどの画像があるかを区別し、強調するためのベクトルも追加されました。全体として、ホームページが若干わかりやすく ツール自体もわかりやすく簡潔になっています
次のステップ
引き続き Squoosh で研究を進めていく予定です。Google では、新しい画像形式のリリースに伴い、手間をかけずにコーデックを実行できる場所をユーザーに提供したいと考えています。また、Squoosh CLI の使用を拡大し、ウェブ アプリケーションのビルドプロセスにさらに統合したいと考えています。
Squoosh は常にオープンソースでしたが、コミュニティの成長には全力で取り組んできませんでした。2021 年にはコントリビューター ベースを拡大し、プロジェクトのオンボーディング プロセスを改善する予定です。
Squoosh についてのアイデアはありますか？Issue Tracker からお知らせください。チームは冬の長期休暇を予定していますが、新年のお戻りを約束します。