カラー画像のデジタル表現

一般的なカラー画像は「色」のついた「小さな点」の集まりでできています。このような画像の事を「ビットマップ」画像と呼び、画像を構成する色のついた点は「ピクセル(pixel)」、「画素」、「ドット(dot)」などと呼ばれます。
一つ一つの色は光の3原色である赤、緑、青（Red、Green、Blueの頭文字をとってRGBとも表記されます）の色の強さを組み合わせて表現します。色の詳細については色のデジタル表現を参照して下さい。
一つ一つの点は小さな正方形で構成されており、点の大きさを小さくすればするほど精細な画像になりますが、一方で画像のデータサイズが大きくなります。
同様に色の階調（表現できる色の数）を大きくすればするほど綺麗な画像になりますが、画像のデータサイズが大きくなります。
ビットマップ画像の点の細かさの事を「解像度」と呼びます。

RGBカラーを使ったカラー画像のデジタル表現

画像の一つ一つの点をRGBカラーを使って表現する方式です。
（トゥルーカラー(true color)又は、フルカラー(full color)方式とも呼ばれます）
例えばRGBカラーを3バイトで表現する場合、画像の左上の点から右方向に順番に、点の「赤」、「緑」、「青」の色を1バイトずつ並べて表現します。
この場合、画像のデータサイズは「画像の点の数 * 色のバイト数（3バイト）」で計算できます。
例えば、縦200ドット、横300ドットの画像は「200 * 300 * 3」＝「180000」バイトとなります。
下記の中央の画像は左の画像の一部を拡大して表示しています。また、右の画像は左の画像の一部をさらに拡大し点の色のRGBを表示しています。
マウスを左の画像の上で移動することで、中央に拡大して表示する部分を変更することができます。
（右に表示される部分が黒い枠で表示されます）。
右の画像は黒い枠の中の左上の5*5ドットの部分をさらに拡大し、それぞれの点の色のRGBを表示しています。
左の画像の上でマウスのホイールボタンを回転することで右の部分の拡大の倍率を変更することができます。
下のズーム倍率のスライダーを変更することで中央の部分の拡大の倍率を変更することができます。
下の「ファイルから画像を読み込む」を選択することで、左の画像をファイルから読み込むことができます。
読み込んだ画像が下の「左の画像の最大値」の大きさを超える場合は、自動的に最大値の大きさに縮小されます。
描画が遅い場合や、画面が小さい場合はズーム画像の大きさを小さくして下さい。

ズーム倍率（2〜20） 10倍
左の画像の最大値： 300 x 300 400 x 400 500 x 500 （画像を新しく読み込んだ際に適用されます）
ズーム画像の大きさ： 200 x 200 250 x 250 300 x 300 350 x 350 400 x 400
ファイルから画像を読み込む

カラーマップを使ったカラー画像のデジタル表現

画像の一つ一つの点をカラーマップ(color map)で定義された番号を使って表現する方式です。
（インデックスカラー(index color)方式とも呼ばれます）
RGBカラー方式では一つ一つの点を一般的に2バイト又は3バイト又は4バイトで表現します。
一方カラーマップ方式では、色を4ビット(0.5バイト）または1バイトの番号で表現し、それぞれの番号が表すRGBカラーを表の形で表現します。
そのため、同じ大きさの画像でもRGBカラーを使った画像と比べて画像のデータサイズが 約1/6〜約1/2 のサイズになります。
色番号を4ビットで表現する場合は 2⁴ = 16色、1バイトで表現する場合は 2⁸ = 256色の色を一つの画像で表現することができます。

下の左の画像は 50 x 50 ドットのサイズの画像を4ビットのカラーマップ方式で表現したものです。
（この画像は過去のゼミ生の作った作品で使われているものです）
マウスを左の画像の上で移動することで、右に拡大して点の中に色の番号を表示します。
左下の表は色番号とrgbの色の対応を表すカラーマップです（7〜15番の色番号は使用していないので省略しています）。
右下の6つの「カラーマップ○」と表示されているボタンをクリックすることで、画像のカラーマップを変更することができます。
下のスライダーを変更することで右下に新しい色を作成することができ、左のカラーマップの表の番号をクリックすることでその番号の色を変更することができます。

カラーマップ方式の画像のデータサイズ

カラーマップを使ってカラー画像を表現する場合、画像の点のデータのほかに、カラーマップのデータを保存する必要があります。
カラーマップのデータサイズは「カラーマップで表現できる色の数」*「RGBカラーのバイト数」で計算できます。
以下にRGBカラー方式とカラーマップ画像のデータサイズを表にまとめます。
画像のデータサイズは下記の表の「カラーマップのデータサイズ」＋「画像の点の数」＊「色番号のデータサイズ」で計算できます。
たとえば上の画像は「色番号のデータサイズ」 = 0.5バイト、「画像の点の数」が 50 * 50 = 250 個なので、
32 + 250 * 0.5 = 157 バイトとなります。

上の表の右のラジオボタンから画像の形式を選び、下のフォームに画像の縦横の大きさを入力して「計算」ボタンをクリックすることでその画像データのサイズを求めることができます（注：次に説明する画像の「ヘッダ情報」のサイズは含まれていません）。

横のドット数：　 縦のドット数：　
カラーマップのサイズ： バイト　 画像の点のデータサイズ： バイト
合計サイズ： バイト （ Kバイト） （ Mバイト）

カラーマップ方式の特徴

カラーマップ方式の画像は上記のようにRGBカラー方式の画像とくらべてデータサイズが小さいという利点がありますが、同時に表現できる色の数が少ないという欠点があります。
カラーマップ方式は写真のように色を大量に使用する画像を表現するには向いていませんが、ロゴのような少数の色しか使わない画像を表現する場合には向いており、現在でも使用されています。
また、１バイトのカラーマップ方式は256色の色を適切に選ぶことで、写真のような画像であってもそれなりに綺麗な画像を表現することができるので、Web用の画像として広く使われてきました。その一つがGIF形式の画像です（このページの表の右の画像を参照)。
カラーマップ方式はカラーマップを入れ替えることで画像の点のデータを変更することなく、表示する色だけを変更することができます。このことから、ゲームソフトなどの色違いのキャラクターやモンスターなどを少ないデータ量で表現するために使われてきました。
例えば上記で紹介した 50 * 50 ドットの画像は6種類のカラーマップを用意することで、6種類の色違いのキャラクターを表現することができます。その場合のデータサイズは点の色のデータが 50 * 50 * 0.5 = 125 バイト、カラーマップが6つあるので 6 * 32 = 192 バイト。合計 125 + 192 = 317 バイトで表現できます。カラーマップを一つ増やした場合、32バイトしかデータ量が増えません。
一方、同じ画像を色のデータサイズが3バイトのRGBカラー方式で表現した場合は 6 * 50 * 50 * 3 = 4500 バイトものデータが必要になります。

画像のヘッダ情報

画像のデータの中には上記で説明したデータ以外に「ヘッダ」と呼ばれる情報が含まれます。
「ヘッダ」の中には「中にどのような形式（JPG,PNGなどの画像形式のこと）で画像が格納されているか」、「画像の縦横のサイズは何ドットか」などの情報が含まれており、実際の画像のデータのサイズは上記で説明した画像データのサイズにこの「ヘッダ」のサイズを足したサイズになります。
「ヘッダ」に具体的にどのような情報を保存するかは、画像の保存形式によって異なりますが、およそ数十バイトであると考えればよいでしょう。