Wed >画像 >画像の基本

ホームページはテキストと画像で表現されています。その画像制作に必要な知識や色彩の基本を取り上げます。

ホームページの画像

ホームページは文字と画像で表現されています。ホームページはHTMLで記述されているテキストファイルです。文字はテキストですから、HTML内に直接記述されます。ただし画像はバイナリファイルですから、HTML内に含めることはできません。画像は「imgタグ」を使って、HTML内に外部ファイルを呼び込むパスを記述します。

XHTMLの記述:<img alt="" src="パス/画像ファイル名" />

画像はデータの形式から「ビットマップ形式」と「ベクター形式」の2種類があります。

▲ページの先頭へ

ビットマップとベクター

ビットマップ形式は、格子状に分割された小さな点のあつまりで画像を表す形式です。その小さな点を「ピクセル」と呼び、縦横に並んだ点の数で画像サイズを表現します。例えば、横800ピクセル、縦600ピクセルの画像サイズは、800×600ピクセルです。

ホームページに用いられる画像形式は、「GIF」「JPEG」「PNG」の3種類です。それらは、すべてビットマップ形式の画像です。ビットマップ形式は、拡大すると品質が低下しますので、ホームページでは画像を拡大しないで100%を使用します。

一方、大きさと方向を持つベクトルで点を構成していく画像形式を、ベクター形式と言います。ベクター形式には座標という概念が必要です。つまり点の集まりを座標上の数式で表現しているのです。製図で用いられる「CAD」は、データをベクター形式で保存します。ベクター形式は、拡大縮小処理を行っても品質を低下させないメリットがあります。

画像を扱えるソフトウェアでは、ビットマップ形式を編集する「ペイントソフト」、ベクター形式を編集する「ドローソフト」と呼ばれます。写真の画像処理である「フォトレタッチ」は、ペイントソフトに分類されます。ペイントソフトには、Windows標準のペイントやMacPaintなどがあり、ドローソフトにはAdobe Illustratorや MacDrawなどがあります。WordやExcel、PowerPointには、図形や描画のための「ドローツール」が組み込まれています。

ホームページ作成で用いられるグラフィックソフトでは、ビットマップ形式もベクター形式も扱うことができます。Adobe Fireworks、Microsoft Expression Design、ホームページビルダー付属のウェブアートデザイナーなどがあります。

▲ページの先頭へ

GIF、JPEG、PNG

GIF JPEG PNG8 PNG24 PNG32
特徴 イラスト
アイコン
写真 イラスト
アイコン
写真 透明度
色深度 8 bit 24 bit 8 bit 24 bit 24+8 bit
色数 256色 1670万色 256色 1670万色 1670万色+アルファチャンネル
圧縮 可逆圧縮 非可逆圧縮 可逆圧縮 可逆圧縮 可逆圧縮
透過 透過1色 透過256色 アルファ256色
アニメーション アニメーション

GIFは、Graphic Interchange Formatの略で、「ジフ」と読みます。GIFは、米国のCompuServe社が開発した画像形式で、アイコンやイラストなどの保存に用いられます。LZW圧縮に使われていたアルゴリズムの特許も、現在は特許権期間切れとなっています。256色まで扱え、透過GIF、アニメーションGIF、インターレースGIFなどがあります。

JPEGは、Joint Photographic Experts Groupの略で、「ジェイペグ」と読みます。ISOに設置された専門家組織のグループ名がそのまま使われています。JPEGには、若干の画像劣化を許容する方式(80%)と、全く劣化のない方式があります。写真のような自然画像には向きますが、コンピューターグラフィックのイラストや図形などは不向きです。デジカメの画像フォーマットにも採用され、24ビットフルカラーで保存します。画像劣化を許容すれば、大きな圧縮効果を得ることができますが、データを復号しても圧縮前のデータに復元することができない「非可逆圧縮」です。それゆえ、JPEG画像を加工して新たな画像を作成する場合は、すべて元ファイルから行います。

PNGは、Portable Network Graphicsの略で、「ピング」と読みます。GIFやJPEGに代わる画像フォーマットとして開発され、WWWの標準化をすすめるW3Cによって推奨されています。PNG8、PNG24、PNG32は、Fireworksで書き出せるフォーマットです。

▲ページの先頭へ