グラフィックや写真などの画像はウェブにおいて重要な要素の一つである。ただし文字に比べるとデータ量が格段に多いので、webの場合は圧縮方法をうまく使い分けてできるだけデータ量を少なくする必要がある。Illustrator, Photoshopをベースに、さまざまな画像の圧縮方法と、画面構成イメージからの素材画像切り出しについてを中心に説明する。
ウェブで用いられる画像形式
ウェブでは、広く使われている形式としてGIFとJPEG、これから本格的な普及が見込まれる形式として PNG や SVG 形式がある。それぞれの形式は異なる圧縮方式を用いており、画像の種類によって向き不向きがある。
GIF
拡張子は .gif。扱える色数は 256色までで、透明色を1色指定することができる。ほとんどのブラウザがサポートしている。ベタ面の再現に向いているので、ロゴやボタン、アイコンなどのインタフェイスを構成するパーツによく使われている。
JPEG
拡張子は .jpgあるいは .jpeg。色数は約1677万色で、ほとんどのブラウザがサポートしている。写真などのように色数が多くグラデーションが多い画像に向いている。
PNG
拡張子は .png。GIFに変わる画像形式として開発されたもので、約280兆色まで再現でき、同じ画質でもGIFより小さいサイズまで圧縮できる。αチャンネルを持ち、半透明の画像をつくることができる。比較的新しいバージョンのブラウザでサポートされている。