<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属性を使ったマークアップでも実現可能です。どちらの方が実装しやすいか、最新の環境を踏まえて検討して下さい。

<picture>に関連するHTMLタグ

オブジェクトやスクリプトを埋め込む要素
<img> 画像を表示する
<picture> 特定の画像に対して複数のメディアソースを提供するコンテナを設置する
<figure> 写真や図表などの自己完結した要素を表す
<figcaption> 参照される写真や図表にキャプションを追加する
<canvas> スクリプトで定義したグラフィックスを描画するための領域を配置する
<audio> ドキュメント内に音声コンテンツを埋め込む
<video> ページ内に動画コンテンツを表示する
<source> 再生候補となる動画や音源などのメディアソースを指定する
<track> 動画や音声ファイルに字幕やキャプションを追加する
<embed> 外部コンテンツを埋め込む
<object> 外部リソースのオブジェクトを埋め込む
<param> パラメーターを指定する
<script> HTMLで実行可能なスクリプトを埋め込む
<noscript> スクリプトが動作しない環境での表示内容を指定する
<meter> 規定範囲内の数量や測定値を表す
<progress> 作業の進捗状況を示すプログレスバーを表示する
<output> 計算結果やユーザーアクションの出力欄を作成する
<dialog> 任意のタイミングで開くダイアログボックスを作成する
<template> ページ読み込み後にスクリプトの実行によって挿入可能な要素を定義する
<slot> ウェブコンポーネントで独自に扱える枠を提供する