Jpegエンコーダのファイルサイズ対決 Photoshop vs ImageMagick vs MozJPEG vs Guetzli & WebP

エンコーダの性能として、ファイルサイズ効率を**品質1刻みで比較**してみました。Web用途を前提とした**「同じ画質なら軽い方が勝ち」**という基準の対決です。

WebPについても知りたかったので参戦してます。

Web用途ではデコード時間なども大事ですが、この記事ではファイルサイズが軽いかどうかに着目します。

また、`品質`はJpeg出力時のパラメータ(0-100)、`画質`は元画像との定量的な差分(SSIM)としています。

# 知りたかったことや仮説

* PhotoshopのJpegエンコーダは賢い気がするが実際どうか。
* 後発のMozJPEGやGuetzliはImageMagickよりどのくらい優れているのか。
* WebPはそれらJpegエンコーダに比べてどのくらい優位性があるのか。

# まとめ

* WebPは軽い。
* PhotoshopのJpegエンコーダはやはり賢い。
* Photoshopの品質は尺度が独特。Web用には`50`前後で十分かもしれない。
* Guetzliは処理が遅いがImageMagickやMozJPEGと一線を画す結果が出る。
* MozJPEGとImageMagickに大きな差がない(Jpegライブラリが同じだから？)

# 元画像

写真は[ぱくたそさんから拝借](https://www.pakutaso.com/20180413102post-15912.html)して、480x480にトリミングしたPNG24画像です。

<table>
<thead>
<tr><th>写真</th></tr>
</thead>
<tbody>
<tr><td><img src="https://qiita-image-store.s3.amazonaws.com/0/35178/ba4b614e-9493-6220-63db-6857a0ce80ed.png"></td></tr>
</tbody>
</table>

# 変換処理

品質`$Q`を0から100まで1刻みで変化させて、元ファイル`$SRC`から変換先`$DEST`変換を行います。品質以外のパラメータは基本的にデフォルトのままとしました(そのように使われるケースが多いであろうから)。

* Photoshop
    * CC 2018 (19.0)
    * `Web用に保存(従来)`機能を利用(最適化あり)
    * [こちらの記事](https://qiita.com/dot_Esu/items/5603a9ac39b85ac87752)を参考にJSXを作成
* ImageMagick
    * 7.0.8-14 (Homebrew)
    * `convert -quality $Q $SRC $DEST`
* MozJPEG
    * 3.3.1 (Homebrew)
    * 直接のPNG入力に対応していないのでTGAをロスレス経由 `convert $SRC $SRC.tga`
    * `cjpeg -quality $Q -targa $SRC.tga $DEST`
* Guetzli
    * 1.0.1 (Homebrew)
    * `$Q`=84〜100のみ
    * `guetzli --quality $Q $SRC $DEST`
* WebP
    * 1.0.0 (Homebrew)
    * `cwebp -quiet -q $Q -o $DEST $SRC`

サブサンプリングやインターレースについては[こちらの記事](https://qiita.com/miyanaga/items/ef82e000dd7ef5cf26a0)を参照ください。

# 結果

* 横軸: 画質(元画像とのSSIM)
    * Jpeg/WebPから一度`PNG24`に変換してからYUVカラーモデルとして計算
    * `compare -metric SSIM -colorspace yuv $SRC $PNG24 NULL:`
* 縦軸: 出力ファイルサイズ

<img width="810" alt="Jpeg_Webpエンコーダ比較_-_Google_スプレッドシート.png" src="https://qiita-image-store.s3.amazonaws.com/0/35178/67c3b88f-98d8-a778-b8dd-765f350a3e72.png">

点の配置が右下にあるほど、高い画質に対してもファイルサイズが小さく、効率がよいということになります。

1. WebP(オレンジ)
2. Photoshop(緑)とGuetzli(青)
3. ImageMagick(赤)とMozJPEG(黄)

というような並びに見えます。

# SSIM 0.95のファイルサイズで対決

SSIMは**0.95以上はオリジナルと見分けが付きにくい**と言われています。

そこでSSIMが`0.95±0.005`、つまり`0.945〜9.955`の範囲に収まったサンプルの平均ファイルサイズを出してみます。

つまり、**見分けが付きにくい範囲でどこまでファイルを軽く出るのか**というチキンレース的な勝負です。

## WebP圧勝

結果はWebPのファイルサイズがダントツで軽く、次いでPhotoshop、Guetzliという順位になりました。

定評のあるMozJPEGが最も振るわずという意外な結果です。

WebPはフォーマット自体が違うのですが、同じSSIM値に対しMozJPEGの半分以下に抑えられたのは驚きです。普及に期待したいです。

||1.WebP|2.Photoshop|3.Guetzli|4.ImageMagick|5.MozJPEG|
|:--:|:--:|:--:|:--:|:--:|:--:|
|Filesize KB|27.45|40.49|43.09|53.09|55.74|
|vs MozJPEG %|49.25|72.63|77.30|95.25|100.00|
|Q avg.|76.5|47.5|85|87.5|88|

* Filesize KB: 平均ファイルサイズ(KB)です。
* vs MozJPEG %: 最もファイルサイズが大きかったMozJpegを100としたときの割合です。
* Q avg.: 平均品質値です。

**当然ながら、画像の質や解像度などによって順位は変動する可能性があります。一例として参考ください。**

### MozJPEGの-optimizeオプション

MozJPEGには、DCTテーブルを最適化する`-optimize`というオプションがあります。結果が振るわなかったので念のため`-optimize`を追加した結果も出してみましたが、2%ほどの改善に留まりました。

### Photoshopの品質値は独特

Photoshopだけ、`47.5`という普段は滅多に使わないであろう値でSSIM 0.95となっています。

Photoshopは品質について独特の尺度を持っているようで、ImageMagickなどの感覚で80や90を指定すると過剰品質になりそうです。

## 品質とSSIM・品質とファイルサイズ

個別に見てみます。

<img width="859" alt="Jpeg_Webpエンコーダ比較_-_Google_スプレッドシート.png" src="https://qiita-image-store.s3.amazonaws.com/0/35178/be868b55-14c7-d041-caed-5fd91ccf62d9.png">

<img width="862" alt="Jpeg_Webpエンコーダ比較_-_Google_スプレッドシート.png" src="https://qiita-image-store.s3.amazonaws.com/0/35178/2cd62de9-2ab7-ae45-4b3d-a08255c7b132.png">

### 画質重視のPhotoshop

Photoshop(緑)は他に比べて品質と画質の関係が直線的で独特です。総じて高い画質がでています。なんとなく、`品質と画質が感覚的に一致する`ように内部で補正されているかのように見えます。

画質が50付近で急激に上昇していますが、これはPhotoshopには品質`51`を境にサブサンプリングが`4:2:0`から`4:4:4`に変わる性質があるからです。

それもあってファイルサイズが総じて大きくなっています。エクスポート機能(`Web用に保存`)を用いているので、無駄なメタデータは除去されているはずですが、それでも大きい。

### ImageMagickとMozJPEG

品質とSSIMのグラフではImageMagick(赤)の曲線がほとんど見えませんが、これはMozJPEG(黄)と重なっているからで、結果が酷似しています。

また、ImageMagick(赤)は90あたりで急に上昇しています。これもImageMagickは90からサブサンプリングが`4:2:0`から自動的に`4:4:4`になるためです。

これ以外にも違いがありそうなものですが、理由は不明です。`convert -list format`でライブラリを確認しても普通に`libjpeg 90`と出ます。

### Guetzli

Guetzli(青)は84未満の品質を指定できないため、グラフのように短い曲線になります。ImageMagickやMozJPEGより画質が高く、ファイルサイズが抑えられています。

Guetzliは独自の`Butteraugli`という画質指標に基づいているのでフェアではないかなと思いましたが、SSIM基準でも高い効率が確認されました。

それにしても処理時間が長い… 実験時間の大部分は`guetzli`コマンドの実行に費やされました。

### WebP

WebPは画質に上限があり、品質100付近ではJpegに追い抜かれる格好になっています。

フォーマットの制約によるものなのかわかりませんが、あくまでWeb公開用の画像フォーマットで、過剰な高画質は不要と割り切っているようにも見えます。


以上です。知りたかったことがいろいろ確かめられてスッキリ！