pictureタグ -画像を条件に応じて切り替える｜HTML辞典
<picture>タグとは？
<picture> タグは、異なるサイズやフォーマットの画像を条件に応じて切り替えるためのタグです。
レスポンシブデザインや Web パフォーマンスの最適化に活用されます。
コンテンツモデル
フローコンテンツ（Flow Content）。
閉じタグの有無
<picture> は 開始タグ（<picture>）と閉じタグ（</picture>）の両方が必要 です。
基本的な記述方法
<picture>
<source srcset="image-large.jpg" media="(min-width: 800px)">
<source srcset="image-medium.jpg" media="(min-width: 500px)">
<img src="image-small.jpg" alt="レスポンシブ画像">
</picture>
使用できる主な属性
<picture> 自体に属性はありませんが、内包する <source> と <img> に以下の属性を設定できます。
| 属性名 | 設定対象 | 説明 | 例 |
|---|---|---|---|
srcset | <source> | 使用する画像のファイルパス | srcset="image-large.jpg" |
media | <source> | メディアクエリを指定 | media="(min-width: 800px)" |
type | <source> | 画像の MIME タイプを指定 | type="image/webp" |
alt | <img> | 画像の代替テキスト | alt="レスポンシブ画像" |
CSSを使ったデザイン変更
<picture> 自体には特別なスタイルは適用されませんが、img にスタイルを指定できます。
img {
max-width: 100%;
height: auto;
}
適切な使用例
✅ 画面サイズに応じて異なる画像を表示する（レスポンシブ画像）
<picture>
<source srcset="large.jpg" media="(min-width: 1024px)">
<source srcset="medium.jpg" media="(min-width: 600px)">
<img src="small.jpg" alt="レスポンシブ画像">
</picture>
✅ WebP 形式の画像を優先して読み込む（フォールバック対応）
<picture>
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="WebP対応画像">
</picture>
✅ 画面の解像度に応じて高解像度画像を提供する
<picture>
<source srcset="image@2x.jpg" media="(min-resolution: 2dppx)">
<img src="image.jpg" alt="高解像度対応画像">
</picture>
適切でない使用例（誤った使い方）
❌ <picture> 内に <img> を含めないとフォールバックされない
<!-- NG: <img> を含めていない -->
<picture>
<source srcset="image-large.jpg" media="(min-width: 800px)">
</picture>
✅ 正しい書き方（必ず <img> をフォールバック用に含める）
<picture>
<source srcset="image-large.jpg" media="(min-width: 800px)">
<img src="image-small.jpg" alt="フォールバック画像">
</picture>
❌ alt を <source> に設定しない（<img> に設定する）
<!-- NG: <source> に alt を設定 -->
<source srcset="image-large.jpg" alt="レスポンシブ画像">
✅ 正しい書き方（alt は <img> に設定）
<picture>
<source srcset="image-large.jpg" media="(min-width: 800px)">
<img src="image-small.jpg" alt="レスポンシブ画像">
</picture>
<picture>タグと他のタグの違い
| タグ | 役割 | 特徴 | 適切な用途 |
|---|---|---|---|
<picture> | 条件に応じた画像の切り替え | <source> を複数指定可能 | レスポンシブ画像、高解像度対応 |
<img> | 単独の画像を表示 | src で画像を指定 | 一般的な画像表示 |
<figure> | 画像とキャプションをグループ化 | <figcaption> を含む | 画像に説明を付ける場合 |
使用上の注意点
✅ <img> は必ず <picture> の最後に記述する
- すべてのブラウザに対応するため、
<img>をフォールバック用として含める。
✅ srcset や media を適切に指定する
- 間違ったメディアクエリを指定すると、期待通りに動作しない。
✅ WebP や AVIF 形式を優先し、JPEG / PNG をフォールバックにする
type="image/webp"を指定し、非対応ブラウザ用に JPEG を用意すると最適化される。
関連タグ
まとめ
<picture> タグは、HTML文書内で 異なるサイズやフォーマットの画像を切り替えるためのタグ です。
レスポンシブデザインに適しており、最適な画像を提供することでパフォーマンス向上につながります。
