img 要素

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

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

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

img 要素に指定可能な各属性について説明しています。詳しい説明は各属性のページもあわせてご確認ください。

alt 属性

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

src 属性

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

srcset 属性

srcset 属性は、picture 要素内で使用する source 要素や、img 要素において、複数のイメージソースを指定するために使用されます。値は 「カンマ（,）」 区切りで複数の画像候補の URL を指定する事ができます。

sizes 属性

sizes 属性は、link 要素によって関連付けられた画像ファイルなどのサイズを指定します。

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 になります。

referrerpolicy 属性

referrerpolicy 属性は、リンク先にアクセスする際、あるいは画像など外部リソースをリクエストする際にリファラ（アクセス元の URL 情報）を送信するか否か（リファラポリシー）を指定します。

decoding 属性

decoding 属性は、ユーザエージェントに画像デコードのヒントを提供します。

loading 属性

loading 属性は、ユーザエージェントに画像取得のヒントを提供します。img 要素、および iframe 要素に指定可能で、ブラウザネイティブ実装の遅延読み込み（Lazy loading）を実現します。

<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>

IE11	○
Edge（EdgeHTML）	○
Edge（Chromium）	○
Chrome	○
Firefox	○
Safari	○
iOS Safari	○
Android Chrome	○