ウェブページに画像は欠かせないものであり、ウェブデザインではデジタル画像に関する知識が必要になる。ここではデジタル画像の成り立ち方、デジタル画像の種類、色のデジタル表現、デジタル画像の保存と圧縮など、デジタル画像の基礎知識について解説する。
・デジタル画像の基礎
ウェブページで画像を扱うためにはデジタル画像の形式や色のデジタル表現などについて理解しておく必要がある。
デジタル画像の要素
デジタル画像は格子状に並んだ標本点で量子化された値を記録して表されている。デジタル画像のここの標本点のことを画素（ピクセル）と呼ぶ。
１ビットの量子化であれば、濃淡を２段階で表現することになり、これを２値画像という。
白から黒までの明暗だけで表現した画像をグレースケール画像と呼ぶ。例えば、８ビットの量子化であれば、256階調、１６ビットの量子化であれば、６５５３６階調のグレースケール画像となる。カラー画像では、RGBごとに量子化を行う。RGBそれぞれ８ビットで量子化すれば、合計２４ビットになり、約１６７７万色を表現できる。
解像度と画像サイズ
デジタル画像の解像度は、標本化間隔で決められ、dpiという単位で表される。dpiとは、１インチあたり南天の標本点を用いるかを表したものである。
例えば、１５０dpiと３００dpiとでは、後者の方が２倍の解像度となる。５インチ×５インチの写真を入力した場合、１５０dpiでは画素数が７５０×７５０＝５６２５００となり、３００dpiでは１５００×１５００＝２２５００００になる。
これらの数字は本来画素数であるが、場合によって画素数が解像度として用いられることもある。画像全体のサイズが同じであれば、当然、画素数の多い方が加増度の高い画像となる。
画像サイズは 画素数に量子化ビット数をかけたものとなる。例えば、５６２５００画素の画像が各色８ビットで入力されていれば、データ量は５６２５００×２４＝
１３５０００００ビット＝１６８７５００バイトとなる。（１バイト＝８ビット）
デジタル画像の階調
デジタル画像は濃淡を出来るだけ多くの段階に分けるほど美しくなめらかな画像が得られる。前述のように、量子化レベルが８ビットで入力されていれば、グレースケールなら２５６階調、カラー画像ならRGBそれぞれ256階調で表現できる。
ラスタ形式とベクタ形式
画素の並びで表現するデジタル画像をラスタ形式と呼ぶ。これは画像や図形に対応する画素に色を描きこむ処理をラスタかというためである。ラスタ形式の画像では標本化された解像度を変更することはできないため、画像を拡大すればするほど粗さが目立ってくる。ラスタかした線分の例である。ラスタ化した斜めの線分は正確な直線にはならない。
一方、点や線、面の位置や長さなどの情報によって表現される画像をベクタ形式と呼ぶ。ベクタ形式の画像は点と点を結ぶ線、線に囲まれた麺という考え方で作成され、線を引く、面を塗りつぶす、トイった命令と数値の組み合わせで画像が構成される。このため、ベクタ形式とビクタ形式を使い分ける必要がある。