このページは Cloud Translation API によって翻訳されました。

Squoosh v2 のお知らせ

新しいコーデックのサポート、デザインの更新、CLI のサポートが追加されました。

Mariko Kosaka

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 に切り替えることにしました。

このプロジェクトが始まったのは、チームとして試したいと考えていたからです。2018 年当時、Webpack は、プロジェクトを思いどおりに設定できるだけの十分な制御を提供した唯一のツールでした。時間が経つにつれて、Rollup の簡単なプラグインシステムと ESM のシンプルさが、このプロジェクトにとって自然な選択となりました。

UI デザインの更新

また、blobs を視覚要素としてアプリの UI デザインも更新しました。コードでのデータの扱い方が少しおかしくなりますSquoosh は画像データを blob として渡すため、デザインに blob が含まれているのは自然なことです。

色の使用にも改良が加えられており、色はアクセントだけでなくベクトルにもなり、どの画像が選択肢のコンテキストに含まれているかを区別して強調できます。全体として、ホームページが少し鮮やかになり、ツール自体もより明確で簡潔になりました。

次のステップ

今後も Squoosh の開発を続けていきます。新しい画像形式のリリースに伴い、ユーザーが手間をかけずにコーデックを操作できるようにしたいと考えています。また、Squoosh CLI の使用を拡大し、ウェブアプリケーションのビルドプロセスにさらに統合したいと考えています。

Squoosh はオープンソースであり続けていますが、コミュニティの成長に力を入れることは一度もありません。2021 年には、コントリビューター基盤を拡大し、プロジェクトへのオンボーディングプロセスを改善する予定です。

Squoosh についてアイデアはありますか？Issue Tracker でお知らせください。チームは冬の長期休暇に入りますが、新しい年にまたお会いできることを約束します。