目次に戻る

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

概要

カテゴリー
配置できる場所
内容モデル
属性
  • グローバル属性
  • src→画像リソースを示すURL必須
  • srcset→画像のURLと「非負整数+小文字のw」(例:200w)又は「非負浮動小数点数+小文字のx」(例:1.5x)とを半角スペース区切りでセットとして指定(後者は必須ではない)。カンマ区切りで複数セットの指定可能。レスポンシブイメージのための設定。
  • sizes→妥当なメディアクエリCSSlength値として許容される値とを半角スペース区切りでセットとして指定(前者は必須ではない)。カンマ区切りで複数セットの指定可能。
  • 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-downgradeTLSで保護されたクライアントから信用に値し得ないURLへの送信の際は、リファラーヘッダを削除し、リファラー情報を送信しない。その他の場合は、リファラー情報を全部送信する。
    • same-origin→非同一オリジンからの要請に対しては、リファラーヘッダを削除し、リファラー情報を送信しない。同一オリジンからの要請に対しては、リファラー用に削った全部情報を送信する。
    • originドメイン部分のみをリファラー情報として送信する(例:「https://example.com/example.html」からのアクセス→「https://example.com/」のみを送信)。
    • strict-originTLSで保護されたクライアントから信用に値し得ないURLへの送信の際は、リファラーヘッダを削除し、リファラー情報を送信しない。その他の場合は、ドメイン部分のみをリファラー情報として送信する。
    • origin-when-cross-origin→非同一オリジンからの要請に対しては、ドメイン部分のみをリファラー情報として送信する。同一オリジンからの要請に対しては、リファラー用に削った全部情報を送信する。
    • strict-origin-when-cross-originTLSで保護されたクライアントから信用に値し得ないURLへの送信の際は、リファラーヘッダを削除し、リファラー情報を送信しない。その他の場合で、非同一オリジンからの要請に対しては、ドメイン部分のみをリファラー情報として送信する。その他の場合で、同一オリジンからの要請に対しては、リファラー用に削った全部情報を送信する。
    • unsafe-urlリファラー用に削った全部情報を送信する。
  • usemapイメージマップを指定するmap要素name属性値の頭に「#」をつけた値。
  • ismapブーリアン属性サーバーサイドイメージマップを指定するa要素子孫要素でないimg要素では指定してはならない。
  • widthpx単位の幅を指定する非負整数。単位はつけない。
  • heightpx単位の高さを指定する非負整数。単位はつけない。
  • sizes属性が指定されている場合は、「非負整数+小文字のw」を指定するsrcset属性が必須。
  • 非負整数+小文字のw」を指定するsrcset属性が指定されている場合は、sizes属性が必須。
  • W3C : HTML5.3title属性がある場合に、alt属性の省略が許される場合がありうる旨は、規定されていなかった。

W3C : HTML5.3:下記の属性が存在してなかった。

  • loading
HTML構文におけるタグの省略
  • Void elementなので、終了タグはなし。ただし、開始タグの末尾をスラッシュで閉じてもよい(/>)。
WAI-ARIA
  • でないalt属性を持つ場合は、
    • デフォルトroleは、imgデフォルトroleは、role属性値に指定すべきでない。
    • デフォルトrole以外では、buttoncheckboxlinkmenuitemmenuitemcheckboxmenuitemradiooptionprogressbarscrollbarseparatorsliderswitchtabtreeitemを指定可。
  • alt属性を持つ場合は、
    • デフォルトroleは、なし。
    • デフォルトrole以外では、presentationnoneを指定可。
    • aria-hidden属性を除くすべてのaria-*属性は指定不可。
  • alt属性を持たない場合は、
視覚系ブラウザにおいて期待されるレンダリング
  • 指定された画像を表示。
  • height属性値及びwidth属性値レンダリングのヒントとして用いる。
  • 指定された画像が無効な場合で、alt属性値でない場合は、指定された代替テキストを表示。なお、画像が見つからないことを示すアイコンを伴ってもよい。
  • 指定された画像が無効な場合で、alt属性値の場合は、inline要素として表示。
  • 指定された画像が無効な場合で、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属性の存在をエラーとして指摘する(すべての非準拠を指摘するオプションがある準拠チェッカーなどを想定している)。
HTML extension

属性に下記を追加。詳細はHTML5 Image Description Extension (longdesc)を参照。

  • longdesc→画像についての説明の参照先を指定する妥当なURL

W3C : HTML5.3longdesc属性は、HTML仕様本体にも規定。

意味・用法

画像(アニメーション画像を含む)を表す。

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

アクセシビリティ関連

私見・補足

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

表示確認

ソース1

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

  I <img src="./sample/nai.gif" alt="love" title="nai.gifは存在しません。" /> the world.
  
表示結果2
I love the world.
ソース3: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" />
  
表示結果3
srcset属性サンプル

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

未対応ブラウザにおいては、src属性で指定した画像が表示される。

IE6表示のスクリーンショット(表示結果3)
IE6表示:src属性で指定した画像が表示されている

IE7からIE11も同様。