タウンノート福岡»デザイン・制作»デザインに必要な画像の種類

デザインに必要な画像の種類

最終更新日:2015/10/14

前回、画像の大きさについてご紹介しました。今回は、画像の種類についての説明です。

画像のファイルサイズは巨大

画像の基本的なフォーマットはbmpです。1ピクセルごとにrgb値のデータを取るので、画素数が多ければ、その分大きなファイルサイズになります。

このデータは劣化することはありませんが、ファイルサイズが大きいため、複数の画像を一度に利用したり、表示したりするには不向きです。最近では、一般に使われることはほとんどなく、ファイルサイズを小さくした圧縮形式が使われています。

圧縮の方法で分かれる形式

ファイルサイズの圧縮というのは、ファイルの中にあるデータを、いくつかの法則に従って短くすることを指します。

たとえば、a+b+cの計算結果を出力するというコードがあるとすると、これをdefという3文字に置き換えると、5文字が3文字になり、2文字分ファイルサイズが小さくなります。

小さな差ですが、このようなルールをいくつか作ることで、ファイルの大きさを減らすことができるようになります。画像ファイルも、いくつかのルールで圧縮された形式があり、主に3つのファイル形式が使われています。

以下、大体のイメージができるように圧縮方法を簡単に紹介します。

GIF形式

GIF形式は、初期に利用されていた圧縮形式です。例えば同じ色のピクセルが3つ並んでいたとすると、通常のビットマップでは000000,000000,000000という6桁の数字が3つ並ぶことになります。これを000000*3というように、同じ色で並んでいるピクセルを掛け算するという圧縮をします。

こうすると、18文字で表示されていたデータは、たったの8文字で表示されることになります。(1文字のバイト数が違いますが、説明は省きます)

GIF形式は表示する色数が少ない時代には活躍した形式ですが、最大で256色のデータしか扱えないというデメリットがあります。写真のように多くの色を使う画像には不向きです。

JPG形式

現在写真画像の主流となっているJPG形式は、他の形式に比べて高い圧縮率を誇ります。圧縮には波形を利用しています。

JPG形式は、画像を固定長のブロックに分けます。これに波形のグラフを当てはめて圧縮を行います。このため、グラデーションや細かな色の変化が高い精度で保存されます。

しかし、JPGも完全ではなく、ブロック単位で計算をするために、単調な画像では色のムラが生じます。また、他の圧縮形式をJPG形式に変換すると、元の画質に戻すことはできません。

PNG形式

よほど大きな画像でない限り、ウェブ上ではほぼ主流となっているのがPNG形式です。圧縮率はJPGに及ばないものの、画質の劣化を防ぎ、透明化やレイヤー保存といった技術的なメリットも多いのが特徴です。

PNG形式はいくつかの計算フィルタを持っています。例えば000,001,002,003,004という5つのピクセルを表示したデータがあるとすると、「左のデータとの差分」を計算するフィルタを使って、「000,1,1,1,1」という形にします。これで、15桁の文字を7桁に減らすことが可能になります。

どのような画像でも適度に圧縮できるというメリットがあるため、ネットワークの速度が向上するに連れてPNG形式を利用したウェブサイトは急激に増えています。

今後もネットワークのスピードはさらに改善されることが予測され、普及はさらに増えると思われます。

各場面で使いやすい形式

印刷はJPG、ウェブはPNG、アイコンはGIF。でもPNGでもOK。

印刷は高い画質の画像を複数使う環境が要求されます。そのため、できるだけ圧縮率の高いJPG形式が今後も主流になるでしょう。デジタルカメラで撮った写真は大抵JPG形式なので、それほど気にする必要はないと思います。

ウェブの場合は、ほとんどPNGで問題ないと思われます。ただし、たくさんの画像を一度に表示するギャラリーなどでは、圧縮率の高いJPG形式で表示する必要があります。

この場合は、サムネイルとして小さな画像をJPG形式にしておいて、クリックで一枚画像を表示するときにPNGにするなどの工夫をするべきでしょう。

しかし、現在のネットワーク環境では、PNG形式にして表示が遅いということはほとんど考えにくく、利便性を考えればPNG形式を使っておいて間違いはないでしょう。

パワーポイントの資料作成ならお任せください。