<img>
img（イメージ）要素は文書内に画像を埋め込むために使用します。
src属性で埋め込む画像ファイルのURIを指定し、alt属性の値は、img要素のフォールバックとなる。何らかの理由で画像が読み込めなかった場合、この値がレンダリングされる。
img要素にsrc属性は必須になる。値はURIとなり、埋め込めるファイルは画像形式のファイル （PNG、GIF、アニメーションGIF、JPEG、SVGなど） のみとなる。HTML文書やPDFファイルなどはimg要素で埋め込むことはできない。
HTML Living Standard ではimg要素に対して srcset属性が定義されている。この属性を指定する事により、複数のメディアリソース候補を提供する事が可能になり、レスポンシブ・イメージを実現する。
| img要素 | 説明 |
|---|---|
| カテゴリー | ・フローコンテンツ ・フレージングコンテンツ ・パルバブルコンテンツ ・インタラクティブコンテンツ（usemap属性を持つ場合） ・エンベッディッドコンテンツ ・フォーム関連要素 |
| コンテンツモデル | 空 |
| 使用できる場所 | エンベッディッドコンテンツが期待される場所 |
img要素で使用できる属性
| 属性名 | 属性値 | 説明 |
|---|---|---|
| グローバル | すべての要素で使用できる属性 | |
| alt | 代替テキスト | 画像が表す内容を文章と説明するするようにする。 |
| src | 埋め込む画像の URL（jpeg、png、gif、svgなど） | 必須（空文字は不可）。 |
| srcset | URLと記述子 | 複数のイメージソースを指定する。 ＊カンマ（,）」 区切りで複数の画像候補の URL を指定する事ができる。 |
| crossorigin | ・anonymous：Cookie やクライアントサイドの SSL 証明書、HTTP 認証などのユーザ認証情報は不要。 ・use-credentials：ユーザ認証情報を求めます。 | 元文章とは異なるオリジンからデータを取得する際の認証に関する設定。 |
| sizes | メディアクエリと表示幅 | 条件と画像の幅 |
| usemap | #に続く文字列 | 使用するイメージマップの名前 |
| ismap | 論理属性（「属性名」だけで指定できる属性） | 画像がサーバサイドのイメージマップであることを示す。 |
| width | 整数 | 画像の幅 |
| height | 整数 | 画像の高さ |
| referrerpolicy | 指定できる値については、下のreferrerpolicy属性に指定できる値を参照ください。 | referrerpolicy属性は、リンク先にアクセスする際、あるいは画像など外部リソースをリクエストする際にリファラ（アクセス元のURL情報）を送信するか否か（リファラポリシー）を指定します。 |
| loading | ・lazy：可視状態になるまでリソースの取得を遅延させることをユーザエージェントに指示します。 ・eager：可視状態に関係なく、リソースをすぐに取得する必要があることをユーザエージェントに指示します。 | loading属性は、ユーザエージェントに画像取得のヒントを提供します。img要素、および iframe要素に指定可能で、ブラウザネイティブ実装の遅延読み込み（Lazy loading）を実現します。 |
| decoding | ・synk：他のコンテンツと画像を同期的にデコードします。 ・asynk：他のコンテンツと画像を非同期的にデコードします。 ・auto：デフォルト値。デコード方式を指定しません。 | decoding属性は、ユーザエージェントに画像デコードのヒントを提供します。 |
| 値 | 説明 |
|---|---|
| 空文字列 | デフォルト値。特にリファラに対して条件指定をせず、ブラウザの挙動によります。 |
| no-referrer | リファラを一切送信しません。a 要素や area 要素にrel="noreferrer" を付与した場合と同様の扱いとなります。 |
| no-referrer-when-downgrade | リンク元が SSL/TLS を用いており、リンク先が SSL/TLS を用いていない場合（HTTPS→HTTP）にはリファラを送信しません。 それ以外の場合（HTTPS→HTTPS / HTTP→HTTPS）は、リンク元の完全な URL をリファラとして送信します。 |
| same-origin | リンク元とリンク先が同一オリジンの場合は。リファラを送信します。 |
| origin | リンク元のオリジンのみが送信されます。 |
| strict-origin | リンク元、リンク先がそれぞれ SSL/TLS を用いている場合、あるいはリンク元が SSL/TLS を用いていない場合にリンク元のオリジンのみを送信します。 |
| origin-when-cross-origin | リンク元とリンク先が異なるオリジンの場合、リンク元のオリジンのみを送信します。 リンク元とリンク先が同一オリジンの場合、リンク元の完全な URL をリファラとして送信します。 |
| strict-origin-when-cross-origin | リンク元、リンク先がそれぞれ SSL/TLS を用いている場合、あるいはリンク元が SSL/TLS を用いていない場合に下記の条件でリファラを送信します。 ・リンク元とリンク先が異なるオリジンの場合、リンク元のオリジンのみを送信します。 ・リンク元とリンク先が同一オリジンの場合、リンク元の完全な URL をリファラとして送信します。 |
| unsafe-url | リンク元の完全な URL をリファラとして送信します。 |
使用例
<img src="https://./logo.png" srcset="https://./logo200.png 2x, logo300.png 4x" alt="ウェブアレバ" width="80" height="80">表示
