画像圧縮は永遠の課題
本サーバですらちまちま画像をアップロードしていたらそれだけで画像のサイズが2GBを超えてしまいました…まだ一年も運用していないというのに何たることだ…
というわけで、画像を圧縮してなんとかファイルサイズを小さくしようと考えるのは当然のことです。
ところが、画像圧縮の方式はいっぱいあり、しかも次々に新しい方式が生み出されていてどれがいいのかさっぱりわかりません。そこで今回は様々な画像圧縮を試してみることにします。
PNG画像を圧縮する
Googleが開発した神サイトがあるのでそれを参考にしてみます。
適当なファイルをアップロードしてファイルサイズがどのように変わるかを検証しましょう。
まずは、全く最適化されていないと思われるReCentralでキャプチャしたスプラトゥーン2のPNGファイルで試してみます。
ファイルサイズは2.26MBもあります。こんなファイルを大量にアップロードしていたらあっという間に主記憶装置を圧迫してしまいますね。
可逆圧縮
可逆圧縮とは元のファイルを完全に復元できる変換のことを言います。
つまり、うまいこと変換すればファイルの情報を一切失わずにファイルサイズを減らせるのですが、そのうまい変換方法を探そう！という試みなわけです。
Windowsで標準的な生データ画像はBMPやRAWと呼ばれるものですが、これらは圧縮されていないのでデータ処理が強いという利点がある反面、全く圧縮されていないのでファイルサイズが極めて大きくなるという問題点があります。
画像処理するわけでもなく、ただデータをみたいだけであればファイルサイズは小さい方が好ましいでしょう。
これは「1万円の給料をもらう時に1万円札1枚でもらうか、1円玉10000枚でもらうかのどっちがいいか」みたいな問題に似ています。
1円単位で使える1円玉10000枚は柔軟性に優れていますが、持ち運ぶのが面倒ですよね？
PNG圧縮率の変更
まず簡単なのがPNG圧縮率の変更です。
試しにPNG圧縮レベルを9にしてみましたが、2.20MBと全くファイルサイズを減らすことが出来ませんでした。
OptiPNG
OptiPNG is a PNG optimizer that recompresses image files to a smaller size, without losing any information.（OptiPNGは情報損失なしにファイルサイズを小さくすることができるPNG最適化ツールです。）
squoosh上で実行できるということで試してみました。
デフォルト（effort=2）で2.19MBと全くファイルサイズを減らすことが出来ませんでした。
試しに最大値（effort=7）で変換を試してみると、変換が終わらなくなってしまいました。これでは本末転倒です。
WebP
WebPとはGoogleが開発した次世代画像フォーマットで、PNGの上位互換みたいなやつです。
ただし、2018年現在では対応しているブラウザがChromeとOperaくらいです（少ない）
アルファチャンネルに対応していたりと、本当にPNGのように扱えるという点を持ちながら可逆圧縮と不可逆圧縮のどちらにも対応しているのがポイントです。
可逆圧縮で1.54MBと大きくファイルサイズを減らすことに成功しました。このあたりはすごいなーって感じがしますね。
不可逆圧縮
不可逆圧縮とは元の情報を損失する代わりに見た目をなるべく変えないままファイルサイズを大きく減らす方法です。
実際に使う機会が多いのはこちらの圧縮方法で、MP3やMP4やAACなんかは全部不可逆圧縮です。
JPEG
世間一般で使われる普通のJPEGです。
一見、違いがわからないように見えますが…
拡大してみるとブロックノイズだらけなのがわかります。特に耳のあたりが酷いですね…
ファイルサイズは255KBで89%の圧縮となりました。このあたりの圧縮率はさすがの不可逆圧縮という感じがしますね。
MozJPEG
次世代JPEGエンコーダのことらしい。
Googleが開発したguetzliとMozillaが開発したmozjpegのどっちがいいかでちょっと議論になったとかなんとか。
個人的にはどっちがどっちでもいいんですが、調べてみるとMozJPEGの方がなんとなく良さそうだったのでそっちを採用します。
画質レベルを75に設定したところ、195KBと91%の圧縮に成功しました。
見た感じ、全然劣化はわからないという印象です。
最大まで拡大してみるとなんとなく違いがわかります。
画像右がオリジナルで、左がMozJPEGです。頬のあたりの輪郭がぼやけてしまっており、眼や首のあたりにブロックノイズが生じていることがわかります。
WebP
WebPは貼り付けてもChrome以外で見られないので比較画像だけ載せておきます。
画質レベルを75に設定したところ、148KBと93%の圧縮に成功しました。
やはり右がオリジナルで、左がWebPです。
不可逆圧縮を利用しているのでやはり画質の劣化が見られます。
注目すべきはブロックノイズがない代わりに、イカちゃんの背後にある壁の模様が崩れて消えてしまっていることです。どうもWebPは平滑化フィルタ的な処理が入っているような気がしますね。つまり、ブロックノイズがでないように、ブロックノイズが出そうな細かいところをわざと潰してしまっているような印象を受けます。
ただ、MozJPEGと違ってゲソのあたりにブロックノイズが見られないのでその点で言えばWebPの方に軍配が上がるのかなあという気はします。
ファイルサイズもWebPの方が小さいのがいいですね。同じ圧縮率にしようとするとこの画像の場合はWebPは画質を82まで上げることが出来ました。
一概に比較はできませんが、MozJPEG+5くらいの画質設定でもいいかもしれません。最も、結局の所Chrome以外で表示できないという問題は残っているのですが（笑）
PNG圧縮のまとめ
不可逆圧縮に関してはJPEGと互換性があるMozJPEGと圧縮率と画質でまさるWebPはどちらがいいのか優劣がつけにくいという問題はありました。
そして、実は記事には書いていないのですが可逆圧縮で品質を100にした場合も実験してみました。
画像の掲載はめんどくさいので差し控えますが、品質を100にした場合は拡大率を1000%にして何度目を凝らしてみてもブロックノイズどころか1ピクセルの違いも見つけることが出来ませんでした。
「不可逆圧縮の場合でも品質が100であれば人間にとって見ればほとんど同一」と言い切ってしまっていいと思います。
「不可逆圧縮の品質100って可逆圧縮じゃないの？」と思われる方もいらっしゃるかもしれませんが、それは違います。二枚画像の各ピクセル間の差分を取れば明確に違う画像であることがわかります。
そして、不可逆圧縮の品質100も含めた今回の検証結果が以下になります。
[table id=19 /]
驚くべきは可逆圧縮のWebPの圧縮率の高さです。PNGから更に30%以上も圧縮できるというのは次世代画像フォーマットとして名乗りを上げるのに十分すぎる成果といえるでしょう。
また、MozJPEGの品質75は通常のJPEGに比べて劣化が少ない上に圧縮率も良く、完全にJPEGの上位互換といえます。
ただし、MozJPEGにもまだ問題はあります。それは品質100での圧縮率の低さです。今回の画像の場合、品質を100にすると32%しか圧縮できていませんでした。しかもこれは可逆圧縮のWebPとほぼ同じ圧縮率です。
つまりこれは「MozJPEGで品質100で圧縮するくらいなら可逆圧縮のWebPを使ったほうがいい」ということにほかなりません。
このあたりはまだまだMozJPEGも発展しがいがあるのではないでしょうか（もちろんWebPがすごすぎるという解釈も可）
そして、最も特筆すべきは品質100のWebPの可逆圧縮の圧縮率の高さでしょう。
先程も述べたように、品質を100にすると通常のJPEGですら全く違いに気づけないほどキレイに変換できていました。しかし、それ故にファイルサイズがどうしても大きくなってしまうという問題を抱えています。
ところがWebPは品質100でありながら圧縮率74%という驚異の数字を叩き出しています。
JPEG画像を圧縮する
写真を圧縮した場合に必要となるのがJPEG画像の圧縮です。
スクリーンショットをとるよりも写真をとることのほうが圧倒的に多いと思われるのでこちらの処理のほうが現実的に必要だと思われます。
PNG変換ではWebPが圧倒的な強さを見せつけましたが、JPEG変換ではどうでしょうか？
処理の対象として、いかにも難しそうな名案があり夜空の部分にノイズがたくさん乗ってそうな夜景の画像を選択しました。
これは普通に考えると圧縮は極めて困難なはずです。
なお、写真のような複雑なデータのJPEGからPNGへの変換はただ単にファイルサイズが大きくなるだけなので省略します。
また、細かすぎてよくわからないので比較画像も掲載しません。
JPEG画像圧縮のまとめ
[table id=20 /]
元画像が相当にややこしいデータだということもあって、圧縮率は伸び悩みました。これはデータが写真であるということを考えると仕方ないでしょう。
それでも品質75で80%近い圧縮率を叩き出しているWebPとMozJPEGは素晴らしいです。品質100の場合はWebPでさえ8%しか圧縮できていないので、これはわざわざWebPに変換する手間を考えるとオリジナルのJPEGデータをそのまま残しておいた方がいいと言えます。
よって、JPEGの写真データで言えば品質100で変換するメリットはないと言いきっていいでしょう。
品質0にしてみた
なんの意味もなのですが、やってみたくなったのでやってみました。
ファイルサイズは38KBと99%以上の圧縮に成功（笑）
ファイルサイズは107KBとなりました。ファイルサイズがそこそこあるおかげで、一応なんとなく何が写っているかはわかりますね。
ファイルサイズは114KBとやはりこちらも超圧縮に成功。しかもそれなりに見れる画像になっているというのが驚きです…
※Chrome以外で閲覧している場合は等価なPNG画像を表示しています。
ファイルサイズを135KBにそろえてみた
本当はWebPと同じ114KBに揃えたかったのですが、失敗しました（笑）
品質を9にするとファイルサイズが138KB（圧縮率97％）になったため、このあたりで妥協。
品質0のときよりは遥かに見れる画像になったものの、夜空のグラデーションが全く表現できていない。また、いたるところにブロックノイズが発生している。
品質4でファイルサイズが135KB（圧縮率97％）になりました。
手前のコンクリートブロックや、夜空が全く表現できていないことがわかります。
全体のまとめ
- 可逆圧縮を使いたいならWebP
- なるべく画質を落とさずにファイルサイズを小さくしたいならWebPで品質100
- ファイルサイズをなるべく小さくしたいなら互換性からMozJPEGが有利
- 可逆圧縮は使う意味なし
- MozJPEG品質75で圧縮すればそこそこ綺麗になる
- WebPは互換性の問題が解決すれば品質75で変換するメリットがでる
- 死ぬほどファイルサイズ小さくしたいならWebPで品質0もアリ
わざわざ品質0設定にする意味はないのですが、極めて小さいファイルでも高精度に元画像を復元できるWebPはすごいと思いました。
次の記事では実際にホームページの画像をWebPやMozJPEGを用いて変換するためのソフトウェア的な内容に触れようと思います。
記事は以上。