jpg と png と gif

データー量をいかに少なくするか

画像はデータ量が多くなります。上のアリの絵で1237バイトの大きさです。これは日本の文字にすると1237÷２≒618文字分です。インターネットで情報を流す場合、データ量は少ない方が有利です。

写真などが得意な　jpg

大きな写真や絵ではもっとたいへんです。右の写真は37806バイトあります。読みにくいので1000で割って約37キロバイト（KBと書きます）としておきます。でもこれは jpg のファイルなのでこれでも小さくなっているのです。これをもし bmp の形式で保存すると368KBにもなってしまいます。

グラフで表すと違いは歴然です。

bmp形式	368KB
jpg形式	37KB

線画やべた塗りは　png

画像が線画やべた塗りだと jpg では画質が悪くなります。このような画像の場合は png にします。例えば次のような画像です。

フルカラーサンプル

これで約4KBです。写真に比べて色の変化が単純なので割と少なくて済みます。それでもこれを bmp の形式で保存すると70KBにもなってしまいます。

さらにこの画像は使っている色の数が少ないので減色することでさらに小さくできます。

256色サンプル

256色にしてもほとんど違いがわかりません。これで約３KB程度にすることができます。

この画像はjpg向きの画像でないのですが、無理矢理jpg形式にすると、境界線に色の「にじみ」がでてきて画質が悪くなるうえ、大きさもpngより大きくなってしまいます。

jpgサンプル

これもグラフで表してみます。(長さは写真のグラフの２倍)

bmp形式	70KB
png形式(フル)	4KB
png形式( 256)	3KB
jpg形式(不適)	6KB

256色pngとほぼ同じ gif

gif形式はpngよりも古い形式で256色までしか表すことができません。ほとんどpngの256色と同様に使えますが、多くの場合若干pngの方が小さくなります。以前はpngを表示できないブラウザもあって、gifの方が安全でしたが現在は問題ないでしょう。gifを使う理由はありません。pngにしましょう。

画像の形式の選び方

画像の保存形式	色数	画質の変化	得意とする画像の種類	例
jpg	フルカラー	色を微妙に変える	写真・写実的絵画・複雑なもの
png	256色	256色に減らす	線画・イラスト・デザイン文字・小さな画像
png	フルカラー	元のまま	写真のような画像の中に、文字のようにくっきりとした輪郭のある図形が含まれているもの。色が少しでも変わるとまずいもの。
gif	256色	256色に減らす	png 256色 に同じ。

小さな画像の場合は、jpg 形式はメリットがありません。画質が落ちるだけで圧縮の効果が少ないからです。極端な話、16×16ピクセルの画像の場合、16×16=256ですから、すべてのピクセルの色が違っても256色で十分なわけです。

色数を256色に減らす場合に、多少工夫が必要な場合があります。フルカラーのpngと256色のpngではそれほど大きさが違いませんから、フルカラーを使うというふうに決めると楽かも知れません。