グラフィックス

2ffd7b1f3cb63a52f9418ba6bf6ad65a_mウェブページに画像は欠かせないものであり、ウェブデザインではデジタル画像に関する知識が必要になる。ここではデジタル画像の成り立ち方、デジタル画像の種類、色のデジタル表現、デジタル画像の保存と圧縮など、デジタル画像の基礎知識について解説する。

1、デジタル画像の基礎

ウェブページで画像を扱うためにはデジタル画像の形式や色のデジタル表現などについて理解しておく必要がある。

  • デジタル画像の要素

デジタル画像は格子状に並んだ標本点で量子化された値を記録して表されている。デジタル画像のここの標本点のことを画素(ピクセル)と呼ぶ。

1ビットの量子化であれば、濃淡を2段階で表現することになり、これを2値画像という。

白から黒までの明暗だけで表現した画像をグレースケール画像と呼ぶ。例えば、8ビットの量子化であれば、256階調、16ビットの量子化であれば、65536階調のグレースケール画像となる。カラー画像では、RGBごとに量子化を行う。RGBそれぞれ8ビットで量子化すれば、合計24ビットになり、約1677万色を表現できる。

  • 解像度と画像サイズ

デジタル画像の解像度は、標本化間隔で決められ、dpiという単位で表されr。dpiとは、1インチあたり南天の標本点を用いるかを表したものである。

例えば、150dpiと300dpiとでは、後者の方が2倍の解像度となる。5インチ×5インチの写真を入力した場合、150dpiでは画素数が750×750=562500となり、300dpiでは1500×1500=2250000になる。

これらの数字は本来画素数であるが、場合によって画素数が解像度として用いられることもある。画像全体のサイズが同じであれば、当然、画素数の多い方が加増度の高い画像となる。

画像サイズは 画素数に量子化ビット数をかけたものとなる。例えば、562500画素の画像が各色8ビットで入力されていれば、データ量は562500×24=13500000ビット=

1687500バイトとなる。(1バイト=8ビット)

  • デジタル画像の階調

デジタル画像は濃淡を出来るだけ多くの段階に分けるほど美しくなめらかな画像が得られる。前述のように、量子化レベルが8ビットで入力されていれば、グレースケールなら256階調、カラー画像ならRGBそれぞれ256階調で表現できる。

  • ラスタ形式とベクタ形式

画素の並びで表現するデジタル画像をラスタ形式と呼ぶ。これは画像や図形に対応する画素に色を描きこむ処理をラスタかというためである。ラスタ形式の画像では標本化された解像度を変更することはできないため、画像を拡大すればするほど粗さが目立ってくる。ラスタかした線分の例である。ラスタ化した斜めの線分は正確な直線にはならない。

一方、点や線、面の位置や長さなどの情報によって表現される画像をベクタ形式と呼ぶ。ベクタ形式の画像は点と点を結ぶ線、線に囲まれた麺という考え方で作成され、線を引く、面を塗りつぶす、トイった命令と数値の組み合わせで画像が構成される。このため、ベクタ形式とビクタ形式を使い分ける必要がある。

・ラスタ形式の特徴と用途

ラスタ形式は写真屋手書きの絵など複雑で微妙な形や色を表現するのに適している。また縁の周囲をにじませるような処理を行うこともできる。ただし、前述の斜線と同様に正確な円を描くことはできない。ラスタ形式の画像は解像度が高くなればなるほどデータサイズが大きくなっていく。

画像を扱うソフトのことをグラフィックソフトという。特にラスタ形式の画像を専門に扱うソフトのことをペイント系ソフトと呼ぶ。

・ベクタ形式は一つの画像の中にある複数の要素を一つ一つ個別に扱うことができ、それぞれのオブジェクトの形の変更、拡大、縮小、色の変更などを自由に行える。そのため、図面やイラストなどの作成に向いているまた、アウトラインフォントも代表的なベクタ形式の一つである。ベクタ形式の画像のデータサイズはラスタ形式に比べれば圧倒的に少ないことが多い。なおベクタ形式の画像を専門に扱うソフトのことをドロー系ソフトと呼ぶ。

  • 色のデジタル表現

デジタルカメラで撮影した画像やイメージスキャナで取り込んだ画像、あるいはグラフィックソフトで製作した画像のほとんどはRGBによる加法混色で色が表現されている。また、それらの画像を表示するディスプレイモニタはは交代によって色を表現するが、これもRGBによって表現されている。

・フルカラーとハイカラー

RGBの各成分の値は量子化された値を用いており、量子化ビット数によって表現できる色数が決定される。8ビットの量子化であれば、256段階となり、RGBそれぞれに量子化が行われるため、

256×256=16777216色、つまり、24ビットの指揮数が得られることになる。24ビットは、一般に人間が識別できる色に対して十分な数と考えられている。このことから、24ビット以上で表される色はフルカラー、あるいはトゥルーカラーと言われている。

16ビットの場合、65536色を同時に表示できるが、これをハイカラーと呼ぶ。

・色空間

デジタル画像を入力出力するための機器では、色の表現可能な領域が決められており、これを色空間という。イメージスキャナ、デジタルカメラ、ディスプレイモニター、フィルムレコーダ、インクジェット方式などの一部のプリンタではRGBの色空間が用いられている。また、商業用印刷屋カラープリンタにおいてはCMYに黒を加えたCMYKの色空間が用いられている。

これらはデバイスに依存する色表現であるため、例えば同じ画像を異なるディスプレイモニタに表示した場合、同じ色が再現されない。これはディスプレイモニタは製品ごとに表示できる色が異なり、同じ型番お製品であっても個体差が存在するからである。

これに対してデバイスに依存しない色空間がCIEである。あるデバイスによる色表現をCIEの色空間位変換して、そのデータを次に渡すデバイスの色空間に変換することによって、異なるデバイス間でもできるだけ同じ色表現を行えるようにすることをカラーマネジメントシステムという。

この機能は一般的にはOSが装備している。WindowsにはICM、MacOSにはcolorsyncが搭載されている。また、アプリケーションソフトがカラーマネジメントシステムを持っている場合もある。

ディスプレイモニタによっては、一般のものより広範囲な色空間を表示できるものもある。

・インデックスカラー

RGBやCMYKなどのように絶対的な色を直接表現する以外にあらかじめ多数の色番号とそれに対応するRGB成分の値の対応表データを準備し、画素ごとに色番号を与える方法もある。この対応表データーをカラーパレット、カラールックアップテーブル、カラーマップなどと呼び、これによって表現される色をインデックスカラーと呼ぶ。例えば、カラーパレットを256個分用意すると、一つの画像に対して256色までの色表現が可能であり、各画素は8ビット、すなわち1バイトで表すことができる。これを8ビットカラーと呼び、色数の少ない画像には効果的な圧縮方法となる。インデックスカラーを用いた代表的なファイル形式にはGIFやPNGがある。圧縮についてはまた後ほど解説する。

  • デジタル画像の保存と圧縮

コンピュータで扱われるテキストや画像のデータはファイルという形で保存することができる。ファイルは一まとまりのデータの基本単位でもあり、ファイルと単位としてデータの保存、出力、授受などを行える。

・ファイル形式

ファイルの実態には、ある決まった規格に基づいてデータが格納される。その規格をファイル形式、あるいはファイルフォーマットとよぬ。ファイル形式にはヘッダとデータの部分に分かれており、ヘッダには、ファイル形式に応じて画像サイズや後述するデータの圧縮アルゴリズムなどの情報が格納っされる。代表的なファイルフォーマットとしては、画像データではBMP JPEG GIF PNGなどあり、ウェブよう画像としてはJPEG GIF PNGなどを利用する。映像データでは、MPRG AVIなど音声データではWAVE MP3などがある。

・圧縮方式

音声データや画像データはデータ量が大きくなりがちであるため、保存や通信お効率化のためにできる限りデータ量を小さくする手法が提案されており、これをデータ圧縮と呼ぶ。圧縮手法には圧縮しても元のデータに完全に復元できる可逆圧縮方式と、復元できない不可逆圧縮方式がある。JPEGは人間の目には検知しにくい高周波成分を除去することでデータ量を削減する方法を取っている。JPEGは不可逆圧縮方式であり、圧縮率が高い。自然がぞう向けには有効であるが、図版ではJPRGの特徴であるノイズ成分が目立つ。図版に対してはGIFやPNGを選択すべきである。データの内容や目的にあわせて圧縮方式を選択することが望ましい。