Pictureタグ概要 | Notion

この中でPictureタグ使う必要なのはどれ？

✅ 含まれている主な画像たち（番号で整理）

番号	内容	表示位置
①	メインビジュアル（ファーストビュー）	一番上
②	スマホの中のキャンペーン画像	メインビジュアル内
③	下部にあるAboutセクションの画像たち	「キャンペーンについて」下

✅ それぞれに Pictureタグが必要か？

① メインビジュアル（背景含む）

🟰 PCとSPで、背景の風景や構成が明らかに違う！

スマホでは：中央に「スマホ画像」が目立ち、背景がトリミングされてる
PCでは：背景の尾道の街並み、空の広さ、猫・小物などが加わる
👉 全体として別の画像（アートディレクション）

✅ 結論 → Pictureタグを使うべき！

html
コピーする編集する
<picture>
  <source media="(max-width: 768px)" srcset="mv-sp.jpg">
  <img src="mv-pc.jpg" alt="キャンペーンメインビジュアル">
</picture>

② スマホ画面の中のキャンペーン画像

🟰 PC/SPどちらも全く同じ構図・画像が使われている

「スマホに映ってる内容」は同じ