Squooshとは？
ブラウザ上で実行できる画像圧縮Webアプリです。
squooshの何が素晴らしいかを先に伝えると、
- 超高速
- オフラインでも可能
- 異なる形式の圧縮方法を同時に比較
おそらくこの3点ではないかと思います。これらと使い方を解説していきます。
squooshに初めてアクセスすると、「Ready to WORK Offline(オフラインで作業する準備ができている)」ことを通知してくれます。つまり、一度ロードされると、その後はオフラインでもブラウザから利用できます。なんてこった、素晴らしい。
こちらはdemo動画です。
Google Chrome Labsのチームがブログでこういっています(翻訳済み)。
「この強力な画像圧縮ツールはほぼ瞬時に起動し、WebAssemblyを使用してブラウザーが組み込まれていないコーデックをさらに処理するなど、重い作業を行っている場合でもスムーズなUIを管理します」
なるほど、とりあえず早いのか。また
Fast from the first click（最初のクリックから高速）
とも。めちゃめちゃ早さを主張してきますね。
ではさっそく。
ポチっ
え、待って、早すぎる。。。
これは他の画像圧縮ツールとは比較になりません。早すぎます。
とっても早いことはわかりました。次は使い方です。
使い方
最初の画面の下には4つもサンプルが用意されています。とっても良心的。最初はこのサンプルで遊んでみてください。
実際に使用するときは[select an image]をクリックして画像を選択するか、画像ファイルをドラッグ&ドロップしてください。
画像を選択するとこのような画面に移動します。
画面中央の青いバーを動かすことで左右の比較を行うことができます。先ほどの動画をみていただくのがわかりやすいかと思います。
1~3をそれぞれの赤枠の説明します。
1.左側の圧縮の設定
デフォルトでは左側がオリジナルの画像が表示されています。
1と2は同じ設定を行うことができます。
これが素晴らしいのです。異なる設定を同時にかつ高速に比較することができます。
細かな設定はあとで紹介します。
2.右側の圧縮の設定
1の設定と同じです。
3.キャンバスの設定
マイナスとプラスは画像の倍率を変更します。ズームとかです。
回転マークは画像を回転させます。1クリックごとに90度回転します。
一番右のアイコンはキャンバスの背景の色を変更します。クリックすると黒に変更されます。
基本的には、各種設定を行った後に右下の水色のダウンロードアイコンをクリックすればダウロードできます。
ここから先は圧縮オプションの細かい話になってきます。
圧縮のオプション
先ほどの画像の1,2の赤枠のオプションの説明をします。
Editでは以下のことができます。
Resizeをチェックすると、下からヌルと項目が出てきます。
Method
Methodの項目は以下です。画像処理の際の方法まで指定できます。ここ説明すると専門的になりすぎるので、別記事にまとめておきます。
- Lanczos3
- Mitchell
- Catcall-Rom
- Triangle(bilinear)
- hqx(pixel art)
- Browser pixelated
- Browser low quality
- Browser medium quality
- Browser high quality
Preset
画質のことだと思います。倍率をあげると、処理にだいぶ時間がかかる。
詳しいことがわかったら追記します。
Width
画像幅
Height
画像の高さ
Premultiply alpha channel
乗算済みアルファというらしいです。専門的なものでよくわかりません。とりあえずデフォルトのままにしましょう。
詳しく知りたい方はこちら
Linear RGB
普段、画像データのやり取りや変換処理に使うRGB値は、多くの場合は物理的な輝度に対して線形でなく、sRGB 規格の場合だとガンマ補正(自然の色に近くなるように、明るさ（輝度）や彩度を調整すること)がかかっています。
対して、このガンマ補正が「かかっていない」ものを”Linear RGB”呼びます。
こちらにまとまっていました。
Maintain aspect ratio
アスペクト比(縦横比)を維持するかどうかです。チェックを外すと、Fit Methodという項目が出てきて、ContainかStretchかを選択できます。
stretchは可能な限り拡大してスペースを取ります、containは画像の幅と高さのうち大きい方のサイズに合わせて比率を保持して画像を表示します。
Reduce palette
Colors: 0~256まで設定でき、減らすと色が減ります。
Dithering: 説明するのは難しいのでこちらに譲ります。色ムラの設定です。
Compressの項目は以下になります。
- Original Image
- OptiPNG
- MozJPEG
- Web P
- Browser PNG
- Browser JPEG
- Browser Web P
Show advanced settingsにチェックを入れると以下のように新しい項目が出てきます。
Channels
設定できる項目は
- GrayScale
- RGB
- YCbCr
GrayScaleは白黒にできます。
RGBは、光の三原色である赤/緑/青の強さで表わします。一般的に使われているやつです。
YCbCrはRGBで表現された値を元に換算式で計算される数値で色を表わします。Yは輝度で、CrCbは、Cbが青系統、Crが赤系統のそれぞれの色の色相と彩度を表わす。
基本的にRGBでいいと思います。
Auto subsample chroma
クロマサブサンプリングを自動で行うかどうかです。
クロマサブサンプリングとは、画像をYCbCr(YUV)に変換後、色差成分を間引くことによって画像のデータ量を削減する技術のことらしいです。チェックを外すと手動で設定できます。
チェックしておけばいいでしょう。
Separate chroma quality
探してもよくわからなかったのですが、チェックをすると手動で設定でき、0~100の間で設定できます。
おそらく一つのピクセルの大きさだと思います。100に近づくほどqualityが上がっていき、容量が大きくなります。色の境界がはっきりするかどうかだと思って大丈夫だと思います。
わかったら追記します。
Pointless spec compliance
仕様準拠を無視？何ですかね。デフォルトのままにします。データに関する何かの設定項目だと思います。
Progressive rendering
プログレッシブレンダリングは、画像全体を低解像度で表示し、これを徐々に精細に表示していく方法のことです。
最初は低解像度ではあるが、イメージ全体がまず表示されるので、全体像を素早く認識できるようになるメリットがあります。これは用途によってつか分けた方が良さそうです。プログレッシブレンダリングを行った方が容量は小さくなります。
Smoothing
平滑化フィルタ処理と呼ばれます。これは画像上の濃淡変動を滑らかにする処理のことで、画像をぼかす効果を得たいときにこの値を大きくすれば、滑らかになります。
Quantization
量子化の手法とか普通知らないですよね(笑)。
設定できる項目は以下。
- JPEG Annex K
- Flat
- MSSIM-tuned Kodak
- Image Magick
- RSNR-HVS-M-tuned Kodak
- Klein et al
- Waston et al
- Ahumada et al
- Peterson et al
デフォルトのままにしておきましょう。
ここから下の設定項目はよくわからないです。おそらくTrellis量子化の設定とかだと思うんですけど、なんせいくら探してもよくわからなくてすみません。そのままにしておきましょう。
Trellis multipass
Optimize after trellis quantization
ゼロブロック実行を最適化する
Optimize after trellis quantization
トレリス量子化後の最適化
Trellis quantization passes
トレリス量子化パス
まとめ
いかにsquooshが高性能であるかがわかっていただけたでしょうか？
高性能すぎます。論文とか読まないと理解しきれない部分もあるので、ある程度決まりきった設定を使い回すようにしましょう。
Google先生、日本語バージョンをください。。。
