【構文】<img src=”画像ファイルのパス” alt=”代替テキスト”>
Webページに画像を挿入するには、imgタグを使用します。imgタグだけでは画像は表示されません。必ずsrc属性で、「どこにある何の画像を表示するのか」を指定しなければなりません。
代替テキストは、トラブルで画像が表示されない場合、代わりにヒントとなる文字列です。画像の内容をわかりやすく指定しましょう。
【属性】
| 属性 | 属性値 | 意味 |
|---|---|---|
| src | [例] images/photo.jpg | 画像ファイル名だけではなく、保存されている場所も適切に指定する |
| alt | [例] 食事する人 | 代替テキストは画像が見られなくても、想像できるような指定をする |
| width | [例] 200 | 画像の幅（ピクセル数）を指定することにより、画像が表示されなくてもレイアウトが崩れない |
| height | [例] 150 | 画像の高さ（ピクセル数）を指定することにより、画像が表示されなくてもレイアウトが崩れない |
画像ファイルの種類
Webページで使用できる画像には以下のものがあります。特徴を理解し、適切に使い分けられるようにしましょう。
| 拡張子 | 種類 | 特徴 |
|---|---|---|
| .gif | GIFファイル | 256色までの画像ファイル、背景を透明にできる、パラパラアニメーションも可能 |
| .jpg | JPEGファイル | フルカラーの画像ファイル、写真やグラデーションに利用 |
| .png | PNGファイル | PNG-8：256色までのイラストやボタンなど、背景透過 PNG-24：フルカラーで背景透過できるが、ファイルサイズ大きめ |
| .svg | SVGファイル | ベクター形式のため、拡大縮小しても画質が劣化しないで滑らか |