<picture>要素

Technical Summary

Definition / Categories

項目	仕様上の整理
意味	子のimgに対する複数sourceとresource selectionのcontextを提供するcontainer
Categories	Flow content、Phrasing content、Embedded content、Palpable content
Context	Embedded contentが期待される場所
Content model	0個以上のsource、続いて1個のimg。script-supporting elementsは仕様上許可される位置に置ける
Tag omission	開始タグ・終了タグとも省略不可
Content attributes	Global attributesのみ。候補条件は子のsource、表示される画像とaltは子のimgが担う
DOM interface	HTMLPictureElement

Source selectionの境界

ユーザーエージェントはpicture内のsourceを文書順に評価し、media条件とtypeの対応可能性を候補選択へ反映します。選択されたsourceはsrcsetと、必要に応じてsizesからimage source setを構成します。その後の候補選択は、表示slot、pixel density、環境条件などを含む画像処理モデルと接続します。

属性	picture内の意味
media	media query listが現在の環境に適合するかを候補条件にする
type	画像のMIME typeを示し、対応できない形式の候補を取得前に飛ばせる場合がある
srcset	選択されたsourceが提供するimage candidates
sizes	width descriptorを使うsource setのsource size。条件により省略可否が変わる
src	picture内のsourceには使用せず、fallbackのimgへ置く

sourceは単独で表示内容を表す要素ではありません。また、picture内のsourceと、audio・video内のsourceでは、src・srcsetなどの意味とresource selection algorithmが異なります。

Art directionとresolution switching

目的	主なモデル	注意点
同じ構図の解像度候補	img srcset sizes	slot sizeとpixel densityに基づく候補選択を、不要なmedia条件で固定しない
構図・切り抜きの切り替え	複数source media + fallback img	候補ごとに画像の意味が変わりすぎないか、altと周辺説明を確認する
画像形式の切り替え	複数source type + fallback img	type条件は取得前の対応判定の入口であり、実際の取得・decode・表示を同一視しない

FallbackとAccessibility

pictureは画像の表示面そのものではなく、選択contextです。画像の意味を伝えるaltはfallbackとなるimgに置きます。named image、empty-alt image、画像が選択される前後のAccessibility Treeは、picture自身のroleと混同せず、選択されたimgのmappingとして観測します。

したがって、source候補が複数あることだけを理由に複数の画像を支援技術へ公開するとは限りません。実際のbrowser tree、platform API、支援技術の結果は環境ごとに分けて記録する必要があります。

DOM Interface

const picture = document.querySelector('picture');
const sources = picture.querySelectorAll('source');
const image = picture.querySelector('img');

picture instanceof HTMLPictureElement;
sources[0] instanceof HTMLSourceElement;
image.currentSrc;

HTMLPictureElementはHTMLElementを継承するinterfaceで、source selectionを直接返す専用APIを持つものではありません。選択後のURLを観測する入口は、子のimgのcurrentSrcです。

Fact / Evidence（主張 / 根拠）

content model、source selection、属性の適用条件、fallback、Accessibilityを分離し、仕様上の主張と実装観測を同一視しないように記録します。

Evidence

1. HTML Standard: The picture element — meaning、categories、content model、HTMLPictureElement、selection context
2. HTML Standard: The source element — picture内のmedia、type、srcset、sizes、dimension attributes
3. HTML Standard: Images — source set、candidate selection、表示slot、pixel density、art direction
4. HTML Accessibility API Mappings: picture — pictureと選択されたimgのAccessibility mappingの入口
5. Web Platform Tests: embedded content — picture、source、img、responsive imageに関係するテスト群の入口

Implementation Evidence

picture-v1をChrome 155（Windows 11 Pro build 26300）で実行しました。表示幅390px・DPR 1.0ではmobile-640.svg、1280px・DPR 1.25ではdesktop-960.svgが選ばれました。DPRは、画面の細かさを表す値です。どちらもmedia条件に合い、currentSrc（ブラウザーが実際に選んだ画像のURL）もその画像を示しました。この観測では、条件に合わない画像sourceへのrequestは記録されませんでした。どのsource条件にも合わない場合は、代わりにimgの画像が使われました。

観測用fixture: build-config/yugien/research-results/picture-v1/。画像ファイルごとに色と名前を変え、どの画像が選ばれたかを見分けられるようにしています。実測は1つのブラウザーでの結果です。

source selection、画像取得、decode、候補選択後のtree、platform API、支援技術の結果は、ブラウザー・OS・viewport・DPR・network・画像形式に依存し得ます。単一環境の観測を、すべての実装に共通する結果として登録しません。

Coverage / Open Issues

• 確認済み意味、Categories、Context、Content model、tag omission、HTMLPictureElement
• 確認済みsourceのmedia・type・srcset・sizesとimg fallbackの仕様上の境界
• 確認済みresolution switchingとart direction、画像形式選択、altとAccessibility mappingの入口
• 実測済みChrome 155の2条件でsource selection、currentSrc、fallback、未選択sourceのrequestを観測
• 実測済み選定したWPT 3ファイルはすべてpass。実行版がわからないため、結果は部分観測として記録
• 実測済みChrome Accessibility Treeで、名前のある画像・空のalt・source候補の見え方を観測
• 未完了Firefox・Safari、ほかのviewport・DPR、形式ごとのdecode・error・fallback、さらに動的なsource変更を比較
• 未完了WPTの追加実行と実行版の固定。今回選んだ3ファイル以外は未実行
• 未完了WindowsのAccessibility API、Narrator・NVDAなどの支援技術、他ブラウザーでのアクセシビリティを確認

この実測は1つのChrome環境と選定したWPTに限ります。すべてのブラウザーや支援技術で同じ結果になるとは限りません。

Related surface

初心者向けの画像候補、alt、寸法、読み込みの説明はYugienのpicture要素ページを参照してください。単一画像とsrcset・sizesの画像処理モデルはimg要素、sourceの親要素別の属性条件・候補選択はsource要素、media element内での選択との比較はvideo要素で確認できます。audio要素固有の範囲は別Topicとして扱います。