✅ WordPressサイトにおける画像表示の原則
WordPressの特徴として：
- 画像をアップすると複数サイズの画像が自動生成される（例：thumbnail、medium、large など）
wp_get_attachment_image() や the_post_thumbnail() を使えば、自動で srcset が出力される- つまり、構図が同じ画像なら
<img> タグで完結する設計が基本
✅ 各タグの正しい役割と使い分け（WordPress視点）
| タグ |
適切な用途 |
WPとの相性 |
解説 |
<img> |
同一画像・同一構図 |
◎ 相性抜群 |
srcsetも自動で付くし、lazyloadも標準対応 |
<img srcset> |
解像度・表示サイズによって最適画像を出し分けたい時 |
◯ 自動でも付くが、カスタムで手動制御も可能 |
通信量の最適化、Retina対応に効果大 |
<picture> |
画像の構図や内容が違う場合のみ（＝別画像を切り替えたい時） |
△ 管理がやや複雑 |
画像形式の切り替え（WebP）や、SPとPCで全く違う画像を使う時だけ使うべき |
✅ 代表的な判断フロー（WordPress案件で迷ったら）
php-template
コピーする編集する
構図は同じ？
├─ YES
│ ├─ WPの自動 srcset で十分？ → ✅ <img>（自動で最適化される）
│ └─ もっと軽量化 or Retina対応したい？ → ✅ <img srcset> を手動で記述
└─ NO（＝構図が明確に違う）
└─ ✅ <picture>（source media で切り替え）
✅ よくある誤解とその修正
| 誤解 |
実際は… |
| 「構図が同じでも、PC/SPで見た目が少し違うから Pictureタグにする」 |
❌ 不要。CSS（aspect-ratio、object-positionなど）で対応可能 |
| 「Pictureタグなら安心。とりあえず入れとけ」 |
❌ 無駄に重くなり、HTMLも冗長。構図が違う時だけ必要 |
| 「srcsetはWordPressが勝手に付けてくれるから何も考えなくていい」 |
❌ 自動は便利だけど、最適化の余地あり（特にRetina対応や通信量） |
✅ CSSで1枚の画像に収めるのも現場でよく使う手
css
コピーする編集する
img.thumb {
width: 100%;
aspect-ratio: 3 / 2;
object-fit: cover;
object-position: center top;
@media (max-width: 768px) {
aspect-ratio: 4 / 3;
object-position: center center;
}
}
✅ WordPressで画像1枚しか使えないような運用でも、CSSで比率変更・構図微調整できるから、構図が同じならこれで十分な場面が多い。
✅ 最終まとめ（WordPress化を見据えた鉄則）