<picture>: PICTURE 要素
最終更新：2026-10-13
<picture>PICTURE 要素
img に複数の画像ソースを提供し、ブラウザーがビューポートや解像度などに応じて最適な画像を選びます。
| カテゴリ | リンクとメディア |
|---|---|
| コンテンツモデル | フローコンテンツ |
| 許可される親要素 | フローコンテンツを受け入れる要素 |
| 閉じタグ | 必要 </picture> タグ |
| ステータス | 標準 |
📝 構文
<picture>画像ソース</picture>▶ サンプル
下のコードを編集して、playground でリアルタイム結果を確認：
🌐 ブラウザサポート
| ブラウザ |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <picture> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| すべての主要ブラウザでサポート | |||||
ヒント： picture にはフォールバックとして img が必要です。source は選ぶだけで、実際に描画されるのは常に img です。
❓ よくある質問
Qpicture と img の違いは何ですか？
A
<picture> は img のための「フォーマット／切り替えセレクター」です。複数の <source> と1つのフォールバックの <img> を含み、条件に応じて最適なリソース（新しい形式、別のトリミング）をブラウザが選びます。img 単体では1つのリソースしか読めません。picture 自体は何も表示せず、実際の切り替えは img 側で起きる点に注意しましょう。Qpicture で WebP のフォールバックはどう組めばいいですか？
Asource に新しい形式、img に従来の形式を書きます：
<picture><source type='image/webp' srcset='a.webp'><img src='a.jpg' alt='…'></picture>。WebP 対応のブラウザは source を選び、非対応のブラウザは自動で img の jpg に落ちます。Qpicture の media 属性はどう使いますか？
Asource にメディアクエリを書くと「画面ごとに別のトリミング画像」を出し分けられます：
<source media='(max-width: 600px)' srcset='small.jpg'>。条件に当てはまった source が優先され、複数の source は記述順に最初に当たったものが選ばれます。最後のフォールバックは常に img です。🏷️ 関連タグ
💡 関連ケース
今後さらにケーススタディを追加予定です。
📚 関連チュートリアル
