画像を表示する。
エンベディッド内容が期待される場所。
なし。
終了タグなし。
親が PICTURE 要素である場合、src および srcset 属性、および任意の兄 SOURCE 要素の srcset 属性によって与えられる画像は、エンベティッド内容である。
ビューポート内にあるため、レイアウトがわかっているときに画像は読み込まれるが、ウィンドウの読み込みイベントは延期しない。
<IMG src="3.jpeg" loading=lazy alt="3">
画像はビューポートに一度スクロールされるだけで読み込まれ、ウィンドウの読み込みイベントを延期しない。
<IMG src="5.jpeg" loading=lazy alt="5">
画像が利用不可である場合に使用する代用テキスト。
値は、画像を処理することができないまたは読み込みが無効である画像に対して、等価な内容を提供する。（すなわち、IMG 要素のフォールバック内容である）。
<IMG src="○○.jpg" alt="テストalt">
リソースのアドレス。
src 属性は存在しなければならず、画像リソースは潜在的にページ化もスクリプト化もされていない、任意でアニメーションである、非対話型を参照する潜在的にスペースで囲まれた妥当な空でない URLを含めなければならない。
上記の要件は、画像が静的ビットマップ（たとえば PNG、GIF、JPEG）、単一ページのベクター文書（単一ページのPDF、SVG文書要素を持つXMLファイル）、アニメーションビットマップ（ APNG、アニメーション GIF ）、アニメーション ベクター グラフィックス（宣言型 SMIL アニメーションを使用する SVG 文書要素を持つ XML ファイル）などであることを意味する。しかし、これらの定義は、スクリプトを伴う SVG ファイル、複数ページの PDF ファイル、対話的な MNG ファイル、HTML 文書、プレーンテキスト文書などを排除する。[PNG] [GIF] [JPEG] [PDF] [XML] [APNG] [SVG] [MNG]
ユーザーエージェントが使用可能なソース画像のセットを示す、カンマ区切りで文字列を 1 個以上並べたリストです。各々の文字列の構成は以下のとおりです。
記述子を指定しない場合は、ソースを既定の記述子「1x」に割り当てます。
幅記述子と画素密度記述子を同一の srcset 属性に混在させると無効になります。重複した記述子（例えばひとつの srcset に2つのソースがあり、どちらも「2x」とする）も無効になります。
ユーザーエージェントには、利用可能なソースからひとつを選択する裁量があります。これは、ユーザー設定や帯域幅の条件などに基づいて選択を適合させるような、かなりの裁量が与えられています。例としてはレスポンシブ画像のチュートリアルをご覧ください。
<IMG src="../Sample/Picture.jpg"> <IMG src="../Sample/Picture_2x.jpg">原画
<DIV style="border:1px solid black; resize:both; width:250px;"> <IMG srcset="../Sample/Picture.jpg 200w, ../Sample/Picture_2x.jpg 300w"> </DIV>
<DIV style="border:1px solid black; resize:both; width:250px;"> <IMG srcset="../Sample/Picture.jpg 300w, ../Sample/Picture_2x.jpg 200w"> </DIV>
<DIV style="border:1px solid black; resize:both; width:100px;"> <IMG srcset="../Sample/Picture.jpg 1x, ../Sample/Picture_2x.jpg 2x"> </DIV>¶理解不能
<DIV style="border:1px solid black; resize:both; width:100px;"> <IMG srcset="../Sample/Picture.jpg 2x, ../Sample/Picture_2x.jpg 1x"> </DIV>¶理解不能
ソースのサイズのセットを示す、カンマ区切りの文字列を1個以上並べたリストです。それぞれのソースサイズの構成は以下のとおりです。
メディアの状態はビューポートのプロパティで記述するものであり、画像のプロパティではありません。例えば、「(max-height: 500px) 1000px」 は、ビューポートの高さが 500px 以下であれば 1000px 幅のソースを使用することを提案します。ソースサイズ値は、画像の表示サイズを指定するものです。ユーザーエージェントは srcset 属性で与えられたソースからひとつを選択するために、現在のソースサイズを使用します。そのとき、ソースは幅記述子「w」を使用して説明します。選択したソースサイズは画像の固有の寸法（CSS スタイルが適用されていない場合の、画像の表示サイズ）に影響します。srcset 属性がない場合、あるいは幅記述子「w」を持つ値がない場合は、sizes 属性の効果はありません。
<DIV style="border:1px solid black; resize:both; width:100px;"> <IMG srcset="../Sample/Picture.jpg 100w" sizes="1vw"> </DIV>¶
<DIV style="border:1px solid black; resize:both; width:100px;"> <IMG srcset="../Sample/Picture.jpg 100w" sizes="10vw"> </DIV>¶
<DIV style="border:1px solid black; resize:both; width:100px;"> <IMG srcset="../Sample/Picture.jpg 100w" sizes="20vw"> </DIV>¶
<DIV style="border:1px solid black; resize:both; width:100px;"> <IMG srcset="../Sample/Picture.jpg 100w" sizes="(max-height: 500px) 1000px"> </DIV>¶
<DIV style="border:1px solid black; resize:both; width:100px;"> <IMG srcset="../Sample/Picture.jpg 100w" sizes=""> </DIV>¶
関連する画像の取得の際に CORS を使用しなければならないかどうかを示します。CORS リクエストから返されたCORS が有効な画像は、<CANVAS> 要素で「汚染」されることなく再利用することができます。crossorigin 属性が指定されていない場合は、（Origin リクエスト ヘッダーがない）CORS 以外のリクエストが送信され、ブラウザーは画像が汚染されたものとしてマークし、その画像データへのアクセスを制限して、<CANVAS> 要素での使用を防ぎます。
crossorigin 属性が指定されている場合は、（Origin リクエスト ヘッダーを伴う）CORS リクエストが送信されます。しかし、サーバーがオリジンのサイトによる画像データへのオリジン間アクセスを許可することをオプトインしない場合（Access-Control-Allow-Origin レスポンス ヘッダーが一切送信されていないか、送信された Access-Control-Allow-Origin レスポンス ヘッダーにサイトのオリジンが含まれていない場合）、ブラウザーは画像を読み込むことをブロックし、開発ツールのコンソールに CORS エラーを記録します。
許可されている値：
anonymous
| CORS リクエストは、資格情報を省略して（つまり、クッキー、X.509 証明書、Authorization リクエスト ヘッダーなしで）送信されます。 |
|---|---|
use-credentials
| CORS リクエストは、資格情報（つまり、Cookie、X.509 証明書、Authorization リクエスト ヘッダー）が含まれた状態で送信されます。サーバーが元のサイトとの資格情報の共有を選択する（Access-Control-Allow-Credentials: true レスポンス ヘッダーを送り返す）ことをしなかった場合、ブラウザーは画像を汚染されたものとしてマークし、その画像データへのアクセスを制限します。 |
この属性の値が無効である場合は、列挙型のキーワードに anonymous が指定されたものとして扱われます。詳しくはCORS 設定属性を参照してください。
使用するイメージマップの名前。
<MAP name=usemapMap>
<AREA shape="poly" coords="0,0, 100,10, 100,50, 10,50"
href="../Sample/Hn.htm" target="Test"
>
</MAP>
<IMG usemap=#usemapMap src="../Sample/Picture_M.jpg">
画像がサーバー側イメージマップであるかどうか。
論理属性。この画像がサーバーサイド マップの一部であるかを示します。そうである場合は、クリック位置の正確な座標をサーバーに送信します。
Note： この属性は <IMG> 要素が、有効な href 属性を持つ <A> 要素の子孫である場合に限り許可されます。これにより、ポインティング デバイスを持たないユーザーのフォールバック先を提供します。
<A href="/imagemapper"><IMG src="image.png" ismap></A>¶詳細不明
横方向の寸法。
縦方向の寸法。
要素によって開始されたフェッチのためのリファラー ポリシー。
リファラー ポリシー属性である。その目的は、画像をフェッチするときに使用されるリファラー ポリシーを設定することにある。[REFERRERPOLICY]
プレゼンテーションに対するにこの画像を処理する時に使用するデコーディング ヒント。
この画像をデコードするための好ましい方法を示す。この属性は、存在する場合、画像デコーディング ヒントでなければならない。この属性の欠損値のデフォルトと不正値のデフォルトは両方とも auto 状態である。
| キーワード | 状態 | 説明 |
|---|---|---|
sync
| 同期 | このイメージを同期的にデコードして、他のコンテンツとアトミックに表示する設定を示します。 |
async
| 非同期 | 他のコンテンツの表示を遅らせないように、このイメージを非同期的にデコードする設定を示します。 |
auto
| 自動 | デコード モードでプリファレンスがないことを示します（デフォルト）。 |
読み込み延期を決定するときに使用。
遅延読み込み属性である。その目的は、ビューポート外にある画像を読み込むためのポリシーを示すことである。
| キーワード | 状態 | 説明 |
|---|---|---|
lazy
| Lazy | いくつかの条件が満たされるまでリソースのフェッチを延期するために使用される。 |
eager
| Eager | リソースをすぐにフェッチするために使用される。デフォルト状態。 |
属性の欠損値のデフォルトと不正値のデフォルトは両方ともEager状態である。
| 表示内容： |
| 表示内容： |