画像はデータ量が多くなります。上のアリの絵で1237バイトの大きさです。これは日本の文字にすると1237÷2≒618文字分です。インターネットで情報を流す場合、データ量は少ない方が有利です。
大きな写真や絵ではもっとたいへんです。右の写真は37806バイトあります。読みにくいので1000で割って約37キロバイト(KBと書きます)としておきます。でもこれは jpg のファイルなのでこれでも小さくなっているのです。これをもし bmp の形式で保存すると368KBにもなってしまいます。
グラフで表すと違いは歴然です。
bmp形式 | 368KB |
jpg形式 | 37KB |
画像が線画やべた塗りだと jpg では画質が悪くなります。このような画像の場合は png にします。例えば次のような画像です。
フルカラーサンプル
これで約4KBです。写真に比べて色の変化が単純なので割と少なくて済みます。それでもこれを bmp の形式で保存すると70KBにもなってしまいます。
さらにこの画像は使っている色の数が少ないので減色することでさらに小さくできます。
256色サンプル
256色にしてもほとんど違いがわかりません。これで約3KB程度にすることができます。
この画像はjpg向きの画像でないのですが、無理矢理jpg形式にすると、境界線に色の「にじみ」がでてきて画質が悪くなるうえ、大きさもpngより大きくなってしまいます。
jpgサンプル
これもグラフで表してみます。(長さは写真のグラフの2倍)
bmp形式 | 70KB |
png形式(フル) | 4KB |
png形式( 256) | 3KB |
jpg形式(不適) | 6KB |
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ではそれほど大きさが違いませんから、フルカラーを使うというふうに決めると楽かも知れません。