Pixelmatorで変換したWebPとJPEGを比較してみた

WebPは簡単に説明するとJPEGよりファイルサイズの小さい静止画フォーマットを作り、ネット上を流れるトラフィックの削減とブラウザでの画像表示の高速化を目的にGoogleが動画フォーマットWebMを元に作成した画像フォーマットです。ちなみに「うぇぶぴー」では無く「うぇっぴー」と読むみたいです。

JPEGと同様、ロスレスやアルファチャンネルには未対応のフォーマットと成っています。

詳しくはこちらを参照下さい。

WebP - Wikipedia
http://ja.wikipedia.org/wiki/WebP

そのWebPがChrome 9でサポートされたとの話を聞いたので以前からやろうやろうと思いながらも先送りにしていたWebPとJPEGの画質とファイルサイズ比較をしてみました。

デジカメで撮影した画像を一度、Pixelmator(画像編集ソフトです)でPNG形式のファイルに変換後、JPEGとWebP形式のファイルとして書き出しました。書き出しの「画質」はJPEGの時のデフォルト値(だったはず(^_^;))の85%と100%で出力してみました。

元画像はこちら。

評価は元の画像と変換後の画像のRGB値の差で行いました。例えば元の画像のピクセルのRGBの値が(100, 100, 100)だったときに変換後のピクセルのRGB値が(110, 95, 100)だった場合は差の値は15として計算しています。

この様にして検証し、1ピクセルで発生した差の最大値、全体での合計値、平均値( ピクセルの差の合計/(画像の横サイズx画像の縦サイズ) )などの情報をまとめてみました。

なお、自分の作った検証プログラムはWebPのファイル読み込みには対応していないのでWebPに変えた後、PNG形式に変更して比較を行いました。

結果はこちら。

【デジカメで撮影した画像(一部を切り取り、320x240にしたもの)】

フォーマット(画質設定)	最大値	合計値	平均値	ファイルサイズ
オリジナルのPNG				193KB(192223byte)
WebP(100%)	116	876946	11.418568	60KB(61736byte)
JPEG(100%)	8	58390	0.760286	170KB(174258byte)
WebP(85%)	123	1221516	15.905156	35KB(35468byte)
JPEG(85%)	116	910206	11.851641	67KB(68630byte)

確かにWebPはJPEGに比べるとサイズは小さく成っている様です。しかし、画質の面で見てみるとWebP(100%)の時の画質がJPEG(85%)の時と同等という事が読み取れます。この2つで比較するとサイズは60KBと67KB。ちょっと期待していたほどは小さくならないみたいです。

まぁ、実はこのパターンでは始めからWebPの方が分が悪いだろうなぁ？とは思っていました。自分は画像フォーマットについてそんなに詳しくは無いですがそれでも、元々はJPEGだった画像なので既にJPEGに有利な並びに成っている画像を再度、JPEGにするとなるとJPEGが有利だろうと思っていました。

と言う事で次はプログラムに生成させたグラデーション画像で比較して見ることしました。

元画像はこちら。

【グラデーションの画像(640x480)】

フォーマット(画質設定)	最大値	合計値	平均値	ファイルサイズ
オリジナルのPNG				6.0KB(6161byte)
WebP(100%)	8	799785	2.603467	3.8KB(3879byte)
JPEG(100%)	6	603520	1.964583	28KB(28427byte)
WebP(85%)	13	1143816	3.723359	1.7KB(1747byte)
JPEG(85%)	7	631680	2.056250	28KB(28577byte)

WebPのサイズがかなり小さいです。画質の面ではWebP(100%)がJPEG(85%)より悪い様です。

後、そもそもJPEGはオリジナルのPNGよりファイルサイズで負けています。これはJPEGにする意味が無いですね。

こういうタイプの画像はJPEGは苦手な様です。まぁ、写真の画像とは程遠い画像なのでちょっと選択ミスだった様です。

よく考えたらあそこまで綺麗なグラデーションの画像ってのもそうそう使うものでは無いなと思い、もう少し複雑な内容の画像でもテストしてみました。

元画像は以前、WebGL勉強会で使ったスライドの1枚。これであれば「テキスト＋図」ですし、結構実際に使用するシチュエーションに近い様な気がします。

画像は「keynoteの画像をPDFで出力→その1枚をPNGで保存→WebPとJPEGに変換」という形で作成しました。

元画像はこちら。

【スライドの画像(320x240)】

フォーマット(画質設定)	最大値	合計値	平均値	ファイルサイズ
オリジナルのPNG				72KB(73846byte)
WebP(100%)	110	258137	3.361159	12KB(12560byte)
JPEG(100%)	7	77586	1.010234	58KB(58932byte)
WebP(85%)	138	373672	4.865521	6.4KB(6589byte)
JPEG(85%)	128	277334	3.611120	21KB(21461byte)

WebP(85%)、確かにサイズはJPEGに比べサイズはかなり小さいのですがJPEGより元画像からの変化が大きいですね。
そこでJPEG(85%)の平均値を下回るまでWebPの画質を上げてみました。

フォーマット(画質設定)	最大値	合計値	平均値	ファイルサイズ
WebP(90%)	116	327420	4.263281	7.7KB(7866byte)
WebP(95%)	113	282644	3.680260	9.8KB(10072byte)
WebP(96%)	113	282644	3.680260	9.8KB(10072byte)
WebP(97%)	112	276074	3.594714	10KB(10571byteKB)