意外と知らない?画像の基礎知識とファイルの構造。

RGBA分解_詳細

CGとかWebとか画像を頻繁に扱っている人が知っておくとよさそうな画像の基本構造を紹介します。原理がわかれば普段の作業でも迷いなく作業ができるようになるかと思います。周りの人が意外と知らなかったので、記事にしてみました。

そもそもデジタル画像って何?

アナログ画像(視覚的に得られる全ての対象)をデジタル化(ピクセルに分割・数値化)したものです。

このデジタル化がポイントになります。「パソコンで扱うためには数値化しないといけない」ということを念頭において読んでみてください。

分割!分割!数値化!

アナログ画像をデジタル化するときに、難しく言うと「標本化(Sampling):空間的離散化」と「量子化(Quantization):画素値離散化」ということが行われています。 言葉は難しいですが、難しいのは言葉だけで、わかってしまえば簡単なことです。

標本化:ピクセル化する

まず、2次元的に分割します。要は「数値化しないといけないので、大量の四角で分割する」するということです。 ちょっと難しい言い方をすると、アナログ情報というのは空間的に連続しているので、これを離散的な点(画素)の集合に分割する処理をします。

画像の標本化

大量に分割すれば、よりアナログの情報に近づきますが、その分データ量が大きくなります。つまり、画素が多ければ多いほど(解像度が高いほど)高精細な画像になります。

画像の標本化比較

ここで色を入れるための□ができあがります。

量子化:濃度レベルを決める

色深度、Color Depth、濃度値、濃度レベル、Gray Level、色々と呼び方はありますが、要は「色の階調の分割をどのくらいにするか」ということです。

現実的な光というのは真っ暗からものすごい明るさまで、目に入ってくる光の幅がすごいありますよね。でも、モニタで表示できる色の幅というものは決まっているので、これも分割して数値化しないといけません。

画像の量子化

例えると、絵の具を入れておくパレットのようなものです。色数を増やすこともできますが、その分識別しなきゃいけない数が増えるので、データ量が大きくなります。

基本的にはフルカラー(モニタで表示できる最大の色数:RGB各8bit)で作業します。

画像の量子化比較

これが量子化です。標本化してできた色を入れるための□に、パレットから色を塗っていく感じです。

データ量

画像の基本構造はこれだけなので、データ量は

画素数(横×縦)×濃度レベル(ビット)

になります。

例えば、この300×300ピクセルのグレースケール画像だと、

sample300x300.bmp

300x300x8bit=90000x8bit=90000x1byte=90000byte

という風に計算できます。(8bitのことを1byteと言います)

ですが、よくよく調べると、このビットマップ画像は91080バイトです。「残りの1080バイト分って何?」となりますね。

デジタル画像の中には何が入ってるの?

画像ファイルには、上記のようなピクセルのデータとともに画像データ以外のデータ(上記の画像データだと残りの1080バイト分)、ヘッダーとかメタデータとか呼ばれるものが入っています。

  • ファイルの名前
  • 作成日時・更新日時・アクセス日時
  • 画像の解像度
  • 色数
  • 圧縮の種類
  • その他、ファイルの構造を示すために必要なデータ等

といった類のものです。Windowsのエクスプローラのプロパティとかでも見れますし、より高度なソフトを使えば詳細にデータ構造を見ることができます。

Webの方であれば、ファイルを小さくするために、このメタデータの内、いらないものを取り除くSmush.it™というシステムなどを使っている方もいるかと思います。

もちろんこのファイル構造は画像ファイルの圧縮フォーマット(jpgとかpngとかtgaとかgifとか)によって変わります。

画像の最小単位「ピクセル」をより詳しく見ていくと?

では、より詳しく画像を見ていこうと思います。ここで話すのは量子化の詳しい話になります。

この記事の上の方で出てきた画像はグレースケールでしたが、これがカラーになったときの話です。画像を構成している一個一個の点(ピクセル)を詳しくみていきましょう。

ピクセルと呼ばれるこの点には、R(Red:赤)G(Green:緑)B(Blue:青)という3つのチャンネルがあります

RGB分解

なんで赤と緑と青かというと、これはモニタの色の作り方が光の3原色を使っているからです。

光の三原色

中学くらい(小学校でしたっけ?)に習ったかと思いますが、赤と緑と青の光を組み合わせると、加法混色で様々な色を作ることができるっていうあれです。

もう予想は付くかと思いますが、「モニタの一個一個のドット(モニタを構成する点)」と「画像のRGBチャンネル」は対応しています

顕微鏡とかで見るとわかるのですが、モニタは1個1個のドットが3つのライトを持っています。このライトが赤と緑と青のライトになっています。ちょっと昔のでっかいテレビとかだと、ものすごい寄ってみると赤と緑と青の光が見えたりします。

つまり、この3つのライトと3つのチャンネルが対応しています。コンピューターはモニタに「この場所の、このチャンネルのライトを、このくらいの量光らせて!」という命令を送っています。

モニタの色の作り方

RGBチャンネルにそれぞれに入ってるのは実はグレースケールの画像

RGBチャンネルそれぞれにはグレースケールの画像が入っています。もっと言うと、RGB各8bitの画像なら、8bitのグレースケール画像が3つ、さらに言うと、0~255の値が各ピクセルに3つずつ割り当てられています。

このグレースケールを「色」ととらえずに「ライトをどのくらい光らせるか」ととらえてください。各チャンネルのグレースケール画像のそれぞれのピクセルの値というのは「モニタのRGB値をどのくらい光らせるか」ということを表していることがわかるかと思います。

一般的なモニタはRGB各8bitの階調数(データ幅)を表示できるので、RGBチャンネルそれぞれ8bit=24bitの画像がフルカラー(トゥルーカラーともいいます)の画像となります。

フルカラー

それじゃアルファチャンネルって何?

アルファチャンネルも発想は同じです。グレースケールの画像が入っています。

そもそもアルファチャンネルというのは、「ここ透明にして!」というデータではなく、「プラスアルファ」のデータという意味です。一般的に不透明度を表すデータとして使われているのですが、元々はあくまで補助データです。

つまりチャンネルとは?

それぞれのグレースケール画像に対して、チャンネルごとに出し方を変えているだけ。

RGBA分解_詳細

まとめ

  • デジタル画像というのは、ピクセルというもので構成されていて、デジタル化するために分割されている。
  • 画像データと一緒に、どんな画像データなのかを記述するためのデータが入っている。
  • RGBAチャンネルというのは、それぞれにグレースケール画像が入っていて、そのグレースケール画像に対して、出し方を変えているだけ。

CGでイラストを描いたり、Web用の画像を扱う人でも、このくらいの基本的な画像の知識を知っておくと、仕組みがわかって作業ができるので、より手の込んだことができるようになります。

超基本的なことをダラダラと書きましたが、何かの参考になれば幸いです。

PAGE TOP

Twitter

    人気記事

    新着まとめ