MVのベストな実装方法

1  pictureタグ採用時のベストCSS

    <div class="main_visual">
        <picture>
          <source media="(max-width: 768px)" srcset="img/mv_sp.png" />
          <source media="(max-width: 1440px)" srcset="img/mv1.png" />
          <img src="img/mv1.png" alt="メインビジュアル" loading="lazy" />
        </picture>
      </div>


cssは以下の通りに、object-fitとaspect-ratioを使う

/*---------------MVの設定-------------------------------*/
.main_visual {
  width: 100%;
  aspect-ratio: 2 / 1; /* 2:1の比率で1440pxなら720px */ミュートしてます
  /*max-height: 920px; /* 最大720pxに制限 */
  margin-top: 70px; /* ヘッダーの高さ分のマージンを追加 */
  overflow: hidden;
  position: relative;
}
.main_visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
@media screen and (max-width: 768px) {
  .main_visual {
    /*aspect-ratio: 4 / 3; /* スマホは4:3など調整可能 */ミュートしてます
    height: 100vh; /* ビューポートの高さに合わせる */
  }
}
/*---------------MVの設定終了-------------------------------*/

ポイント:

object-fit: cover - 比率を保ちつつ領域を埋める
object-fit: contain - 画像全体を表示(余白が出る場合あり)
object-position - top/center/bottomで配置調整可能



2. background-image採用時のベストCSS


HTML親だけ

<div class="main_visual"></div>


CSSはbackground-image


.main_visual {
  width: 100%;
  aspect-ratio: 2 / 1;
  /*max-height: 920px;*/ミュートだけ
  background-image: url("../img/mv1.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}


ポイント:

background-size: cover - 領域を埋める
background-size: contain - 画像全体を表示
background-position - center/center top/center bottomで調整




使い分けは？？
3. 使い分けの基準



imgタグを使うべき場合
✅ SEOを重視する(alt属性でコンテンツ説明)
✅ アクセシビリティ重視(スクリーンリーダー対応)
✅ 画像が重要なコンテンツ(商品写真、人物写真など)
✅ 印刷時も表示したい
✅ 画像の遅延読み込み(loading="lazy")を活用したい
✅ SNSシェア時のOGP画像として認識させたい場合も有利

例: MVやECサイトの商品画像、ポートフォリオの作品、ニュースサイトの記事画像




background-imageを使うべき場合
✅ 純粋な装飾要素(デザインの一部)
✅ テキストオーバーレイが必要(見出しやボタンを重ねる)
✅ レスポンシブで画像の一部が切れてもOK
✅ CSSで完結させたい(管理がシンプル)
✅ 疑似要素(::before/::after)で装飾を追加
✅ 複数背景を重ねる場合

例: ヒーローセクションの背景、パターン背景、装飾的なビジュアル


一般的なコーポレートサイト・ブログ:
→ pictureタグ(SEO・アクセシビリティ重視)

デザイン重視のランディングページ・ポートフォリオ:
→ background-image(装飾性・柔軟性重視)

迷ったら: pictureタグを選ぶのが2025年のベストプラクティスです。