pictureタグの解説

<picture>タグの解説


<picture>
  <source media="(max-width: 768px)" srcset="sp-image.jpg">
  <source media="(min-width: 769px)" srcset="pc-image.jpg">
  <img src="pc-image.jpg" alt="説明">
</picture>


主な用途
1. レスポンシブ画像の切り替え

画面サイズに応じて異なる画像を表示
PCとスマホで構図の異なる画像を使い分け



2. 画像フォーマットの最適化

<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.avif" type="image/avif">
  <img src="image.jpg" alt="フォールバック">
</picture>



新しいフォーマット（WebP、AVIF）をサポートしないブラウザではJPGにフォールバック

3. アートディレクション

デバイスごとに最適な構図の画像を表示
トリミング位置を変える
実装例
基本的な使い方:

<picture>
  <source media="(max-width: 768px)" srcset="img/banner-sp.jpg">
  <img src="img/banner-pc.jpg" alt="バナー画像">
</picture>


複数ブレークポイント:

<picture>
  <source media="(max-width: 430px)" srcset="img/sp.jpg">
  <source media="(max-width: 768px)" srcset="img/tablet.jpg">
  <img src="img/pc.jpg" alt="レスポンシブ画像">
</picture>


高解像度対応（Retina）:

<picture>
  <source 
    media="(max-width: 768px)" 
    srcset="img/sp.jpg 1x, img/sp@2x.jpg 2x">
  <img src="img/pc.jpg" alt="高解像度対応">
</picture>


重要なポイント
1. <img>は必須

<picture>の最後に必ず配置
フォールバック用
CSSのスタイリング対象


2. メディアクエリの順序

小さい画面から大きい画面の順で記述
ブラウザは上から順に条件を評価


3. srcsetとsrcの違い

srcset="image.jpg"   <!-- <source>で使用 -->
src="image.jpg"      <!-- <img>で使用 -->


Cssとの組み合わせ

picture img {
  width: 100%;
  height: auto;
  object-fit: cover;
}


Pictureを使う場合

<picture>
  <source media="(max-width: 768px)" srcset="sp.jpg">
  <img src="pc.jpg" alt="画像">
</picture>



<こういった風に使います>

<picture>
     <source media="(max-width: 1023px)" srcset="images/MV_sp.png" />
     <source media="(max-width: 1440px)" srcset="images/MV_pc.png" />
     <img src="images/MV_pc.png" alt="メインビジュアル" loading="lazy" />
</picture>


HTML側で画像切り替え
不要な画像は読み込まれない（パフォーマンス向上）
JavaScriptなしで実装可能
メリット
✅ パフォーマンス向上

必要な画像のみ読み込む
モバイルで軽量な画像を配信
✅ SEO対策

各デバイスに最適な画像を提供
ページ速度改善
✅ メンテナンス性

CSSのdisplay: noneより管理しやすい
HTMLで完結
使い分け
<picture>を使うべき場合:

PC/SPで異なる構図の画像を使いたい
次世代フォーマット（WebP等）に対応したい
アートディレクションが必要
<img>のみで良い場合:

同じ画像を全デバイスで使用
CSSのwidth: 100%で対応可能
シンプルな実装で十分
まとめ
<picture>タグはレスポンシブ対応の画像切り替えに最適で、パフォーマンスとUXを両立できる強力なHTML要素です。