<picture>タグの解説
<picture>は、特定の画像に対して複数のリソースを提供可能なコンテナを配置します。具体的には、一つの<img>要素に０個以上の<source>を関連付ける親要素となります。レスポンシブデザインなど、ドキュメントを参照する環境に応じて最適なコンテンツを提供するために用います。
<picture>の子要素として配置された<img>は、画像のサイズや代替テキストを提供します。この機能に対応していない環境では、<img>のsrc属性に指定されたURLが優先されます。
<picture>の子要素として配置された<source>は、採用するコンテンツの判断基準となる条件と、候補先のURLを提供します。
<picture>タグの特徴
- レイアウトの初期値はインラインです。文章の改行には影響を与えません。
- 視覚的な効果は特に与えられません。環境に応じてユーザーエージェントが指定されたメディアの中から適切なものを表示します。
- 同一のページ内に複数使うことができます。ただし、この要素自体を入れ子にすることはできません。
<picture>要素に指定できる属性
- グローバル属性
- 全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
- イベントハンドラ
- 全てのHTML要素に指定できるコンテンツ属性です。
<picture>要素の使い方とサンプルコード
この要素の最も基本的な書き方は以下の通りです。画像に付随する情報を<source>で定義し、最後に<img>を配置します。
<picture>
<source srcset="file" attr="value">
<img src="file" alt="text">
</picture>
以下の内容は、ビューポートの幅が640px以下の場合に<source>の画像が読み込まれ、それ以外の環境では<img>に指定された画像が読み込まれることを表しています。
<picture>
<source srcset="/images/sample_square_200.png" media="(max-width: 640px)">
<img src="/images/sample_square_400.png" alt="Sample Image">
</picture>
複数のリソースを配置して選択肢を増やすこともできます。
<picture>
<source srcset="file-1.png" media="(max-width: 1200px)">
<source srcset="file-2.png" media="(max-width: 640px)">
<img src="file-3.png" alt="Image">
</picture>
srcset属性で複数のリソースを提供する
<source>要素のsrcset属性は、複数の値をカンマ区切りのリスト形式で持たせることができます。候補として挙げたリストのうち採用する条件として、ピクセルの幅（w）や密度（x）を表す値を併記します。以下の例であれば１・５倍です。
<picture>
<source srcset="file-1.png, file-2.png 1.5x">
<img src="/images/file-3.png" alt="Image">
</picture>
type属性でリソースのMIMEタイプを指定する
<source>要素のtype属性を通じてリソースのMIMEタイプを明示できます。複数のファイル形式が存在する場合に、ブラウザが最適なものを選べるようになります。
<picture>
<source srcset="file.svg" type="image/svg+xml">
<source srcset="file.webp" type="image/webp">
<img src="file-3.png" alt="Image">
</picture>