目次に戻る

img要素：HTML Living Standard各要素別メモ

概要

カテゴリー
配置できる場所
内容モデル
属性
  • グローバル属性
  • src→画像リソースを示すURL。必須。
  • srcset→画像のURLと「非負整数＋小文字のw」（例:200w）又は「非負浮動小数点数＋小文字のx」（例:1.5x）とを半角スペース区切りでセットとして指定（後者は必須ではない）。カンマ区切りで複数セットの指定可能。レスポンシブイメージのための設定。未対応ブラウザでは、src属性値の画像が表示されるだけ。
  • sizes→auto、又は「妥当なメディアクエリとCSSのlength値として許容される値とを半角スペース区切りでセットとして指定（前者は必須ではない）」。カンマ区切りで複数指定可。
  • alt→画像が表示されない場合の代替テキスト。ほぼ必須。
    • 例外的にやむをえず省略が許される場合。
      • 画像がどんなものかHTML文書作成者には分からない場合（作成者以外のユーザーが勝手に画像をアップロードして表示する場合や、ライブカメラで取得した画像を随時切り替えながら表示する場合など）であって、当該img要素がfigure要素の中にあり、かつ、当該figure要素の中にfigcaption要素があって、当該figcaption要素が補足説明の役割を果たしている場合。なお、当該figure要素は、当該img要素ならびにfigcaption要素及びその子孫を除いて、Flow contentを子孫に含んではならない。
      • 画像がどんなものかHTML文書作成者には分からない場合（作成者以外のユーザーが勝手に画像をアップロードして表示する場合や、ライブカメラで取得した画像を随時切り替えながら表示する場合など）であって、当該img要素にtitle属性で補足説明が付されている場合（ただし、この方法は推奨されない）。
    • 属性値を空とすべき場合。
      • アイコン画像で、同等の意味をもつテキストが直前又は直後にある場合。
      • 当該画像が前後のテキストの補足でしかなく、当該画像に代替テキストを入れたら同じことを二度繰り返すことにしかならない場合。
      • 上記のほか、当該画像の前後にテキストがあり、当該画像に代替テキストを入れたら同じことを二度繰り返すことにしかならない場合。
      • 意味をもたない装飾的な画像（ただし、純粋に装飾的な画像ならば、スタイルシートで背景画像として設定する方が望ましい）。
      • 複数のimg要素をもって1個の画像を構成している場合→1個のimg要素のalt属性値に画像全体の代替テキストを入れて、残りのimg要素のalt属性値は空とする。
      • スクリプトの読み込み目的など、ユーザーに見せることが目的でないimg要素の場合（アクセス履歴のトラッキングコードをimg要素のsrc属性で読み込んでる場合など）。なお、この場合は、width属性値及びheight属性値を0にすることが推奨される。
  • crossorigin→値は下記のとおりで、空も可。空の場合は、anonymousと同等。デフォルトは、anonymous。別オリジン（→別ドメインなど）からの読み込みに対して、ユーザー認証情報の要否を指定する。
    • anonymous→ユーザー認証情報を求めない。
    • use-credentials→ユーザー認証情報を求める。
  • decoding→値は下記とおり。デフォルトは、auto。画像のデコード方法のヒントを示す。
    • sync→同期的にデコードする。
    • async→非同期的にデコードする。
    • auto→デコード方法を示さない。
  • loading→値は下記とおり。デフォルトは、eager。読み込みを延期するか否かを示す。
    • eager→リソースをすぐに取得する
    • lazy→いくつかの条件が満たされるまでリソースの取得を延期する
  • referrerpolicy→値は下記のとおり。アクセス又はリソース読み込みのときのリファラーヘッダに関するポリシーを指定する。詳細は、Referrer Policyを参照。
    • no-referrer→リファラーヘッダを削除し、リファラー情報を送信しない。
    • no-referrer-when-downgrade→TLSで保護されたクライアントから信用に値し得ないURLへの送信の際は、リファラーヘッダを削除し、リファラー情報を送信しない。その他の場合は、リファラー情報を全部送信する。
    • same-origin→非同一オリジンからの要請に対しては、リファラーヘッダを削除し、リファラー情報を送信しない。同一オリジンからの要請に対しては、リファラー用に削った全部情報を送信する。
    • origin→ドメイン部分のみをリファラー情報として送信する（例：「https://example.com/example.html」からのアクセス→「https://example.com/」のみを送信）。
    • strict-origin→TLSで保護されたクライアントから信用に値し得ないURLへの送信の際は、リファラーヘッダを削除し、リファラー情報を送信しない。その他の場合は、ドメイン部分のみをリファラー情報として送信する。
    • origin-when-cross-origin→非同一オリジンからの要請に対しては、ドメイン部分のみをリファラー情報として送信する。同一オリジンからの要請に対しては、リファラー用に削った全部情報を送信する。
    • strict-origin-when-cross-origin→TLSで保護されたクライアントから信用に値し得ないURLへの送信の際は、リファラーヘッダを削除し、リファラー情報を送信しない。その他の場合で、非同一オリジンからの要請に対しては、ドメイン部分のみをリファラー情報として送信する。その他の場合で、同一オリジンからの要請に対しては、リファラー用に削った全部情報を送信する。
    • unsafe-url→リファラー用に削った全部情報を送信する。
  • fetchpriority→値は下記とおり。デフォルトは、auto。同種リソース間におけるキャッシュ事前取得の優先度を指定。
    • high→優先度高。
    • low→優先度低。
    • auto→優先度自動。
  • usemap→イメージマップを指定するmap要素のname属性値の頭に「#」をつけた値。
  • ismap→ブーリアン属性。サーバーサイドイメージマップを指定するa要素の子孫要素でないimg要素では指定してはならない。
  • width→px単位の幅を指定する非負整数。単位はつけない。
  • height→px単位の高さを指定する非負整数。単位はつけない。
  • sizes属性が指定されている場合は、「非負整数＋小文字のw」を指定するsrcset属性が必須。
  • 「非負整数＋小文字のw」を指定するsrcset属性が指定されている場合は、sizes属性が必須。
HTML構文におけるタグの省略
  • Void elementなので、終了タグはなし。ただし、開始タグの末尾をスラッシュで閉じてもよい（/>）。
WAI-ARIA
  • 空でないalt属性が指定されている場合、又は、アクセス可能な名前を持つ場合は、
    • デフォルトroleは、img。デフォルトroleをrole属性値に指定することは、推奨されない。
    • デフォルトrole以外では、button、checkbox、link、menuitem、menuitemcheckbox、menuitemradio、meter、option、progressbar、radio、scrollbar、separator、slider、switch、tab、treeitemを指定可。
  • 空のalt属性が指定されており、かつ、アクセス可能な名前を持たない場合は、
    • デフォルトroleは、presentation又はnone。デフォルトroleをrole属性値に指定することは、推奨されない。
    • デフォルトrole以外のroleは、指定不可。
    • 属性値がtrueのaria-hidden属性を除くすべてのaria-*属性は指定不可。
  • alt属性が指定されてなく、かつ、アクセス可能な名前を持たない場合は、
    • デフォルトroleは、img。デフォルトroleをrole属性値に指定することは、推奨されない。
    • デフォルトrole以外では、presentation、noneを指定可。
    • 属性値がtrueのaria-hidden属性を除くすべてのaria-*属性は指定不可。
視覚系ブラウザのデフォルトとして期待されるCSS

  img:is([sizes="auto" i], [sizes^="auto," i]) {
    contain: size !important;
    contain-intrinsic-size: 300px 150px;
  }
視覚系ブラウザにおいて期待されるレンダリング
  • 指定された画像を表示。この場合は、置換要素となる。
  • height属性値及びwidth属性値をレンダリングのヒントとして用いる。
  • 指定された画像が無効な場合で、alt属性値が空でない場合は、指定された代替テキストを表示。なお、画像が見つからないことを示すアイコンを伴ってもよい。
  • 指定された画像が無効な場合で、alt属性値が空の場合は、高さ0かつ幅0の置換要素として表示。
  • 指定された画像が無効な場合で、alt属性がない場合は、画像が見つからないことを示すアイコンを表示してもよい。この場合は、置換要素となる。
マークアップジェネレーターに対する規定
  • 代替テキストを取得できなかった場合は、「alt属性を省略し、かつ、generator-unable-to-provide-required-alt属性を設定する」ことができる。ただし、generator-unable-to-provide-required-alt属性の指定が非準拠であることには、変わりはない。
準拠チェッカーに対する規定
  • img要素に廃止されたborder属性が指定されていても、その属性値が0である限りは、エラーとはせずに警告にとどめることが許容される。
  • alt属性を省略できる例外的な場合に該当する場合を除いて、alt属性の欠如をエラーと判定しなければならない。
  • ただし、「alt属性が欠如しており、かつ、generator-unable-to-provide-required-alt属性が存在する」場合の対応は下記のいずれかでなければならない。
    • alt属性の欠如をエラーとして指摘せず、かつ、generator-unable-to-provide-required-alt属性の存在をエラーとして指摘しない（マークアップジェネレーターに対して意味のないalt属性値を指定するように促すことになってしまうのを避けるためである）。
    • alt属性の欠如をエラーとして指摘し、かつ、generator-unable-to-provide-required-alt属性の存在をエラーとして指摘する（すべての非準拠を指摘するオプションがある準拠チェッカーなどを想定している）。
意味・用法

画像（アニメーション画像を含む）を表す。

img要素をレイアウト目的で使用してはならない。特に、無意味な透明画像を表示するために使用してはならない。

アクセシビリティ関連

私見・補足

img要素がForm-associated elementなのは、フォーム関連のDOMの歴史的な経緯によるみたいで、普通にHTML文書を作成する際には気にする必要はないというか、むしろ忘れてしまった方がよさそうな感じである。

表示確認

ソース１

  <img src="./sample/img.gif" alt="img" />
表示結果１
img
ソース２：画像ファイルが存在しない場合

  I <img src="./sample/nai.gif" alt="love" title="nai.gifは存在しません。" /> the world.
表示結果２
I love the world.
ソース３：srcset属性使用

  <img src="./sample/imgsrc.gif" alt="srcset属性サンプル" 
       sizes="80vw" 
       srcset="./sample/imgsrcset300.gif 300w,./sample/imgsrcset400.gif 400w,./sample/imgsrcset640.gif 640w,./sample/imgsrcset800.gif 800w,./sample/imgsrcset1024.gif 1024w" />
表示結果３
srcset属性サンプル

画面幅で画像が変化する。