img要素

img要素は、画像を表します。


src属性

src属性は必須の属性で、リソースを指定します。

指定できるリソースは、PNG、GIF、JPEGなど画像ファイルのほか、単一ページのPDFやSVGファイル、APNG、アニメーションGIFなどです。ただし、スクリプトを伴うSVGファイル、複数ページのPDFファイル、MNGファイル、HTMLドキュメント、プレーンテキストドキュメントなどは指定できません。


alt属性

alt属性は画像の代替として機能するテキストを指定します。

これは、画像の表示を無効化している場合や、音声ソフトウェア、テキスト・ブラウザ、音声・ブラウザなど、img要素の画像を見ることができないの環境下でのアクセス、また、画像を読み込む問題や画像のソースの誤りなどのケースに対して非常に重要なアクセシビリティを持ちます。そのため、alt属性の値は作成者に注意深く考慮することを要求されます。

特に指定されている場合を除き、alt属性を指定する必要があり、その値は空であってはなりません。また、値は画像に対して適切な置換でなければなりません。

適切な代替テキストを決定するためには、画像がページに含まれている理由を考えることが重要です。alt属性の代替テキストで悩んだら、その目的は何か?このように考え、ユーザーにとって何が重要かを考えます。


例a)とある色を選択するよう求めるコンテンツです。色は画像により表示されているため、画像が表示されない場合ユーザーは、alt属性の値のテキストがでしか得ることができません。

<h2>色を選択して下さい。</h2>
<ul>
<li><a href="red.html"><img src="red.jpg" alt="赤" width="88" height="31"></a></li>
<li><a href="blue.html"><img src="blue.jpg" alt="青" width="88" height="31"></a></li>
<li><a href="green.html"><img src="green.jpg" alt="緑" width="88" height="31"></a></li>
</ul>

表示)

色を選択して下さい。

上記のHTMLドキュメント


例b)とあるサイトのロゴです。alt属性にサイト名を指定しています。

<img src="eg_com.png" alt="e.g.com" width="88" height="31">

表示)

e.g.com

例b_1)とあるサイトのロゴです。例bと異なるのは、外部サイトへのハイパーリンクが指定してある点です。alt属性へ記述する値の意味が変わります。

<a href="http://example.com"><img src="eg_com.png" alt="e.g.com ウェブサイトへ" width="88" height="31"></a>

表示)

e.g.com

例c)とあるサイトのロゴです。文字列が2つに分かれている点、大文字小文字が混在する点を考慮して記述します。

<img src="html5_embedded_img/aaa_bb.png" alt="AaA bB" width="88" height="31">

表示)

AaA bB

例d)とあるブログやウェブサイトの装飾用のバナーです。画像がユーザーに伝える情報を持たない場合や、ユーザーにとって意味を持たない画像などは、alt属性には空の値を指定します。

<img src="example_banner.jpg" alt="" width="468" height="60">

表示)


なお、img要素は、レイアウトツールとして透明な画像を表示するために使用すべきではないとされています。


その他のalt属性の例は、4.7.1.1.2 General guidelines(英語)以降をご参照下さい。


usemap属性

usemap属性は、map要素の形式のメージマップに関連付ることができます。値は#に続き、任意の文字列(map要素のneme属性の値と同じ文字列)です。

イメージマップの詳細はmap要素をご参照下さい。


例)

<p>
<img src="image_map.jpg" usemap="#shapes" alt="3つの形:青い円形、赤い四角形、緑の五角形" width="500" height="200">

<map name="shapes">
<area shape=circle coords="100,100,50" href="blue.html" alt="青い円形" target="_blank">
<area shape=rect coords="200,50,300,150" href="red.html" alt="赤い四角形." target="_blank">
<area shape="poly" coords="400,50,450,88,432,150,367,150,350,88" href="green.html" alt="緑の五角形" target="_blank">
</map>
</p>

表示)

青い円形赤い四角形.緑の五角形

上記のHTMLドキュメント


width属性、height属性

width属性は画像の幅、height属性は画像の高さを指定します。値は負以外の整数(ピクセル)ですが、単位の(px)はつけません。なお、HTML5より値の単位にパーセントを使うことができなくなりました。また、元のリソースと異なるアスペクト比で指定し故意に引き延ばすことはできません。

カテゴリ
フロー・コンテンツフレージング・コンテンツエンベッディッド・コンテンツ、フォーム関連要素、インタラクティブ・コンテンツ(要素がusemap属性をもつ場合)、パルパブル・コンテンツ
要素を使用することができる場所
エンベッディッド・コンテンツが使用できる場所。
コンテンツ モデル(内容に含めることのできる要素)
コンテンツ属性
グローバル属性src属性alt属性width属性、height属性usemap属性crossorigin要素ismap属性

この要素に追加された属性
crossorigin要素
この要素で変更があった属性
width属性、height属性alt属性の重要度。
この要素で廃止された属性
  • longdesc属性。
  • name属性(id属性を使います。)
  • align属性、hspace属性、vspace属性。なお、border属性は使用できますが、値は「0」に限定されます。この項の属性はCSSでより良い処理ができるため廃止されました。