WWW の歴史的経緯からしても，WWW ページの画像は重要なものである。ここでは，画像の挿入方法について説明する。

　XHTML において，画像を挿入するには，img 要素を用いる。img 要素は必須の属性，src および alt を持ち，少なくとも次のような書式になる。

<img src="URI" alt="代替テキスト" />

ご覧のとおり，img 要素には内容がなく，空要素タグで記述される。空要素タグは“/>”で終わるが，上記のようにその直前に空白を入れておくのがよい。

　さて，img 要素の src 属性に与えるのは挿入する画像ファイルの URI である。a 要素の href 属性と同様，URI は絶対的に指定しても相対的に指定しても構わない。挿入できる画像の種類はブラウザによって異なるが，WWW では次の 3 種類の形式がよく用いられている。

GIF（Graphic Interchange Format）

256 色までの画像に使用する。可逆圧縮で，圧縮により画像は劣化しない。画像中のうち 1 色を“透過色”に指定できる。コントラストのはっきりした，イラストのような画像に適している。低速回線のために，読み込みが進むとともに徐々に細部まで表示されるもの（インタレース GIF）もある。拡張子は主に“.gif”。

JPEG（Joint Photographic Experts Group）

自然画・写真に適している。多くのディジタルカメラは，この形式で画像を保存する。不可逆圧縮で，目立たない部分のデータを間引くが，圧縮のしかた，画像の性質により画質が劣化したり，ノイズが現れたりすることがある。線のはっきりした，線画などには不向きである。低速回線のために，読み込みが進むとともに徐々に細部まで表示されるもの（プログレッシブ JPEG）もある。拡張子は主に“.jpg”。

PNG（Portable Network Graphics）

端的には GIF 形式の欠点と問題を改良したもので，1677 万色の画像を可逆圧縮できる。ピクセルごとに透過度を定めることができる。拡張子は主に“.png”。

　Windows ビットマップ（.bmp）や Macintosh PICT（.pict，.pct）は，多くのブラウザで表示できない。これらの形式の画像は，上記の形式のいずれかに変換しておく必要がある。

　alt 属性は，その画像に対して与える代替テキストである。この画像が表示されない場合に置き換えるべきテキストを記述する。これに関しては Section 8 で詳しく述べる。

　img 要素はテキストなどと同等の扱いで，パラグラフ・見出しなどの中に含むことができる。ただし，body 要素の内容にはならない。

　画像ファイル“fshibuya.jpg”をパラグラフ中に挿入するための記述を見てみよう。

<p><img src="fshibuya.jpg" alt="渋谷駅前" /> 渋谷駅前のスクランブル交差点。信号が変わると，人の波が堰を切ったように交差点を埋め尽くす。</p>

お手元の環境では，次のような出力が得られる。

　さて，img 要素には width 属性と height 属性が指定可能である。これを指定することにより，画像がその寸法で出力される。それぞれ，値は数値で

• 単位を伴わない場合はピクセル単位
• パーセント記号を伴った場合は，表示可能領域の幅（width 属性の場合）および高さ（height 属性の場合）を 100% とした割合

で，寸法が決められる。これにより，画像固有の寸法と異なる寸法で出力させることもできるが，画像固有の寸法で出力させる場合も，この属性を指定しておくことをお勧めする。これによって，一般に，ブラウザは画像のためのスペースが前もってわかることになるから，画像のレイアウトがスムーズになる。

　たとえば，これらの属性を指定して，見出しの内容として画像を挿入する場合，次のように記述する。

<h1><img src="fwelcome.gif" alt="Welcome to my web site!" width="400" height="80" /></h1>

これも参考に出力例を掲げておく。