コンテンツを豊かに彩る画像（静止画像）の表示方法について解説します。画像イメージは容量が重くなる傾向があります。利用するイメージの形式を適時選択し、ユーザ環境に配慮した軽い容量の画像を用いるように心がけましょう。特にダイヤルアップ環境では、画像の重さは気になるところです。

画像形式についての詳しい解説は、関連ドキュメントの JPEG形式、GIF形式、PNG形式を参考にしてください。

■ 画像を表示する

画像を表示させる要素には、img要素を用います。

<img src="images/hana.png" width="200" height="150" alt="花の絵">

img要素は、画像を表示させるための空要素（エンプティ要素）です。

img要素における各属性の意味は以下の通りです。

属性	値	機能
width	ピクセル	画像の横幅の指定
height	ピクセル	画像の高さの指定
alt	文字列	画像が表示されない場合の代替テキスト（必須）

画像の横幅と高さを設定することにより、モニター上で表示される領域を設け、体感的に早く表示される傾向にあります。また、何らかの理由で画像が表示されない場合の代替テキストを用意する alt属性は、アクセシビリティを実現させる上でも非常に重要な属性で、必須です。

PageTop

■ 画像の位置を指定する

画像を表示する img要素は、インラインレベル要素なので、必ずブロックレベル要素中に配置しなければなりません。ブロックレベル要素に、配置を設定することによって、画像の左右の位置を指定することができます。

<p align="right">  （非推奨）
<img src="images/hana.png" width="200" height="150" alt="花の絵">
</p>

<p style="text-align:right">  （CSS設定：推奨）
<img src="images/hana.png" width="200" height="150" alt="花の絵">
</p>

p { text-align: right }   （CSS設定：推奨）

位置指定の属性値として、left、right、center のどれかを指定します。

PageTop

■ 画像にテキストの回りこみを設定する

画像の左側、あるいは右側にテキストを回りこませる方法は、２つあります。

HTMLによる設定 （非推奨）
<img src="images/hana.png" width="200" height="150" alt="花の絵" align="right">

CSSによる設定 （推奨）
img { float: right }

画像を右側（左側）に配置し、左側（右側）にテキストを回り込ませます。設定する値は、left、right のみ。

PageTop

■ 画像に余白を設ける

画像の上下左右に余白を設ける設定は、以下の２つの方法があります。

HTMLによる設定 （非推奨）
<img src="images/hana.png" width="200" height="150" alt="花の絵" align="right" 
    vspace="10" hspace="10">

CSSによる設定 （推奨）
img { margin: 10px }

HTMLにおける vspace属性、および hspace属性は、いずれもピクセル単位で設定しますが、両者とも非推奨扱いとされております。