端末に必要な1枚だけを配る

<div class="cards">
  <figure class="card" style="margin:0">
    <img
      alt="幅ごとに異なる候補が読み込まれるサンプル画像"
      width="1600" height="1000"
      sizes="(max-width: 700px) 92vw, 220px"
      srcset="
        w400.svg   400w,
        w800.svg   800w,
        w1600.svg 1600w"
      src="w800.svg" />
    <figcaption>カード内（実描画 約220px）</figcaption>
  </figure>

  <figure class="card" style="margin:0">
    <img
      alt="2枚目のサンプル画像"
      width="1600" height="1000"
      sizes="(max-width: 700px) 92vw, 220px"
      srcset="
        w400.svg   400w,
        w800.svg   800w,
        w1600.svg 1600w"
      src="w800.svg" />
    <figcaption>同じ指定でもう1枚</figcaption>
  </figure>
</div>

/* 画像の枠は CSS で決め、実際に何px幅で描かれるかを sizes に書く。
   この2つが食い違うと、ブラウザは間違った候補を選ぶ。 */
.cards {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}
.card {
  background: #fff; border: 1px solid var(--line);
  border-radius: 12px; overflow: hidden;
}
.card img {
  display: block;
  width: 100%;
  height: auto;      /* width/height 属性の比率を保ったまま伸縮させる */
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: #eef1f6;  /* 読み込み前の面。ここが白飛びを防ぐ */
}
.card figcaption {
  padding: .7rem .85rem;
  font-size: .84rem; line-height: 1.8; color: var(--muted);
}

// currentSrc には「ブラウザが実際に選んだ1枚」が入る。
// srcset の検証はこれを見るのが確実で、開発者ツールより早い。
const out = document.getElementById("out");
function report() {
  const img = document.querySelector(".card img");
  const css = Math.round(img.getBoundingClientRect().width);
  out.textContent =
    "ビューポート幅: " + window.innerWidth + "px / DPR: " + window.devicePixelRatio + "\n" +
    "画像の実描画幅: " + css + "px\n" +
    "必要な解像度: " + Math.round(css * window.devicePixelRatio) + "px\n" +
    "選ばれた候補: " + (img.currentSrc.split("/").pop() || "(未確定)");
}
addEventListener("load", report);
addEventListener("resize", report);

<picture class="hero">
  <!-- 狭い画面には縦長の構図。被写体が小さくならない -->
  <source media="(max-width: 700px)" srcset="tall.svg" width="600" height="700" />
  <!-- 既定は横長。img は必ず最後に置く -->
  <img src="wide.svg" alt="季節のキャンペーン告知" width="1200" height="500" />
</picture>

/* picture は「同じ被写体を別の構図で見せたい」ときに使う。
   単に解像度を変えたいだけなら img の srcset で足りる。 */
.hero { border-radius: 14px; overflow: hidden; border: 1px solid var(--line); }
.hero img {
  display: block;
  width: 100%;
  height: auto;
  background: #eef1f6;
}

const out = document.getElementById("out");
function report() {
  const img = document.querySelector(".hero img");
  out.textContent =
    "ビューポート幅: " + window.innerWidth + "px\n" +
    "選ばれた構図: " + (img.currentSrc.split("/").pop() || "(未確定)") + "\n" +
    "描画サイズ: " + Math.round(img.getBoundingClientRect().width) + " × " +
    Math.round(img.getBoundingClientRect().height) + "px";
}
addEventListener("load", report);
addEventListener("resize", report);

<div class="demo ok">
  <h2><span class="good">良い例</span> width と height を書く</h2>
  <p>属性に実寸を書いておくと、読み込み前から高さが確定します。CSS 側は width:100% と height:auto。</p>
  <img src="w800.svg" alt="" width="800" height="500" />
</div>

<div class="demo ratio">
  <h2><span class="good">良い例</span> aspect-ratio で枠を固定する</h2>
  <p>比率がまちまちの画像を同じ枠に収めたいときは、aspect-ratio と object-fit を組み合わせます。</p>
  <img src="tall.svg" alt="" />
</div>

<div class="demo bad-demo">
  <h2><span class="bad">悪い例</span> 何も指定しない</h2>
  <p>読み込みが終わった瞬間に高さが跳ね、この下の文章が押し下げられます。</p>
  <img src="wide.svg" alt="" />
  <p class="after">この行が、画像の読み込み完了で下へ動きます。</p>
</div>

/* width と height の属性を書いておくと、ブラウザは読み込み前に
   縦横比を計算して場所を確保する。CSS で幅だけ 100% にしても、
   height: auto があれば比率は保たれる。 */
.ok img {
  display: block;
  width: 100%;
  height: auto;          /* 属性の比率を維持したまま伸縮する */
  border-radius: 10px;
  background: #eef1f6;   /* 読み込み中の面。白飛びを防ぐ */
}

/* 属性を書けない場合（枠の比率を固定したい場合）は aspect-ratio。
   object-fit と併せると、比率の違う画像でも枠が動かない。 */
.ratio img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 10px;
  background: #eef1f6;
}

/* 悪い例。属性も aspect-ratio も無いと、読み込み完了の瞬間に
   高さが 0 から実寸へ跳ね、下の文章が押し下げられる。 */
.bad-demo img {
  display: block;
  width: 100%;
  border-radius: 10px;
  background: #eef1f6;
}

// CLS は PerformanceObserver で自分でも測れる。
// hadRecentInput が true のずれ（利用者の操作が原因）は除外する。
let cls = 0;
const box = document.getElementById("cls");
new PerformanceObserver((list) => {
  for (const e of list.getEntries()) if (!e.hadRecentInput) cls += e.value;
  box.textContent =
    "このページの CLS: " + cls.toFixed(4) +
    (cls > 0.1 ? "（0.1 超。不合格）" : "（0.1 以下。良好）");
}).observe({ type: "layout-shift", buffered: true });

<table class="tbl">
  <thead><tr><th>属性</th><th>役割</th><th>使いどころ</th></tr></thead>
  <tbody>
    <tr>
      <td><code>loading</code></td>
      <td>いつ取りに行くか</td>
      <td>画面外なら <code>lazy</code>。<strong>最初の画面に入る画像には付けない</strong></td>
    </tr>
    <tr>
      <td><code>fetchpriority</code></td>
      <td>他の要求より先に取るか</td>
      <td>LCP になる1枚だけ <code>high</code>。全部に付けたら意味が消える</td>
    </tr>
    <tr>
      <td><code>decoding</code></td>
      <td>復号で描画を止めるか</td>
      <td>基本 <code>async</code>。描画をブロックしない</td>
    </tr>
  </tbody>
</table>

<div class="strip">
  <!-- 最初の画面に入る主役。lazy を付けず、優先度を上げる -->
  <img src="wide.svg" alt="ページ先頭の主役画像"
       width="1200" height="500"
       fetchpriority="high" decoding="async" />

  <!-- すぐ下に続くが画面内。lazy にはしない -->
  <img src="w800.svg" alt="続く画像"
       width="800" height="500" decoding="async" />
</div>

<div class="spacer"></div>

<!-- ここから下は初期表示に入らない。lazy が効く -->
<div class="strip">
  <img src="w400.svg" alt="スクロールして初めて見える画像"
       width="400" height="250" loading="lazy" decoding="async" />
  <img src="tall.svg" alt="さらに下の画像"
       width="600" height="700" loading="lazy" decoding="async" />
</div>

.strip { display: grid; gap: .8rem; margin: 1.2rem 0 0; }
.strip img {
  display: block; width: 100%; height: auto;
  border-radius: 10px; background: #eef1f6;
}
.spacer { height: 120vh; }

// LCP がどの要素になったかは自分で測れる。
// 「主役だと思っていた画像」と実際の LCP がずれていることは多い。
const out = document.getElementById("out");
let lcp = null;
new PerformanceObserver((l) => {
  for (const e of l.getEntries()) lcp = e;
  render();
}).observe({ type: "largest-contentful-paint", buffered: true });

function render() {
  const imgs = [...document.images];
  const lazy = imgs.filter((i) => i.loading === "lazy").length;
  out.textContent =
    "画像 " + imgs.length + "枚 / うち lazy " + lazy + "枚\n" +
    "LCP: " + (lcp ? Math.round(lcp.startTime) + "ms" : "計測中") + "\n" +
    "LCP の要素: " + (lcp?.element?.tagName ?? "-") +
      (lcp?.url ? " (" + lcp.url.split("/").pop() + ")" : "");
}
addEventListener("load", render);