この画像はどれ?

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

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

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

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

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

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

がおすすめ

種類色数画質部分拡大ファイルサイズ
jpg 1% 100K
jpg 20% 28K
jpg 50% 17K
jpg 80% 10K
png 16 × 27K
png 256 67K
png full 232K
gif 16 × 28K
gif 256 76K

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

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

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

べたぬりの画像

がおすすめ

種類色数画質部分拡大ファイルサイズ (グラフの長さは(1)の例の5倍に拡大)
jpg 1% 24K
jpg 20% 9K
jpg 50% × 6K
jpg 80% × 4K
png 16 3K
png 256 4K
png full 7K
gif 16 4K
gif 256 5K

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

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

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

説明図

がおすすめ

種類色数画質部分拡大ファイルサイズ (グラフの長さは(1)の例の5倍に拡大)
jpg 1% 59K
jpg 20% 29K
jpg 50% × 20K
jpg 80% × 13K
png 16 × 5K
png 256 6K
png full 11K
gif 16 × 9K
gif 256 11K

(4)小さな写真

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

がおすすめ

種類色数画質部分拡大ファイルサイズ (グラフの長さは(1)の例の50倍に拡大)
jpg 1% 1903
jpg 20% 916
jpg 50% 666
jpg 80% 516
png 16 × 669
png 256 2109
png full 3347
gif 16 × 558
gif 256 2099

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

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

がおすすめ

種類色数画質部分拡大ファイルサイズ (グラフの長さは(1)の例の50倍に拡大)
jpg 1% 1836
jpg 20% 903
jpg 50% × 674
jpg 80% × 514
png 16 397
png 256 393
png full 531
gif 16 284
gif 256 1059

(6)もっと小さな絵

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

がおすすめ

種類色数画質部分拡大ファイルサイズ (グラフの長さは(1)の例の100倍に拡大)
jpg 1% 673
jpg 20% 502
jpg 50% × 431
jpg 80% × 365
png 16 231
png 256 222
png full 257
gif 16 884
gif 256 884

聖愛中学高等学校
http://www.seiai.ed.jp/
Last Modified