jpg にするか png にするか

(1)写真の様にだんだんと変化している画像

●このような画像は色数がだんだんと変化しているため色数が多い。色数を減らすとあるところで突然変化するように見え、違和感がでる。逆に多少の色を変化させてもわからない。たとえば、40 32 20 と色が変化するところを、40 30 20 にしてもほとんどわからない。ここから、jpgの形式が有利である。

●jpgでは圧縮率をあげることでファイルサイズは小さくなるが、画質が落ちてゆく。どのあたりがよいかは画像の特徴と目的による。ほとんどの場合、20%〜25%程度にしておくと間違いない。

●pngで full color ならば画質は完璧だがファイルサイズがインターネットに公開するには大きすぎる。(もちろん目的によりこの画質が必要な場合は仕方がない)256色ではあらが目立ってしまう上ファイルサイズもそう小さいわけでもなく、どう見てもjpgの方が有利である。16色は論外。

●gifもpngの256色と16色と同様。pngより多少大きめになることが多い。

だんだんと変化している画像

★がおすすめ

種類色数画質部分拡大ファイルサイズ
jpg1%○ 100K
jpg20%○ 28K ★
jpg50%△ 17K
jpg80%△ 10K
png16× 27K
png256△ 67K
pngfull◎ 232K
gif16× 28K
gif256△ 76K

(2)べたに塗ってある絵

●このような画像はjpgだと境界線近くにノイズがでる。gifやpngの256色を使うのがよい。もし、色数が少なければ64色とか16色を選ぶとさらにファイルサイズを小さくできることもある。

●色数を減らすときに中間の色を点々と混ぜることで表すことがある。たとえば赤と黄色の点をバラバラにちりばめて橙色を作るような場合である。これが必要な減色をするとファイルサイズがかえって大きくなることもある。

べたぬりの画像

★がおすすめ

種類色数画質部分拡大ファイルサイズ (グラフの長さは(1)の例の5倍に拡大)
jpg1%○ 24K
jpg20%△ 9K
jpg50%× 6K
jpg80%× 4K
png16○ 3K ★
png256○ 4K ★
pngfull○ 7K
gif16○ 4K
gif256○ 5K

(3)細かな文字や線のある説明図

●(2)で説明した特徴が顕著にでる。このような画像はjpgだと字が汚くなるので、gifやpngを使うのがよい。

●色数を減らすときに中間の色を点々と混ぜる(ディザ)が拡大図から理解できる。

説明図

★がおすすめ

種類色数画質部分拡大ファイルサイズ (グラフの長さは(1)の例の5倍に拡大)
jpg1%○ 59K
jpg20%△ 29K
jpg50%× 20K
jpg80%× 13K
png16× 5K
png256○ 6K ★
pngfull○ 11K
gif16× 9K
gif256○ 11K

(4)小さな写真

●小さな写真ということで40px×32pxの写真を調べたが、結果からすると大きな写真と大差ない傾向である。状況が変化するにはまだ大きすぎるのだろう。実際には拡大しないと違いがわからない大きさであるから、場合によっては80%のjpgを選択するのもありだと思う。

★がおすすめ

種類色数画質実物拡大ファイルサイズ (グラフの長さは(1)の例の50倍に拡大)
jpg1%○ 1903
jpg20%○ 916 ★
jpg50%△ 666
jpg80%△ 516
png16× 669
png256△ 2109
pngfull◎ 3347
gif16× 558
gif256△ 2099

(5)小さなべた塗りの絵

●原画の色数からjpgを選択することはまずない画像。pngで16色より256色の方がファイルサイズが小さいのがおもしろい。あまり考えずにpng256がいいということか。

★がおすすめ

種類色数画質実物拡大ファイルサイズ (グラフの長さは(1)の例の50倍に拡大)
jpg1%○ 1836
jpg20%△ 903
jpg50%× 674
jpg80%× 514
png16○ 397
png256○ 393 ★
pngfull○ 531
gif16○ 284 ★
gif256○ 1059

(6)もっと小さな絵

●さらに小さく14px×14px小さい画像は色数が限られているのでjpgが不利という状況がよくわかる例。どういうわけかgifが不振。

★がおすすめ

種類色数画質実物拡大ファイルサイズ (グラフの長さは(1)の例の100倍に拡大)
jpg1%○ 673
jpg20%△ 502
jpg50%× 431
jpg80%× 365
png16○ 231
png256○ 222 ★
pngfull○ 257
gif16○ 884
gif256○ 884

聖愛高等学校
http://www.seiai.ed.jp/
Last update: 2006/5/14