Next.js 16 Image pipeline — interactive playground

<div class="pg">
    <h1 class="pg-title">🎮 Watch next/image decide: quality and loading urgency</h1>
    <p class="pg-sub">
      This models the two decisions Next.js 16 changed on <code>&lt;Image&gt;</code>: what <code>quality</code>
      value actually gets requested, and whether an image loads eagerly with a preload link. It runs the
      framework's own <code>findClosestQuality()</code> reduction and its eager/lazy check — not a simplified
      stand-in — so the numbers match what Next.js itself would compute.
    </p>

<div class="banner info show">
      Modeled logic, reproduced from Next.js's own source — no real server, no real image request.
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Quality allowlist (<code>images.qualities</code>)</div>
      <div class="btn-row">
        <button class="btn sm" data-preset="default">Default: [75]</button>
        <button class="btn sm" data-preset="wide">Wide: [25, 50, 75, 100]</button>
        <button class="btn sm" data-preset="two">Two-tier: [60, 90]</button>
      </div>
      <div class="allowlist" id="allowlist"></div>

<div class="qline">
        <span class="ctl-label" style="min-width:auto">Your <code>quality</code> prop:</span>
        <input type="range" id="qSlider" min="1" max="100" value="90" />
        <span class="qnum" id="qNum">90</span>
      </div>
      <p class="hint" id="qHint">—</p>

<div class="twocol" style="margin-top:4px">
        <div>
          <div class="panel-label" style="margin:0 0 6px"><span class="n">A</span> Through &lt;Image&gt;</div>
          <div class="reqline" id="reqComponent">—</div>
        </div>
        <div>
          <div class="panel-label" style="margin:0 0 6px"><span class="n">B</span> Direct hit on /_next/image</div>
          <div class="reqline" id="reqDirect">—</div>
        </div>
      </div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> Loading urgency (<code>priority</code> / <code>preload</code> / <code>loading</code>)</div>
      <div class="btn-row" style="flex-wrap:wrap; gap:14px;">
        <div class="field">
          <span class="ctl-label">Prop used</span>
          <div class="seg" id="propSeg">
            <button type="button" aria-pressed="false" data-val="none">none</button>
            <button type="button" aria-pressed="true" data-val="priority">priority (deprecated)</button>
            <button type="button" aria-pressed="false" data-val="preload">preload (current)</button>
            <button type="button" aria-pressed="false" data-val="eager">loading="eager"</button>
          </div>
        </div>
        <label class="toggle" style="margin-left:6px">
          <input type="checkbox" id="isLcp" /><span class="switch"></span>
          <span>this is the page's LCP image</span>
        </label>
      </div>

<div class="status" id="statusLine" style="margin-top:12px">
        <span class="dot info" id="dot"></span><span id="statusText">Ready — pick a prop above.</span>
      </div>
      <p class="hint" id="caption">—</p>
    </div>
  </div>

preview

Edits run in a sandbox in your browser — nothing is saved and nothing leaves the page.