img 要素画像を埋め込む

img 要素は文書に画像を埋め込みます。src 属性で埋め込む画像ファイルの URI を指定し、alt 属性の値は、img 要素のフォールバックとなります。何らかの理由で画像が読み込めなかった場合、この値がレンダリングされます。

なお、img 要素に src 属性は必須です。値は URI となり、埋め込めるファイルは画像形式のファイル (PNG、GIF、アニメーションGIF、JPEG、SVG など) のみとなります。HTML 文書や PDF ファイルなどは img 要素で埋め込むことはできません。

HTML5.1 では img 要素に対して srcset 属性が定義されています。この属性を指定する事により、複数のメディアリソース候補を提供する事が可能になり、所謂レスポンシブ・イメージを実現します。

さらに詳細な説明を見る

サンプルソースを見る

img 要素の仕様

カテゴリ

インタラクティブ・コンテンツとなるのは usemap 属性を持つ場合

コンテンツモデル
この要素を使用できる文脈

エンベッディッド・コンテンツが期待される場所

この要素で使用できる属性
DOM インタフェース
[NamedConstructor=Image(optional unsigned long width
, optional unsigned long height
)]
interface HTMLImageElement : HTMLElement {
  attribute DOMString alt;
  attribute DOMString src;
  attribute DOMString srcset;
  attribute DOMString sizes;
  attribute DOMString? crossOrigin;
  attribute DOMString useMap;
  attribute boolean isMap;
  attribute unsigned long width;
  attribute unsigned long height;
  readonly attribute unsigned long naturalWidth;
  readonly attribute unsigned long naturalHeight;
  readonly attribute boolean complete;
  readonly attribute DOMString currentSrc;
};

詳細説明

alt 属性

画像が表示できなかった場合のフォールバックとして利用される代替テキストを指定します。

src 属性

埋め込む画像ファイルの URI を指定します。

crossorigin 属性

crossorigin 属性は CORS (Cross-Origin Resource Sharing / クロスドメイン通信) 設定属性です。サードパーティ (元の文書とは異なるオリジン) から読み込んだ画像を、canvas 要素で利用できるようにします。

crossorigin 属性には下記の値が指定できます。crossorigin 属性の値が空、もしくは不正な場合は anonymous が指定されたものとして扱われます。

属性値 状態
anonymous Cookie やクライアントサイドの SSL 証明書、HTTP 認証などのユーザ認証情報は不要 (初期値)
use-credentials ユーザ認証情報を求めます

usemap 属性

埋め込んだ画像をクライアントサイド クリッカブルマップとして扱う場合、その対象となる map 要素に指定された name 属性値を指定します。

ismap 属性

埋め込んだ画像をサーバーサイド クリッカブルマップとして扱う場合に指定します。

a 要素の href 属性にサーバサイドでクリックされた座標を元に処理をするプログラムへの URI などを指定した上で、ismap 属性を指定した img 要素を配置することで、サーバーサイド クリッカブルマップを実行します。

width 属性

埋め込む画像のブラウザ画面上での表示サイズのうち、横幅を指定します。数値は正の整数、単位は px になります。

height 属性

埋め込む画像のブラウザ画面上での表示サイズのうち、高さを指定します。数値は正の整数、単位は px になります。

img 要素のサンプルソース

<p>
 <img
  src="photo.jpg"
  width="300"
  height="500"
  alt="熱海に行ったときに撮影した写真です。海をバックに私が写っています"
 />
</p>
<nav role="navigation">
 <ul>
  <li>
   <a href="/"><img src="top.png" alt="トップページ" /></a>
  </li>
  <li>
   <a href="/company"><img src="company.png" alt="会社概要" /></a>
  </li>
 </ul>
</nav>
<p>
 <img
  alt="画像の説明"
  src="sample.png"
  srcset="sample-x1.5.png 1.5x,
          sample-x2.png 2x"
 />
</p>
<p>
 <img
  src="sample.png"
  srcset="sample-480.png 480w,
          sample-640.png 640w,
          sample-1024.png 1024w"
  sizes="(max-width: 480px) 100vw, 80vw"
  alt="画像の説明"
 />
</p>

W3C HTML5 仕様書

4.8.1 The img element