<picture> 特定の画像に対して複数のメディアソースを提供するコンテナを設置する
| 取り扱い | 現行の標準 |
| カテゴリ |
フロー・コンテンツ フレージング・コンテンツ エンベッデッド・コンテンツ |
| 親にできる要素 | エンベッデッド・コンテンツを受け入れる要素 |
| 子にできる要素 | 0個以上の<source>と、1つの<img> |
| 対応ブラウザ | caniuseで確認 |
<picture>タグの説明
<picture>は、特定の<img>に対して複数の<source>を定義することができるコンテナを設置します。レスポンシブデザインなど、ドキュメントを参照する環境に応じて最適なコンテンツを提供するために用います。
<picture>の子要素として配置された<img>は、画像のサイズや代替テキストを提供します。この機能に対応していない環境では、<img>のsrc属性に指定されたURLが優先されます。
<picture>の子要素として配置された<source>は、採用するコンテンツの判断基準となる条件と、候補先のURLを提供します。
<picture>タグの特徴
- レイアウトの初期値はインラインです。文章の改行には影響を与えません。
- 視覚的な効果は特に与えられません。環境に応じてユーザーエージェントが指定されたメディアの中から適切なものを表示します。
- 同一のページ内に複数使うことができます。ただし、この要素自体を入れ子にすることはできません。
<picture>に指定できる主な属性
- グローバル属性
- 全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
- イベントハンドラ
- 全てのHTML要素に指定できるコンテンツ属性です。
<picture>の使い方とサンプル
このタグを使ったマークアップのサンプルです。以下の例では、CSSのメディアクエリによって画面の幅が640px以下の場合に<source>の画像が読み込まれ、それ以外の環境では<img>に指定された画像が読み込まれます。
HTML
<picture>
<source srcset="../images/sample_square_200.png" media="(max-width: 640px)">
<img src="../images/sample_square_400.png" alt="Sample Image">
</picture>
表示確認
このような分岐は、<img>のsrcset属性やsizes属性を使ったマークアップでも実現可能です。どちらの方が実装しやすいか、最新の環境を踏まえて検討して下さい。