検証3：写真の書き出し
最後に写真の書き出しについて比較します。
できれば元データにRAWデータを用意すべきですが、今回はJPEGを使います。GIF/JPEG/PNG32それぞれの形式に再び書き出し、ファイルサイズを比較してみました。
拡大してみると、JPEGの8*8ブロックがよく分かりますね。
GIFは色数を最大の256色にしていますが、写真の場合劣化は避けられません。JPEGは非可逆圧縮なので、ファイルサイズも抑えられ実用的です。ただし書き出しを行うたびに劣化し、戻ることはないので注意しましょう。PNG32は見た目上は元画像と差はありません。ただしこちらは可逆圧縮なので、ファイルサイズが元画像のデータと比べ非常に大きくなってしまいました。
| 形式 |
減色 アルゴリズム |
ディザ アルゴリズム |
色数制限 | 画質 | 透明色 | マット |
段階的 表示 |
メタ データ |
ファイル サイズ |
|---|---|---|---|---|---|---|---|---|---|
| GIF | 特定 | 誤差拡散法 | 256 | - | なし | ホワイト | なし | なし | 588.6KB |
|
JPEG （最適化 オプションON） |
- | - | フルカラー | 60 | なし | ホワイト | なし | なし | 189.2KB |
| PNG32 | - | - | - | - | 有り | - | なし | なし | 1.259MB |
比較するまでもありませんが、JPEGのファイルサイズが圧倒的に小さいですね。
JPEGの画質設定による違い
先ほどの比較で、JPEGに書き出した方がファイルサイズが低いことは分かりました。そこで気になるのが、JPEG特有の画質オプションを変えたときの比較です。画質オプションをどの程度にするのが良いのか、比較してみましょう。
このサンプルでは、画質オプションを30/60/90とします。
画質が大きく違うのは30と60ですね。流石に画質30は使いどころに気をつけなければならないぐらい劣化しています。
| 形式 | 画質 | マット | 段階的表示 | メタデータ | ファイルサイズ |
|---|---|---|---|---|---|
| JPEG | 30 | ホワイト | なし | なし | 123.2KB |
| JPEG | 60 | ホワイト | なし | なし | 189.2KB |
| JPEG | 90 | ホワイト | なし | なし | 322.9KB |
画質60と90では目で見た画質に大きな違いはありません。代わりにファイルサイズに大きな差があります。この画像の場合は、画質60でも気にならないので60まで落としても問題ないでしょう。
JPEGで書き出す場合は、必ず画質の値をチェックしておきましょう。
画像に含まれるメタデータについて
画像には画像の情報以外にも、著作権情報やExif（撮影時の情報）などのメタデータが含まれています。Webサイトのデザインに使われる画像には、これらのメタデータは不要なことがほとんどです。
メタデータのファイルサイズは大したものではありませんが、サイトに大量の画像があり、それらすべてにメタデータが存在していた場合、ちりも積もれば山です。できるだけメタデータは消しておきましょう。
メタデータの確認方法
メタデータの確認方法を紹介しておきます。メタデータは特別なツールを入れなくてもWindows、Mac共に確認できます。
Windows
コンテキストメニュー（ファイルを右クリック）のプロパティから確認することができます。
