画像の書き出し

ビットマップ画像は以下の画像のように、四角いピクセルの集まりでできている。
type_bitmap.giftype_anti.gif

ここで生じているギザギザを目立たなくするため、背景との中間色を境界に配置してなめらかに見せる技術がアンチエイリアスである。Webのみにとどまらず、ディスプレイ上で表示される画像の多くで使われている技術である。
背景色との中間色になるので、画像を作る際にあらかじめ背景色が分かっている必要があることもある。たとえば背景が白であることを想定して作られたアンチエイリアスを持った画像は、黒の背景の上に配置すると、画像との境界線に灰色の線が入ることになる。

Illustrator, Photoshopによるウェブ用画像の書き出し

Illustrator, Photoshopともにウェブ用に圧縮して画像を書き出す機能があり、圧縮の程度を調節しながら保存できる。「ファイル」メニューより「Web用に保存…」を選ぶ。

GIF

gif.gif

カラー

256色まで表現できるが、色数を下げることによってわずかながらファイルのサイズを小さくすることができる。

ディザ

ディザとは、ある2色をタイル状に交互に配置することによって、遠目から見た際にその中間調を表現する方法である。マットな面に適用されるとざらざらした感じになるので、たいていの場合は「ディザなし」でよい。グラデーションが多くを占めるような画像に対しては有効に働く。

透明部分

書き出す元画像の透明部分を、透明として書き出すかどうかを指定する。透明にしない場合は、「マット」より、何色に変換して書き出すかを指定する。また透明にする場合も、なに色に向かってアンチエイリアスをかけて書き出すか、を「マット」で指定する。

インターレース

これを指定すると、ブラウザで画像を読み込んだ際に、上からだんだんと読み込まれるのではなく、まず全体が粗い画像で表示され、徐々にきれいな画像に変わっていく表示になる。

Webスナップ

GIF画像に割り当てている色を、ウェブセーフカラーに近づける。

JPEG

jpeg.gif

画質

JPEGでは、どこまで圧縮するかを指定できる。画質を上げると、ファイルサイズが大きくなる。圧縮率を優先すると、画面にブロック状のノイズが目立ち始める。

プログレッシブ

このオプションを指定すると、GIFの「インターレース」のように画像を読み込む際に粗い全体像から表示され、だんだんときめ細かな画像になる。

ぼかし

JPEGではなだらかに色が変化する画像の圧縮に向いている。「ぼかし」オプションは Photoshopの「ぼかし」フィルタと同様の効果がかかり、全体をぼかすことによって圧縮率を上げることができる。

マット

元画像の透明部分を、何色に変換して書き出すかを指定する。JPEGは透明部分を持つことができないので、必ず何かしらの色に変換しなければならない。