Google LabsがSquooshを発表：画像圧縮プログレッシブウェブアプリ（PWA）

2018年のGoogle Chrome開発者サミットで、GoogleはSquooshを発表した。これはオープンソースの画像圧縮プログレッシブウェブアプリ（PWA）である、モダンなウェブ技術の実演を兼ねている。

Squooshは多くの画像圧縮フォーマットを活用するための素早く簡単なメカニズムを提供する。ユーザはSquoosh.appをブラウザし、画像をブラウザタブにドラッグアンドドロップし、そして多くの画像最適化と変換設定を試すことができる。アプリはビューの前後に表示され、選択した画像圧縮設定に対して並べて表示される。

現在の形でのSquooshは、PhotoshopやSketch.appなどの従来の画像編集ツールから、TinyPNG、ImageResize.org、Compressor.ioなどのWebベースのサービスや、様々なデスクトップアプリに至るまで、数多くの画像圧縮アプリケーションの競合していない。

Squooshに関するGoogle Labsの主な目的は、高度なWebアプリケーションがモダンなテクノロジをどのように活用して今日のWebブラウザで高度なエクスペリエンスを提供できるかを実証することである。

Squooshは数多くのテクノロジを活用して、実体験としてのエクスペリエンスを提供する。

• Node.js - サーバーサイドおよびコマンドラインのJavaScript（InfoQのNode.jsの記事を参照）
• Preact - Reactに代わるより小さなもの。リアクティブなクライアントサイドのJavaScriptフレームワーク。
• SASS - CSSプリプロセッサ。
• Typed CSS Modules - コンポーネント内でCSSクラスを使用する精度。Dojoなどが使用する技術。
• TypeScript - インターフェイスと型の安全性。多数の画像最適化フォーマットを管理するために特に重要（InfoQのTypeScriptの記事を参照）。
• WebAssembly - さまざまな画像圧縮コーデック（InfoQのWebAssemblyの記事を参照）。
• webpack - 最適化のビルドとバンドル（InfoQのwebpack 4リリース記事を参照）。

Squooshは、以下を含む多くのモダンなパターンに従う。

• async/await
• 画像描画用のCanvas
• Decorators（現在TypeScriptでサポートされている初期のドラフト版
• meta。Dojoなどによって普及。リアクティブアーキテクチャでさまざまなプロパティを利用できるようにするためのもの
• オフラインで使用するためのプログレッシブWebアプリとサービスワーカ
• Reactive。Reactによって普及した、JSXを使った仮想DOMアーキテクチャ

SquooshはBMP、GIF、JP2、JPEG、MozJPEG、PDF、PNG、TIFF、およびWebPを含むさまざまな画像圧縮フォーマットをサポートしてきた。画像圧縮のサポートはブラウザによって異なる。たとえば、FirefoxはBMPへのエンコードをサポートし、SafariはOSへのエンコードを延期しているが、より多くのフォーマットをサポートしている。一方、Chromeはネイティブでは少ないフォーマットしかサポートしていない。WebAssemblyはSquooshによって多くのブラウザに含まれていない画像コーデックを扱うために、そしてエンコードとデコードの処理のために使われる。

SquooshはApache 2オープンソースライセンスの下で利用可能である。コントリビューションはSquoosh GitHubプロジェクトを通して歓迎しており、Squooshコントリビューションガイドラインに従ってください。