HTML辞書ホームへ
HTML要素 辞書 by Sentaro
<picture>
画像要素。複数の画像ソースを提供し、ビューポートサイズやデバイスの機能に基づいて最適な画像をブラウザに選択させます。
info
概要
<picture> 要素は、アートディレクション（ビューポートに応じて画像の比率やトリミングを変える）や、**複数の画像形式（WebP, JPEGなど）を提供**しブラウザに最適なものを選択させるために使用されます。
子要素として一つ以上の <source> 要素と、フォールバック（代替）として一つの <img> 要素を必ず含みます。
play_circle
デモ (静的表示)
HTML (Source)
<picture>
<source media="(min-width: 600px)" srcset="large.jpg">
<source srcset="small.jpg">
<img src="default.jpg" alt="レスポンシブな画像" style="width:100px; height:auto;">
</picture>
/* 実際の表示はありません。構造の確認のみ */
Preview (Result)
<picture>の出力はブラウザ環境に依存するため、このデモでは構造のみを示します。
（ここでは "レスポンシブな画像" と表示されるべき場所です。）
（ここでは "レスポンシブな画像" と表示されるべき場所です。）
list
属性 (Attributes)
<picture> 要素自体に固有の属性はありません。機能はすべて子要素の <source> および <img> 要素の属性によって提供されます。
| 子要素 / 属性名 | 説明 |
|---|---|
<source> |
ブラウザに選択肢を与えるための画像リソースを指定します。 |
| srcset (in <source>) | 表示する画像のURL（および記述子：幅やピクセル密度）のリスト。 |
| media (in <source>) | 画像を適用するためのメディアクエリ（例: (min-width: 600px)）。 |
| type (in <source>) | リンク先リソースのMIMEタイプ（例: image/webp, image/avif）。 |
<img> |
すべての <source> にマッチしなかった場合のフォールバック（必須）。 |
| alt (in <img>) | 画像の代替テキスト（必須）。アクセシビリティに重要です。 |
code
実用例
1. 画像形式による最適化 (WebPへのフォールバック)
<picture>
<source type="image/webp" srcset="image.webp">
<img src="image.jpg" alt="WebPに対応しないブラウザのためのJPEG画像">
</picture>
ブラウザはWebPに対応していればWebPを、そうでなければJPEGを選択します。
2. ビューポート幅によるアートディレクション
<picture>
<source media="(max-width: 600px)" srcset="mobile-cropped.jpg">
<img src="desktop-full.jpg" alt="デスクトップとモバイルでトリミングが変わる画像">
</picture>
ビューポートが600px以下の場合、モバイル用にトリミングされた画像（`mobile-cropped.jpg`）が表示されます。
lightbulb
知っておくべき重要事項
priority_high
<img> 要素は必須
<picture> 要素の最後の要素として、<img> 要素は**必ず**配置しなければなりません。これは、どの <source> にもマッチしなかったブラウザのためのフォールバックとして機能します。
accessibility_new
アクセシビリティ (<img>の alt 属性)
<picture> 要素で表示される画像の代替テキストは、中の <img> 要素の alt 属性に記述します。これは視覚障碍者や画像が表示できない環境で重要です。