はじめに
ここではインターネットで公開する画像について、どのようなフォーマットでどのようなオプションを指定するのがいいのか？といった疑問に応える指針となるかもしれない覚え書きを書き留めておきます。一個人のメモなので誤情報が含まれている可能性を否定することはできませんが、誤った情報についてはご指摘くださると有り難いです。
画像フォーマット
現在、インターネットで用いられている主流の画像フォーマットは、JPEG、GIF、PNGの三種類です。歴史的な背景等々の情報はページ末尾の参考文献を参照していただくことにして、これらの画像フォーマットをどういった時に用いるべきなのか？というより実践的な指針で比較検討していきます。
JPEG
拡張子jpgで表示される画像です。このフォーマットの特徴を簡潔に記すと、
- 元画像に対して不可逆圧縮をかけるので、どうしても元画像よりも劣化が生じる。
- しかしその圧縮のおかげで、見た目にはある程度綺麗な画像を維持したまま劇的にファイルサイズを圧縮することができる。
JPEG圧縮の原理は、人間の目が明るさの変化よりも色調の変化に鈍感であるという事実に基づいて、色調の情報を減らします。この減らし方は少々難しいのですが、離散コサイン変換（DCT）というフーリエ変換の一種と量子化を用いて圧縮します。難しい話に興味がある方は参考文献の方を参照されてください。ここでは結果だけを述べると、JPEG圧縮は8x8ブロック情報をもとに隣り合わせのピクセルとのコントラストを減らし平均化する、といったところでしょうか。画質を粗くする（圧縮率を高める）といわゆるブロックノイズが見られるのはJPEG圧縮が8x8ブロックを単位面積として扱っているからです。
この原理からすると、コントラストのきつい画像ではJPEG圧縮を行うとボンヤリとしたはっきりしない画像になりやすい、ということが言えます。逆に考えると、コントラストを下げると同じ圧縮率でも画像サイズが小さくなる、ということでもあります。
GIF
拡張子gifで表示される画像です。この画像フォーマットの特徴は、
- 最大8ビット（256色）までしか色の情報を扱えない。
- 透過色の使用やアニメーションが可能。
GIFは以前に特許問題という大きな問題を抱えていましたが、日本でも2004年6月に特許が失効しているので現在は問題ありません。が、そもそも画質には影響しない話なのでさくっと無視します。
まず256色しか扱えないという問題から、写真のような大量の色情報を必要とする画像の処理には向いていません。256色以下しか使わないロゴのようなものか、もしくはグレースケールであれば256色で事足りるということになります。この条件に合わないならばGIFは選択すべきフォーマットではありません。
PNG
拡張子pngで表示される画像です。この画像フォーマットの特徴は、
- 可逆圧縮であり、理論上GIFよりも圧縮効率がよい。
- 複数の透過色を指定可能で、半透明なども行える。
- ガンマ値やコメント等、様々な情報を埋め込める。
GIFの特許問題が持ち上がったときに制定されたフォーマットで、暗に「PNG is Not GIF」という再帰的意味を含んでいたりもするそうです。当初はどれだけ広まるのか疑問でしたが、フリーライセンスということで対応しているフリーソフトも数多くなりました。
PNGの画質は扱う色の数によって決まり、フルカラーであればBMPと比較してもデータに遜色ありません。しかし、様々な情報を埋め込めるというのが逆に足枷となり、少ない色数しか扱わないデータの肥大化を抑えた小さなファイルではデータサイズの無駄な増量に繋がってしまいます。圧縮アルゴリズムもGIFに似ており、GIF画像と比較して驚くべき程数値が激減するといったことは稀でしょう。
実際に保存するフォーマットの選択
仕様等の話はここまでで、ここから実際に保存するときにはどれを選択すればいいのか？といった実践的な話に移ります。ケースバイケース、と一言で言ってしまえばお終いなのですが、それではこのテキストの意味がないので幾つかのサンプルケース条件を挙げてみます。
- フルカラー、画質劣化は無視、とにかく小さく。
- フルカラー、画質劣化が気になる。
- モノクロ、ロゴのようにゴミが少なく、はっきりとした感じ。
- モノクロ、ゴミが多少目立つ、あまりコントラストがはっきりしない。
ケース1では文句なくJPEGでしょう。ケース2はPNG-24しか選択できません。つまるところ、フルカラーで扱うならばJPEGかPNGしか有り得ず、ファイルサイズで考えればJPEG、画質で考えればPNGといった至極単純な決定が得られます。256色以下の8ビットカラーで初めてGIFの選択も出てきますが、ファイルサイズを気にしなければ将来性も考えてPNGで構わないと思います。
問題はモノクロの場合です。GIFは仕様上の問題で256色しか扱えませんが、モノクロであれば白黒の表現はこれでちょうど事足ります。PNGか、GIFか、それともJPEGなのか、求められる条件と扱う画像の情報で左右されます。
大きく左右される情報は、画像のコントラストと色情報の変化の度合いです。色情報の変化の度合いとは、GIFやPNGで使われているLZ系圧縮アルゴリズムは同じ数値が並べてある際にそれをまとめて表現するという手法で圧縮するので（0000000011110000という文字列があるとき、0が8回、1が4回、0が4回というように情報を圧縮する）、色の数値が一定でないと効率的に圧縮できなくなります。コントラスト云々は、JPEG圧縮の効率に関わってきます。
これを整理して考えると、ケース3はロゴのようにはっきりしており、ゴミ（画像上の小さな黒点等）がほとんどないイラストなのでGIFやPNGが適していると考えられます。このどちらかの選択というのでは、画質ではなく透過色の使用やアニメーションの有無などで決定できそうです。どちらも基本的に可逆圧縮ですし、色の数が同じであれば画質は変わりません。このような画像の場合ではJPEG圧縮は逆に向いておらず、ある程度の高画質でもノイズが目につくかもしれません。ファイルサイズもGIF等と比較して大きくなりがちです。
ケース4ではゴミが多少目立つということで、スキャナなどで取り込んだモノクロ画像等が該当します。アナログからデジタルに変換した場合、どうしてもノイズが入ることは避けられないことなので、デジタルのようにはっきりとしたデータにはなりません。白紙を取り込んだとしても微妙に色の変化が生じてしまうので、GIFやPNGの圧縮効率が落ちてしまいます。コントラストもはっきりしないのであれば、このケースはJPEG圧縮の方が効率が良いでしょう。
実際に比較してみます。→比較検証画像（DL検証用（3MB））
適当なモノクロ画像で、どの程度潰れるのかを検証してみました。結果は元ファイルが152KB、JPEG圧縮90で50KB、JPEG圧縮60で35KB、JPEG圧縮30で22KB、JPEG圧縮10で14KB、PNG圧縮（レベル最大、インターレース無、カラーパレット16色）で47KB、GIF圧縮（lossy32、インターレース無、カラーパレット16色）で26KBでした。いずれも圧縮にはPhotoshop6.0Jを使用しています。このことから分かるように、JPEG圧縮30程度からGIFやPNGよりも圧縮効率が高まってきます。JPEG圧縮10まで圧縮してしまうとさすがにブロックノイズが目立ってきていますが、圧縮30程度までならそれほど見劣りしません。Webの標準で耐えられる画質はJPEG圧縮30程度までであると思います。
GIFやPNGの値も割とマシなものになっていますが、これはこの画像がフィルタを通してゴミをある程度飛ばしている状態にあるからでもあります。事実、全くフィルタを通していない画像ではJPEGとGIF・PNGとで2倍近い差が出た画像もありました。マシとはいえど、それでもJPEGの標準圧縮レベルに達していないという風に捉えることもできますが。
また更なる画像圧縮として、JPEGであればコントラストを下げることでファイルサイズを削減することもできます。上記検証画像のJPEG Level 30にコントラスト補正-25、明るさ補正+25をかけて保存したところ、ファイルサイズが18KBになりました。Level 60でも30KBと、15-20％程度の削減が見込めます。圧縮の原理を理解すれば、このようなファイルサイズの減らし方も有り得るわけです。
まとめ
結論としては、フルカラー画像の場合はJPEGもしくはPNG、モノクロ画像の場合はアナログ的な画像かデジタル的な画像かによってJPEGもしくはGIF・PNGの選択を行うのが適当だと言えそうです。フルカラーの結果は単純なものですが、モノクロ画像では圧縮効率を考慮してフォーマットを選択する必要があります。対象となる画像をうまく判断して適切な画像を選べば、綺麗な画像を効率よく配信することができるでしょう。
Comment