それぞれ使い方

✅ タグの基本役割

タグ	役割	適したケース
`<img>`	通常の画像表示	枠内で構図が同じ・画像1枚で済む場合
`<img srcset>`	表示サイズごとに画像を切り替え	構図が同じでSP/PCそれぞれ最適サイズを使いたい場合
`<picture>`	条件で別画像を切り替え	SPとPCで構図・内容が異なる場合（アートディレクション）

✅ CSSで画像1枚に収めるパターン（最も軽量）

scss
コピーする編集する
img.thumb {
  width: 100%;
  aspect-ratio: 3 / 2; /* PC */
  object-fit: cover;
  object-position: center top;
  display: block;
}

@media (max-width: 768px) {
  img.thumb {
    aspect-ratio: 4 / 3; /* SP */
    object-position: center center;
  }
}

✅ 向いている場面

枠の比率だけが違う（構図は同じ）
トリミングされても大丈夫な画像（ギャラリー・カード）
WordPressで画像1枚アップで済ませたい場合

✅ タグ選び判断チャート

php-template
コピーする編集する
画像の構図は同じ？（中心も同じ？）
│
├─ YES
│   ├─ 解像度・容量も最適化したい？ → ✅ <img srcset>
│   └─ 画像1枚で済ませたい？       → ✅ <img> + CSS (aspect-ratioなど)
│
└─ NO（見せ方・構図が違う）
    → ✅ <picture>（完全に別画像として切り替え）

✅ WordPress案件での考え方

ケース	選ぶタグ	補足
WPの自動生成画像で済ませる	`<img>`	`srcset`自動で付与される
軽量化・Retina・画質を意識	手動で`<img srcset>`	表示サイズに最適な画像だけ読ませる
構図が違う（SP/PCで別画像）	`<picture>`	`source media`で切り替え
CSSで比率調整したい	`<img>` + `aspect-ratio`	比率が変わるだけなら最もシンプル

✅ 各方式の比較まとめ

方式	特徴	メリット	デメリット
`<img>` + CSS	画像1枚／CSSで比率調整	軽量・高速・管理ラク	トリミングに注意
`<img srcset>`	同構図サイズ違い画像を切替	軽くて高画質・Retina対応	画像2枚必要
`<picture>`	条件で構図ごと切替	完全に別構図でも対応可	重め・記述多め・画像管理が複雑

✅ タグの基本役割

✅ CSSで画像1枚に収めるパターン（最も軽量）

✅ 向いている場面

✅ タグ選び判断チャート

✅ WordPress案件での考え方

✅ 各方式の比較まとめ

✅ 最後にポイント