アイコン画像などでよく使用される形式です。拡張子は .gif です。256色しか扱うことができませんが、透過GIFやアニメーションGIFなどの機能がサポートされています。CompuServ（現在は AOL に吸収）という米国のパソコン通信会社が定めたフォーマットです。Unisys社による特許問題によって、GIF を扱えるフリーソフトが一時姿を消していましたが、2004年に特許の有効期間が過ぎ、フリーソフトも復活しています。
GIF画像でUnisysの特許問題があることから、GIFに代わるフォーマットして定められたのがPNG(ピング)です。拡張子は .png です。HTML などの標準化を行っている W3C という団体が規定しました。Internet Explorer 4.0 以降で対応しています。
写真などでよく使用される形式です。拡張子は .jpeg や .jpg などです。
Windows 標準の画像フォーマットです。「ペイント」などで作成した画像も通常は BMPファイルとして保存されます。しかし、ファイルサイズが大きく、BMPファイルに対応していないブラウザも多くあることから、Webページではあまり使用されません。GIFやPNGに変換してから貼り付けるのが一般的です。
画像ファイルを用意する方法をいくつか紹介します。
「ペイント」は Windows に標準でインストールされているお手軽なペイントソフトです。Windows XP 以降のバージョンや、Microsoft Office のオプションをインストールしていると、ペイントでも GIF や JPEG の読み書きができるそうです。
下記にいくつかのソフトを紹介していますので、参照してください。
デジタルカメラもいろいろ出てきました。30万画素だとやはりちょっと悲しいですが、ホームページ作成には150万画素もあれば十分のようです。自分で紙に描いたイラストなどを読みこませたりするにはスキャナを用います。
フリーや有料の画像集が数多くあります。ホームページで無料で配布されていたり、書店で素材集として売られていたり。リンクが必要とか商用利用は禁止など使用条件があるものもあるので注意して使いましょう。
商用に使うならプロに作ってもらうことも考えられます。1個1,000円とか1万円とか値段もいろいろのようですが。
お絵描きソフトには大別して以下のような種類があります。ソフトによって得意な機能と不得意な機能があるので、自分の目的に合ったソフトを利用しましょう。
Windows の「ペイント」に代表されるように、ドット編集を行うお絵描きソフトです。ペンやブラシを駆使して線画や水彩画のような絵を仕上げていきます。ラスタ編集とも呼ばれます。ペイント、Hyper Paint、Pixia、D-Pixed などがこれに分類されます。
ドットの編集を行うという点ではペイント系と同様ですが、主な目的は写真の加工です。ぼかし、シャープ化などのフィルタ効果をサポートしているのが特徴です。Photoshop、Pixef などがこれに相当します。
四角や円や文字を描いたときに、四角は四角として、円は円として、文字は文字として再編集することができます。高さ、横幅、直径といった値を操作することからベクトル編集とも呼ばれます。Paint Shop Pro などがこの機能をサポートしています。
BMPファイルをGIFファイルに変換する方法について説明します。（BMPファイルのファイル名だけを .bmp から .gif に変更してもファイル形式は変わりません。IE では表示することもできるみたいですが、Netscape など他のブラウザでは表示できません。）
Windows 98 以降で Microsoft Office の拡張機能（カスタムセットアップから適切なグラフィックフィルタ）をインストールしている場合は、ペイントに GIF や JPEG の読み書き機能が追加されます。「名前をつけて保存」の時にファイルの種類で GIF を選びます。Windows XP からは標準で GIF / JPEG をサポートしています。
Unisys 社の特許も有効期限を過ぎたため、GIF 画像を扱えるフリーソフトも増えてきました。「とほほの厳選ツール集(イメージ編)」を参照してください。
Photoshop、PaintShop Pro などのお絵描きソフトを持っている場合は、これらのソフトで変換することができます。方法は簡単。BMPファイルを読みこんで、「名前をつけて保存」などのメニューから GIFファイル形式を指定して保存するだけ。
透過GIFはGIFの画像の任意の一色を透明にするものです。透明にすることにより、白以外の背景に置いても白い余白を見えなくすることができます。（下の例では、白を透過色に指定すると目の部分も透過されてしまうので、透過色にしたい部分を赤色に塗って、赤色を透過色に指定しています。）
| 通常のGIF | 透過GIF |
|---|---|
|
|
Photoshop を用いて、[イメージ]→[モード]→[インデックスカラー] で画像をインデックスカラーモードにし、[ファイル]→[出力用プラグ]→[GIF89a書き出し...]で、＋印のついたスポイトで透過したい色をクリックして [OK] します。
Windows 98 + Office の環境であれば、ペイント [表示]→[キャンパスの色とサイズ]→[背景色に透明を使用] で可能。Windows XP のペイントも GIF を扱うことはできるが、透過GIF は作成できないみたい。
画像を表示する際にまず荒い画像を表示して、だんだんと鮮明な画像に変わっていく仕組みです。インタレースGIFを扱えるツールについては「とほほの厳選ツール集(イメージ編)」を参照してください。ここでは、各ツールの使用方法について説明します。
Photoshop の [ファイル]→[出力用プラグ]→[GIF89a書き出し] で [インターレース] のチェックをオンにします。
Paint Shop Pro の [ファイル]→[名前を付けて保存] で [ファイルの種類]に[GIF - CompuServ] を、[サブタイプ]に[Version 89a - インタレース] を選びます。
「GIFアニメーション」「GIFアニメ」「アニメGIF」「アニメーテッドGIF」などいろいろ呼ばれます。複数のGIFファイルを連結して簡易的な動画を実現するものです。基本的には２コマの動画を作成するには２倍の、３コマは３倍のファイルサイズとなります。
Giam 左側の [コマ表示窓] に画像ファイルをいくつかドラッグ＆ドロップし、[ファイル]→[名前を付けて保存]。CtrlやShiftキーを押しながらファイルを複数選択すれば、ウェイト時間なども一括で変更できるし、画像サイズを可能な限り小さくする（書き換えなくてもよい部分の画像を自動カットしてくれる）機能も備えているので、一番オススメ。Unisys社の特許問題のために一時期有料ソフトでしたが、2004年にフリーソフトとして復活しました。
プログレッシブJPEGは、インタレースGIFのJPEG版みたいなもので、最初ぼんやりした画像が、次第に鮮明な画像が表示されるものです。ツールについては「とほほの厳選ツール集(イメージ編)」を参照してください。
Photoshop を用いて [ファイル]→[複製を保存] で、[別名で保存] 欄を [JPG(*.JPG,*.JPE)] にして [OK]。[JPEGオプション] ダイアログで [プログレッシブ] をクリックして保存します。
Paint Shop Pro を用いて [ファイル]→[名前をつけて保存] で [JPEG - JFIF準拠(*.jpg, *.jif, *.jpeg)] を選んで [オプション] の [エンコーディング] で [プログレッシブエンコーディング] を選択します。
画像ファイルは減色することにより、ファイルサイズを小さくすることができます。写真やグラデーションのかかった画像は、いろいろトライしてみて、減色と見栄えのバランスを試してみましょう。
あたりまえのことかも知れませんが、画像ファイルはできるだけ小さくしましょう。無駄な画像や動画はカットしたり、減色したりしてみてください。
imgタグのwidthやheight属性で見かけ上の表示サイズを小さくしても、ファイルサイズは変わらないので表示速度は変わりません。画像を縮小表示する際は、お絵描きソフトなどで、ファイル自体の大きさを小さくしてから貼り付けましょう。
Windowsの場合、16bit High Color モードでは奇麗に見えていた画像も、256色モードで見て見ると全然違った配色になってしまいがっかりすることがあります。特に背景はわずかの色の変化が文字の読みやすさに多大な影響をあたえるので、一度256色モードでのチェックをお勧めします。基本16色パレットと216色パレットに存在する色のみを使用して作成すると、フルカラーモードでも256色モードでも変化の無い画像を作成することができます。
<img>タグを使用する時はできるだけheight、width属性をつけるようにしましょう。これをつけるだけで、体感的な読み込み速度が違ってきます。
<img> タグには alt属性で名前をつけるようにしましょう。テキストのみの表示でブラウザを使用している人や、画像ファイルの読み込み途中でも、画面全体のレイアウトや構成が把握できるようになります。
中身が同じ画像ファイルは複数の場所には置かないようにしましょう。同じ中身でも場所が異なるとブラウザは再度読みにいきますが、同じ場所の画像であればキャッシュされたデータを表示するはずです。
Macintosh の一部機種で Netscape Navigator 3.02 以下のバージョンを使用している場合、かつ、32000色以上のモードで、64×64ピクセル未満の画像を貼り付けた場合、画像が真っ黒に見えることがあるそうです。
クリッカブルマップとは、ひとつの画像の中のクリックした場所によってジャンプ先を変更する機能です。クリッカブルマップを実現するには次のような方法があります。
サーバーの種類によって若干方法が異なります。また、画面上のどこをクリックすればどこにジャンプするのかブラウザ側に明示できません。この方法は、私はあまり好きではないので、説明はしません。
Netscape Navigator 2.0、Internet Explorer 3.0 以降では HTML文書の中にクリッカブルマップの指定を行うことができます。詳しくは <map> タグの説明を参照してください。
<img> タグで均等の高さの矩形画像を隙間無く並べます。サーバーやブラウザの種類を問わない、alt属性によってテキストモード表示でも意味が分かるなどの利点もあり、オススメです。タグとタグの間（> と < の間）にスペースや改行を入れると隙間が空くことがあるので、img と border の間で改行しています。
<table cellspacing=0>
<tr>
<td><a href="aa.htm"><img
border=0 src="aa.gif" alt="aa" width=40 height=40></a></td>
<td><a href="bb.htm"><img
border=0 src="bb.gif" alt="bb" width=40 height=40></a></td>
</tr>
<tr>
<td><a href="cc.htm"><img
border=0 src="cc.gif" alt="cc" width=40 height=40></a></td>
<td><a href="cc.htm"><img
border=0 src="cc.gif" alt="dd" width=40 height=40></a></td>
</tr>
</table>