<img>要素

Technical Summary

Definition / Categories

項目	仕様上の整理
意味	画像を表す埋め込みコンテンツ
Categories	Flow content、Phrasing content、Embedded content、Form-associated element、Palpable content。usemapまたはcontrolsが指定された場合はInteractive content
Context	Embedded contentが期待される場所
Content model	空要素。子要素を持たない
Tag omission	開始タグ・終了タグとも省略不可
Content attributes	Global attributes、alt、src、srcset、sizes、crossorigin、usemap、ismap、controls、width、height、referrerpolicy、decoding、loading、fetchpriority
DOM interface	HTMLImageElement

画像の意味とaltの境界

HTML Standardでは、src・srcset・親picture内のsourceから選ばれた画像が埋め込みコンテンツです。altの値は、画像を処理できない利用者や画像読み込みが無効な環境に対する代替内容として扱われます。

ケース	主張・確認点
Informative image	画像が伝える情報を、周囲の本文だけに依存せず、短い代替テキストで表す
Decorative image	alt=""にして、意味を持たない画像を支援技術の読み上げ対象から外す
Functional image	リンクや操作の目的を代替テキストで表す。ピクセルの外観を説明するだけでは不十分な場合がある
Image of text	画像に含まれる意味のある文字を、同等のテキストとして提供する
Detailed image	短いaltと、本文・figure・captionなどの詳しい説明を役割分担させる

altの有無だけで画像の重要度を推測してはなりません。空文字は「代替テキストが不要」という明示的な状態であり、属性そのものの省略とは仕様上・アクセシビリティ上の意味が異なります。

src・srcset・sizes

単一リソースの場合はsrcを使います。レスポンシブ画像では、srcsetに候補URLと密度記述子または幅記述子を指定し、幅記述子を使う場合はsizesで表示スロットの想定幅を伝えます。

<img
  src="/images/article-800.jpg"
  srcset="/images/article-400.jpg 400w,
          /images/article-800.jpg 800w,
          /images/article-1600.jpg 1600w"
  sizes="(max-width: 600px) 100vw, 800px"
  alt="記事の内容を表す風景"
  width="1600"
  height="900">

ユーザーエージェントは、表示スロット、画素密度、環境条件などを使って候補を選択します。HTML Standardの画像処理モデルでは、選択されたsourceとpixel densityがimage requestへ反映されます。したがって、srcsetを「常に最大画像を使う指定」や「常に最小画像を使う指定」と説明しません。

親がpictureの場合は、source要素の条件とsrcsetを評価したうえで、最後のimgがfallbackと要素の基準になります。picture・sourceは別Topicで扱うべき仕様境界です。

寸法・replaced element・レイアウト

imgはreplaced elementとして扱われます。画像が利用可能になると、natural width・natural heightなどの画像データからpaint sourceの寸法が決まり、width・height属性は視覚的コンテンツの寸法をCSS pixelsで指定するdimension attribute sourceになります。

実装上は、画像の本来の縦横比に対応したwidth・heightをmarkupに含めることで、画像取得前にレイアウト領域を予測しやすくできます。ただし、属性値、CSSのサイズ指定、natural dimensions、選択されたpixel densityを同一の値として扱わないことが必要です。

取得・デコード・イベント

属性・API	確認対象
loading	画像取得を遅延させるためのhint。viewportとの距離や実装条件を含むため、取得の絶対的な保証ではない
decoding	画像デコードに関するhint。auto、sync、asyncの指定と実際の描画順序を分けて観測する
fetchpriority	取得優先度に関するhint。ネットワーク全体の優先順位を単独で決定する属性ではない
complete	current requestの完了に関するIDL属性。成功・失敗を単独で表す値ではない
naturalWidth / naturalHeight	density-corrected natural dimensionsの観測入口
currentSrc	現在選択されているsource URLの観測入口
decode()	画像を安全に描画できる状態までdecodeするPromise-based APIの入口

load・error event、current request、pending request、DOM mutationによる画像データ更新は、属性の文字列値とは別の実装状態です。1回のload event観測だけで、すべての取得・再選択・デコード処理を説明しないようにします。

DOM Interface

const image = document.querySelector('img');

image.alt;
image.currentSrc;
image.srcset;
image.sizes;
image.naturalWidth;
image.naturalHeight;
image.complete;
await image.decode();

HTMLImageElementには、content attributeを反映するIDL属性のほか、候補選択後のcurrentSrc、natural dimensions、取得・デコード状態の確認に使えるAPIがあります。attribute value、selected source、natural size、rendered sizeを分けて記録します。

Fact / Evidence（主張 / 根拠）

要素の意味、代替テキスト、候補選択、寸法、取得ヒント、DOM API、アクセシビリティmappingを、主張・適用条件・根拠位置に分けて記録します。ブラウザーの取得結果とAccessibility Treeは下のImplementation Evidenceへ分離します。

Evidence

1. HTML Standard: The img element — meaning、categories、content model、alt、属性、HTMLImageElement
2. HTML Standard: Images — adaptive images、srcset、sizes、候補選択、画像処理モデル
3. HTML Standard: Dimension attributes — width / heightのdimension attribute source
4. HTML Accessibility API Mappings: img — img role、alt、accessible name、none/presentation mappingの入口
5. Web Platform Tests: the-img-element — img、responsive image、候補選択、属性処理に関係するテスト群の入口

Implementation Evidence

仕様上の主張とは別に、ブラウザー実装、WPT、アクセシビリティツリーの観測を記録します。img-v1をChrome 153とEdge 153 / Windows NT 10.0で実行し、各環境で12項目すべてpassしました。WPT、platform API、支援技術、Firefox・Safariは別の未完了範囲として残します。

Fixture実行結果: img-v1で、altの有無・空文字、srcの成功・失敗、srcset・sizesによるcurrentSrc、width・heightとnatural dimensions、load・error、decode()、loading・decoding・fetchpriorityのIDL反映、Resource Timingを確認しました。Chromeはviewport 1920×855 / DPR 1、Edgeはviewport 762×699 / DPR 1.25です。

画像の取得タイミング、選択候補、natural dimensions、描画、Accessibility Tree、platform API、支援技術の公開結果は、ブラウザー・OS・viewport・DPR・ネットワーク条件に依存し得ます。単一環境の観測を、すべての実装に共通する結果として登録しません。

Coverage / Open Issues

• 確認済み意味、Categories、Context、空要素としてのContent model、主要content attributes、HTMLImageElement
• 確認済みaltの代替内容、informative・decorative・functional imageの役割、HTML-AAMのimg mappingの入口
• 確認済みsrcset・sizes・pictureを含む画像候補選択とimage request処理モデルの入口
• 未完了今回確認したChrome 153・Edge 153以外のFirefox・Safari、複数DPR・viewport・network条件でのcurrentSrc、候補選択、load/errorの比較
• 未完了loading・decoding・fetchpriorityの実際の取得・デコード・描画タイミングと優先順位
• 未完了WPTの残りの個別実行（選定4ファイルの9/9 pass以外）、HTML-AAM全mapping、Accessibility Tree、platform API、支援技術、controls・CORS・referrer policy

このページは初期Coverageです。Chrome 153とEdge 153でのfixture観測、および選定したWPT 4ファイルの9/9 passは記録済みですが、残りのWPT、部分観測のAAM、支援技術、複数環境の項目を全体適合性としては扱いません。

Related surface

初心者向けの画像、alt、レスポンシブ画像、寸法の使い方はYugienのimg要素ページを参照してください。画像の中の場所にリンクを付けるmap・area・usemapはイメージマップで扱います。画像をリンクとして使う場合の目的とactivationはa要素、別の文書を埋め込むcontent navigableとの違いはiframe要素、画面や形式に応じた画像候補の切り替えはpicture要素で確認します。sourceのaudio・video内での意味とfigureは、別の仕様境界として扱います。

画像をJavaScriptでcanvasへ描画した後のbitmap寸法とpixel readbackの境界は、canvas要素で扱います。