Image Create Lab. [How 2 make?]

せっかく苦労して考えるデザインですから、
綺麗に表示されるまで見届けて欲しいと思うのが、制作者のキモチ。
みんなが快適ブラウジングできる様に、画像素材を軽量化してみましょう。

■ 画像サイズを小さくしよう ■

大きなキャンバスに描かれた絵は、持ち運びが大変です。
大雑把に言ってしまえば、画像データを転送する場合も同じ。
画像の軽量化のための一番原始的な方法は、サイズの縮小です。


JPEG 180*125px. 10 KB	JPEG 90*63px. 6 KB

左の写真と右の写真は元々同じ写真ですが、大きさだけが違います。
ただ、せっかくの写真を小さくしてしまうのは勿体ないので、
普通小さい方はサムネイル（サイズの小さい見本）として使います。

デザインを考える上で、無闇に小さくするのは得策ではありません。
ところが背景素材は、実は小さい画像でも何ら構いません。
ページの全面に敷き詰めてしまえば、大きさは分からないからです。

■ 色数を減らそう (GIF) ■

CompuServe GIF は、ウェブでよく使われる画像の形式です。
アイコンや簡単な挿絵、タイトルロゴ等によく用いられ、
２５６色しか扱うことはできませんが、その分高い圧縮率を誇ります。

ところで、最近あまり見かけませんが、版画という絵画があります。
版画は色数を増やすと共に版の数も増え、大変手間がかかります。
GIF 画像も似たような物で、色数が少ないほど軽量になります。


GIF 164colors 12 KB	GIF 2colors 0.8 KB

左の画像と右の画像は、共に１０ピクセル四方の正方形のタイルを
１０８枚並べた物ですが、使用している色数が大きく違います。
しかし普通は画像を作成する内に、色数は自然と増えていくものです。

そこで、画像の色数を増やさない為の工夫として、
グラデーションツールを使わない、あるいは、
アンチエイリアス機能を使わないといった方法が取られます。

■ アンチエイリアス禁止？ ■

ペイント画像は、１ピクセルを単位とする正方形の集合体です。
そのため文字や円などの曲線を描く時、ギザギザが気になります。
曲線の縁に中間色を置いて滑らかにする処理がアンチエイリアスです。


透過GIF 18colors 1.3 KB	透過GIF 3colors 0.5 KB

左の文字はアンチエイリアス処理済みですが、右の画像は違います。
左の文字の方は、文字の縁の曲線が滑らかに見えます。
右の画像ではシャギーが目立ちますが、色数は少なくなります。


透過GIF 18colors 1.3 KB	透過GIF 3colors 0.5 KB

アンチエイリアス処理画像には、落とし穴があります。
背景を透明化して表示する透過GIF (Transaparency GIF) では、
縁の中間色が透明化されない為、ゴミの様に残ってしまいます。

透過GIF ではアンチエイリアス処理をしないか、
または初めからページの背景色に合わせて画像を作れば大丈夫です。
（上図の左「耐え難きを耐え」は綺麗に表示されています）

■ 画質を犠牲にしよう (JPEG) ■

JPEG も GIF 同様、ウェブでよく使われる画像の形式です。
不可逆的な圧縮をかけることで、画質は少々劣化してしまうものの、
フルカラーを扱う事ができるため、写真やＣＧによく用いられます。

画像を JPEG 形式で保存する際、画質の良さを設定する事ができます。
画質を高画質に設定するほど、画像の劣化は抑える事ができますが、
逆に低画質にすれば、より画像情報を軽量化する事ができます。


JPEG 最高画質 45 KB	JPEG 低画質 10 KB

左の写真と右の写真は元々同じ写真ですが、画質だけが違います。
右の写真（低画質）の場合、石像のおでこの辺り等がつぶれています。
画像により劣化の度合も違います。妥協できる適量を選びましょう。