<img>画像を表示する

<img>タグは、HTML文書に画像(image)を表示する際に使用します。 src属性で表示したい画像のファイルを指定して下さい。 img要素には、src属性が必須となります。 値としては、絶対パス・相対パスなどでURLを指定することができます。

また一般的なブラウザでの表示可能な画像フォーマットは、一般的にはJPEG・PNG・GIFとなります。 web用ベクター画像フォーマットのSVGは、Safari4、Opera10、Chrome4などで対応しています。

img要素を使用する場合、HTML文書の構造上、必要な情報として使用する事が望ましいとされています。 そのためレイアウトを目的として画像を表示したい場合は、できる限りスタイルシートを利用するようにしましょう。

またwidth属性とheight属性を指定する事で表示する画像の大きさを指定することができます。 この属性を指定しない場合は、その画像のピクセル値で表示されます。

usemap属性とismap属性は、イメージマップを指定する際に利用します。 イメージマップとは、画像の特定領域内にハイパーリンクを指定することをいい、usemap属性はクライアント・サイド・イメージマップを目的に、そのイメージと結びつけるmap要素へのハッシュ名参照を指定します。 これについてはarea要素とmap要素のページを参照して下さい。

ismap属性は、サーバー・サイド・イメージマップである事を示しますが、これはサーバー・サイドのプログラムとの連携が必要となります。

なおimg要素にtitle属性を指定すると、その値を画像のキャプションとする事ができます。

HTML5での変更点

HTML5のimg要素では、HTML4.01で用意されていたlongdesc属性、name属性、align属性、border属性、hspace属性、vspace属性が廃止され、crossorigin属性が追加されました。 height属性、width属性にはパーセント値を指定することができなくなりました。

HTML5.1の場合はsrcset属性とsizes属性が追加されました。

またHTML5では、img要素のalt属性が必須属性ではなくなりました。 これに伴いsrc・alt属性の組み合わせによって、img要素の意味が異なります。(詳しくは下記の表を参照)

そしてHTML5のalt属性には、img要素が表現しているものを正確にテキストベースで表現する必要があります。 例えば従来では「ひまわり」の写真であればalt="ひまわり"というように、その画像を抽象的に表すテキストが使われていました。

ですが、そのalt属性の「ひまわり」が正確にimg要素を説明しているかどうかは、その文脈によって変化します。 例えば「ひまわり」の成長記録であれば、大きさや色、どういったように成長しているのかなど、その個体の特徴をalt属性に記述するべきでしょう。

また読み上げブラウザで読み上げられる時の事を考えると、そのimg要素が文脈においてどの位置にあり、どういった意味をもつのか、alt属性は必要なのか、などが分かりやすくなります。

img要素の持つ意味の変化
src属性 alt属性 img要素の意味
あり 装飾・補足的イメージ
あり あり 重要なイメージ
あり なし 説明テキストなしの重要なイメージ
なし 存在しない
なし あり alt属性に指定したテキストを表す
なし なし 存在しない

書式

  • <img 属性="値"> ……… 画像を表示する

属性

src="url" 埋め込む画像のurlを指定
alt="代替テキスト" 画像が表示されなかった場合に代わりとなるテキスト
usemap="#名前" クライアントサイド・イメージマップを利用する際に指定
ismap サーバーサイド・イメージマップであることを示す
width="" 画像の幅をピクセル数で指定
height="高さ" 画像の高さをピクセル数で指定
crossorigin="" 別サイトのリソースにアクセスする際の扱い方法
  • anonymous …… 認証を利用しない
  • use-credentials …… 認証を利用する
srcset="" 画像の候補
sizes="" ブレイクポイント・画像の表示サイズ

使用した時の例

<p>クリスマスツリーの飾りつけをしてみた。</p>
<img src="sample.jpg" alt="クリスマスツリーに綺麗な装飾がされている" width="130" height="87">
<p>これを見ると、我ながら上手くできたなと思う。</p>

ブラウザ上の表示例

クリスマスツリーの飾りつけをしてみた。

クリスマスツリーに綺麗な装飾がされている

これを見ると、我ながら上手くできたなと思う。

対応ブラウザなどのデータ

形式 <img src=""> カテゴリ フローコンテンツ, フレージングコンテンツ, エンベデッドコンテンツ, インタラクティブコンテンツ(usemap属性がある場合)
親要素 エンベデッドコンテンツ 子要素 なし
開始タグ 必須 終了タグ なし
グローバル属性 accesskey / class / contenteditable / contextmenu / dir / draggable / hidden / id / lang / spellcheck / style / tabindex / title / translate
対応ブラウザ Internet Explorer8~ , Google Chrome14~ , Firefox7~ , Opera11.5~ , Safari5.1~