最適な画像書き出しの基本

これから身につけるWebサイト高速化テクニック（4）

検証1：ベタ塗りアイコンの書き出し

　まずはじめに、このシンプルなアイコンを最適化してみましょう。

　この例ではGIF、PNG8、PNG32の書き出しを比較します。JPEGは写真向きで透過が使えずさらにブロックノイズが発生するため、あまりベタ塗りアイコンには向きませんが検証してみます。

　検証の方法として、PhotoshopのWeb用に保存ウィザードを呼び出し、4アップの比較を行います。この他2つの例も同様の検証方法です。プレビュー下の見込みファイルサイズがポイントです。

　このプレビューではGIF、PNG8、PNG24の見た目に大きな違いはありませんね。

　JPEGの場合、やはりブロックノイズが目立ってしまいます。

　より細かなオプションとファイルサイズを比較してみましょう。

細かな条件と書き出した時のファイルサイズ（※JPEG（60）は画質60を表します）

形式	減色アルゴリズム	ディザアルゴリズム	色数制限	透明色	マット	段階的表示	メタデータ	ファイルサイズ
GIF	特定	誤差拡散法	8	有り	ホワイト	無し	無し	280 Byte
PNG8	特定	誤差拡散法	8	有り	ホワイト	無し	無し	373 Byte
PNG32	特定	誤差拡散法	-	有り	-	無し	無し	678 Byte
JPEG（60）※	-	-	-	無し	ホワイト	無し	無し	880 Byte

　実際に試した設定状態と、Photoshopの書き出しプレビュー時のファイルサイズを表にしてみました。

　単純にファイルサイズだけを重視するのであれば、gif形式が向いています。ただし、アルファチャネルを利用しなければならない場合は、その限りではありません。

　また、GIFよりPNGの方が高い圧縮率を期待できるため、画像のキャンバスサイズが大きいほどPNGの方がファイルサイズが小さくなります。この程度であればCSS SpriteでPNG画像を1つにすることも想定して、PNG8で書き出してしまっても問題なさそうです。

　JPEGは予想していた通りブロックノイズが発生し、透明色も利用できずファイルサイズも一番大きくなってしまいました。やはりベタ塗りのアイコンのような場合は不向きですね。

検証2：グラデーションボタンの書き出し

　続いて、グラデーションのかかったボタンを試してましょう。

　こちらも写真ではないので、JPEGを抜いたGIF、PNG8、PNG32を比較したいと思います。早速4アップでそれぞれを比較してみましょう。

　グラデーションを利用するとぐっと色数が増加しますが、この程度であれば、GIF/PNG8でも遜色なく利用できそうですね。先ほどのアイコンと違い、ファイルサイズの差に違う結果が出ています。

細かな条件と書き出した時のファイルサイズ

形式	減色 アルゴリズム	ディザ アルゴリズム	色数制限	透明色	マット	段階的表示	メタデータ	ファイルサイズ
GIF	特定	誤差拡散法	64	有り	ホワイト	なし	なし	2.861KB
PNG8	特定	誤差拡散法	64	有り	ホワイト	なし	なし	1.625KB
PNG32	-	-	-	有り	-	なし	なし	3.445KB

　ファイルサイズを見ると、GIFよりもPNG8の方が軽い結果になりました。

　1KB以上違うというのは、そこそこな違いです。また、GIFとPNG32が0.6KB程度の差となりました。先ほどのアイコンと違い、キャンバスのサイズも少し大きくなっているので、PNGの圧縮率の高さが影響してきているのでしょうか。

PNG8のカラーテーブル最大色数について

　上記でPNG8の方が軽い結果となりましたが、GIFやPNG8が持っているインデックスカラーテーブルの最大色数を調整すると、ファイルサイズにどんな変化があるか確認してみましょう。この比較では最大色数を32/64/128とします。

　比較してみると最大色数を32色にした場合、グラデーションのムラが目立っています。64色はぱっと見たところでは気になりませんが、よく見ると少しだけムラがあるように思います。流石に128色は綺麗ですね。

形式	色数	マット	段階的表示	メタデータ	ファイルサイズ
GIF	32	ホワイト	なし	なし	1.262KB
GIF	64	ホワイト	なし	なし	1.625KB
GIF	128	ホワイト	なし	なし	2.043KB

　この3つを比べると128色でもファイルサイズはそれほど重くありません。軽微なムラを気にしないのであれば、ファイルサイズと画質のバランスを考えて64色が最適です。

　このように、画像形式だけではなくカラーテーブルの最大色数と画質も重要なチェックポイントです。