HTMLタグのイメージ”img要素”に関するリストです。イメージ要素の中にいくつかの属性を指定をすることができます。

HTMLタグのイメージ要素に関するリスト

• <img src=”★”>（画像のURL）
• alt=”★”（代替テキスト）
• width=”★” height=”★”（画像サイズ）

<img src=”★”>

イメージ要素の基本。src="★"に画像のパス（絶対/相対パス）を書くことで読み込む。

XHTMLで記述する場合は閉じタグを />にする。

<!--HTML-->
<img src="images/sample.jpg" >

<!--XHTML-->
<img src="images/sample.jpg" />

alt=”★”

画像が表示されなかった場合にalt属性でテキスト文を表示させる。

SEO対策をするのであればGoogleがalt属性を検索対象にするので必須。また音声ブラウザでalt属性が読まれる。

img src="images/sample.jpg" alt="サンプル画像"

width=”★” height=”★”

画像のサイズを指定。なおpx単位は省く。

記述しなくても実寸を表示してくれる。しかし、この属性を指定することで画像読み込みをしつつイメージ要素以降の記事を表示する。ページの表示速度を上げたい場合や、サイズの大きな画像、多くの画像を使っている場合はこの属性の指定を推奨。

パーセント（%）表示の場合はウィンドウの高さを基準にする。

<!--絶対指定-->
img src="images/sample.jpg" width="120" height="80"

<!--ブラウザで比率を変えずにリサイズ-->
img src="images/sample.jpg" width="80" height="auto"