背景画像のレスポンシブ設計：CSS image-set() / aspect-ratio / object-fit の最短実装

// HTML<!-- 意味のない装飾なら CSS 背景。アクセシビリティ上は aria-hidden を付与 -->
<div class="hero" aria-hidden="true">
  <div class="hero__inner">
    <h1>見出し</h1>
    <p>キャッチコピー</p>
  </div>
</div>

// CSS/* 背景ヒーロー：aspect-ratio で予約サイズ。背景は cover / center でトリミング */
.hero {
  aspect-ratio: 16 / 9;
  min-height: 42vh;                 /* 端末縦が極端に小さい場合の保険 */
  background-color: #e5e7eb;        /* 先に塗っておくと初期フレームが安定 */
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;

  /* まずは JPEG をフォールバックとして指定（旧ブラウザ保険） */
  background-image: url("/images/hero-800.jpg");

  /* 次に image-set() で AVIF/WebP の候補を載せる（1x/2x） */
  background-image: image-set(
    url("/images/hero-800.avif") type("image/avif") 1x,
    url("/images/hero-1600.avif") type("image/avif") 2x,
    url("/images/hero-800.webp") type("image/webp") 1x,
    url("/images/hero-1600.webp") type("image/webp") 2x,
    url("/images/hero-800.jpg") type("image/jpeg") 1x,
    url("/images/hero-1600.jpg") type("image/jpeg") 2x
  );
}

/* デスクトップではもう一段解像度を上げる（CSSは“dppxベース”なので breakpoint で差し替える） */
@media (min-width: 1024px) {
  .hero {
    background-image: url("/images/hero-1200.jpg");
    background-image: image-set(
      url("/images/hero-1200.avif") type("image/avif") 1x,
      url("/images/hero-2400.avif") type("image/avif") 2x,
      url("/images/hero-1200.webp") type("image/webp") 1x,
      url("/images/hero-2400.webp") type("image/webp") 2x,
      url("/images/hero-1200.jpg") type("image/jpeg") 1x,
      url("/images/hero-2400.jpg") type("image/jpeg") 2x
    );
  }
}

.hero__inner {
  max-width: 72rem;
  margin: 0 auto;
  padding: 4rem 1rem;
  color: #111827;
  text-shadow: 0 1px 0 rgba(255,255,255,.6);
}

// HTML<!-- LCP候補の背景画像（代表的に採用されやすい1枚）を先読み -->
<link rel="preload" as="image" href="/images/hero-1200.avif" type="image/avif">

// HTML + CSS<!-- 意味のある画像（alt が必要）なら <img> で表現し、object-fit でカバー -->
<figure class="hero-img">
  <img
    src="/images/hero-1200.avif"
    srcset="/images/hero-800.avif 800w, /images/hero-1200.avif 1200w, /images/hero-1600.avif 1600w"
    sizes="(min-width: 1024px) 1000px, 92vw"
    width="1600" height="900"
    alt="製品の利用シーン"
    fetchpriority="high"
    decoding="async"
  />
  <figcaption class="sr-only">製品の利用シーンの写真</figcaption>
</figure>

<style>
.hero-img { aspect-ratio: 16 / 9; }
.hero-img > img { width: 100%; height: 100%; object-fit: cover; }
</style>

// TSX (Next.js)// Next.js 15：意味のあるヒーロー画像は next/image を推奨
// 注意: 背景装飾には <div style=background-image> が適任です
/*
import Image from "next/image";

export default function Hero() {
  return (
    <div className="relative" style={{ aspectRatio: "16/9" }}>
      <Image
        src="/images/hero-1600.avif"
        alt="製品の利用シーン"
        fill
        sizes="(min-width: 1024px) 1000px, 92vw"
        priority
      />
    </div>
  );
}
*/