imgtune 0.2.0 → 0.3.0

package/dist/image-open.js

@@ -0,0 +1,9 @@
+// sharp over a downloaded file, with the pixel limit every scan applies. Kept apart from remote.ts so the image helpers
+// (vector-art.ts, the media code) can open a file without importing the scan.
+import sharp from "sharp";
+/** The most input pixels sharp accepts for a downloaded file. */
+export const MAX_INPUT_PIXELS = 100_000_000;
+/** sharp over a downloaded file, refusing inputs above `limit` pixels. */
+export function openImage(buffer, limit = MAX_INPUT_PIXELS) {
+    return sharp(buffer, { limitInputPixels: limit });
+}

package/dist/images.js

@@ -4,7 +4,7 @@
 import { sha1 } from "./atomic.js";
 import { deriveSizesFromLayout, sameStructure, slotAt, } from "./layout.js";
 import { COMPONENT_NAME, loaderName, sanitizeText, urlPattern } from "./locate.js";
-import { undersizedProposal } from "./candidates.js";
+import { srcsetWidthsOf, undersizedProposal } from "./candidates.js";
 import { sizesBranchAt, sizesSlotAt } from "./sizes.js";
 import { parseSrcset } from "./srcset-parse.js";
 import { animatedTarget } from "./media-model.js";
@@ -51,6 +51,70 @@ export function searchHintsOf(locator) {
 export function losslessServed(format, animated) {
     return format === "jpeg" || format === "png" || (format === "gif" && !animated);
 }
+/** The hidden fix of an element from its entries (one per viewport it was measured at), or undefined when it is shown on load everywhere. */
+export function hiddenFixCore(entries, viewportCount) {
+    const hidden = entries.filter((e) => e.hidden !== undefined);
+    if (hidden.length === 0)
+        return undefined;
+    const reasons = [...new Set(hidden.map((e) => e.hidden).filter((r) => r !== undefined))];
+    const inPanel = hidden.some((e) => e.inPanel);
+    const hover = hidden.some((e) => e.hover);
+    const unstable = hidden.some((e) => e.unstable === true);
+    const shownIn = entries.filter((e) => e.hidden === undefined).map((e) => e.viewport.name);
+    const alreadyLazy = hidden.some((e) => e.lazy === true);
+    const onlyClipped = reasons.every((r) => r === "clipped");
+    // A responsive twin: shown on load somewhere, and hidden by a rule that is not a carousel's clipping.
+    const action = shownIn.length > 0 && !onlyClipped ? "responsive" : reasons.includes("clipped") || inPanel || hover ? "lazy" : "never-shown-on-load";
+    return {
+        reasons,
+        inPanel,
+        ...(hover ? { hover: true } : {}),
+        ...(unstable ? { unstable: "unknown" } : {}),
+        viewports: hidden.map((e) => e.viewport.name),
+        of: viewportCount,
+        widths: Object.fromEntries(entries.map((e) => [e.viewport.name, e.viewport.width])),
+        shownIn,
+        action,
+        ...(alreadyLazy ? { alreadyLazy: true } : {}),
+        perViewBytes: hidden.reduce((sum, e) => sum + e.bytes, 0) / viewportCount,
+    };
+}
+/** The hidden fix of an image element from its instances (one per viewport). */
+export function hiddenFixOf(members, viewportCount) {
+    return hiddenFixCore(members.map((m) => ({
+        viewport: { name: m.viewport.name, width: m.viewport.width },
+        bytes: m.bytes,
+        hidden: m.kind === "hidden" ? m.img.hidden : undefined,
+        inPanel: m.img.inPanel === true,
+        hover: m.img.hover === true,
+        lazy: m.img.lazy === true,
+        unstable: m.img.unstable === "unknown",
+    })), viewportCount);
+}
+/**
+ * The page's loaded-but-not-shown totals, counted over the records (one record per element or background layer, so the
+ * count and the cases are the same unit). Undefined when no record is hidden.
+ */
+export function hiddenTotalsOf(records, viewportCount) {
+    const hidden = records.flatMap((r) => (r.hidden !== undefined ? [r] : []));
+    if (hidden.length === 0)
+        return undefined;
+    const cases = { responsive: 0, lazy: 0, "never-shown-on-load": 0 };
+    for (const r of hidden)
+        cases[r.hidden.action]++;
+    // A file several records share (background layers of one image, or a repeated element) is one file: its bytes count once,
+    // at the largest of its records. A record with no URL is its own file.
+    const perFile = new Map();
+    hidden.forEach((r, index) => {
+        const key = r.current.src ?? `#${index}`;
+        perFile.set(key, Math.max(perFile.get(key) ?? 0, r.hidden.perViewBytes));
+    });
+    return {
+        images: hidden.length,
+        bytesPerView: [...perFile.values()].reduce((sum, bytes) => sum + bytes, 0),
+        cases,
+    };
+}
 const round1 = (value) => Math.round(value * 10) / 10;
 const round2 = (value) => Math.round(value * 100) / 100;
 /**
@@ -118,7 +182,7 @@ function tunableOf(member, pageUrl, loader) {
 /** The measured viewports of a group as the proposal check reads them. */
 function measuredPoints(members) {
     return members
-        .filter((m) => m.renderedWidth >= 1)
+        .filter((m) => m.renderedWidth >= 1 && m.kind !== "hidden")
         .map((m) => ({ viewport: m.viewport.name, viewportWidth: m.viewport.width, dpr: m.viewport.dpr, renderedWidth: m.renderedWidth, srcset: m.img.srcset }));
 }
 function sizesOf(measured) {
@@ -133,6 +197,17 @@ function sizesOf(measured) {
 export function hasFix(record) {
     return record.fix.bytes.saved > 0 || (record.fix.sizes !== undefined && record.fix.sizes.value !== record.current.sizes);
 }
+/**
+ * A plain image with no srcset at all, from a same-origin file or a CDN host no adapter knows: its saving is a resize, and
+ * its fix is variant files with a srcset (see srcsetWidthsOf). A known loader (next/image, a named CDN adapter) keeps its own
+ * advice, and so does a page with Next.js detected.
+ */
+export function isPlainNoSrcset(kind, srcset, loader, framework) {
+    if (kind !== "plain" || framework || srcset.trim() !== "")
+        return false;
+    // "generic" is the adapter name of an origin no adapter matched (Instance.loader); the locator names it plain-img or cdn:<host>.
+    return loader === "plain-img" || loader === "unknown" || loader === "generic" || loader.startsWith("cdn:");
+}
 /** Builds the image records of one page from its analysed instances. */
 export function buildImageRecords(input) {
     const { pageUrl, observations, instances, refName, resolved } = input;
@@ -192,6 +267,8 @@ export function buildImageRecords(input) {
                 loaded: inst.url !== "" && obs.responses.get(inst.url)?.buffer !== undefined,
                 lcp: obs.lcp?.kind === "image" && obs.lcp.index === inst.element,
             };
+            if (inst.kind === "hidden" && inst.img.hidden !== undefined)
+                entry.hidden = inst.img.hidden;
             if (inst.pixelWidth > 0)
                 entry.servedPx = inst.pixelWidth;
             if (inst.pixelWidth > 0 && inst.needed > 0)
@@ -219,7 +296,7 @@ export function buildImageRecords(input) {
             };
         }
         const measured = members
-            .filter((m) => m.renderedWidth >= 1)
+            .filter((m) => m.renderedWidth >= 1 && m.kind !== "hidden")
             .map((m) => ({
             viewportWidth: m.viewport.width,
             renderedWidth: m.renderedWidth,
@@ -236,16 +313,25 @@ export function buildImageRecords(input) {
         const keepSizes = sizes !== undefined && left === undefined;
         const savedEff = keepSizes ? saved : saved - savedSizes;
         const savedSizesEff = keepSizes ? savedSizes : 0;
+        // A plain image with no srcset: the sizes attribute does nothing without one, so no sizes proposal; its saving is the
+        // resize (est.), not a re-encode.
+        const plainNoSrcset = isPlainNoSrcset(member.kind, member.img.srcset, locator.loader, input.nextjs === true);
         const served = member.format;
         const animatedMember = members.find((m) => m.animated !== undefined);
         const lossless = losslessServed(served, animatedMember !== undefined);
         const best = lossless ? (saved > 0 ? "avif" : served) : served;
-        const fix = { bytes: { saved: savedEff, addedForSharpness, sizes: savedSizesEff, quality: savedEff - savedSizesEff } };
+        // A hidden fix first: an element never shown on load gets no animated encode either (its bytes are not a saving).
+        const hiddenFix = hiddenFixOf(members, viewportCount);
+        const fix = {
+            bytes: plainNoSrcset
+                ? { saved: savedEff, addedForSharpness, sizes: 0, resize: savedEff, quality: 0 }
+                : { saved: savedEff, addedForSharpness, sizes: savedSizesEff, quality: savedEff - savedSizesEff },
+        };
         if (member.cdnQuality !== undefined)
             fix.cdnQuality = { ...member.cdnQuality };
         if (member.formatAuto === true && lossless)
             fix.formatHandled = true;
-        if (animatedMember?.animated !== undefined) {
+        if (animatedMember?.animated !== undefined && hiddenFix?.shownIn.length !== 0) {
             fix.animated = {
                 info: animatedMember.animated,
                 context: "img",
@@ -257,12 +343,25 @@ export function buildImageRecords(input) {
             fix.noSaving = `sizes proposal left out: ${left}`;
             notes.push(`sizes proposal left out: ${left}`);
         }
-        if (keepSizes) {
+        if (plainNoSrcset && savedEff > 0) {
+            const naturalWidth = member.pixelWidth > 0 ? member.pixelWidth : undefined;
+            const needs = members.map((m) => m.needed);
+            const widths = srcsetWidthsOf(needs, naturalWidth);
+            if (widths.length > 0) {
+                fix.srcset = { widths, largest: Math.max(...needs), ...(keepSizes && sizes !== undefined ? { sizes: sizes.value } : {}) };
+                notes.push(`srcset: no srcset today; variants at ${widths.join("w, ")}w (the saving is a resize)`);
+            }
+        }
+        else if (keepSizes && !plainNoSrcset) {
             fix.sizes = { value: sizes.value, basis: sizes.basis, rung, branches: sizes.branches };
             const sized = sizes.branches.map((b) => b.basis);
             const formulas = sized.filter((b) => b === "layout-formula").length;
             notes.push(`sizes: ${sizes.basis} (${formulas} of ${sized.length} media branch(es) from the layout formula, checked at ${measured.length} of ${viewportCount} viewports)`);
         }
+        const flatMember = members.find((m) => m.flatness?.flat === true);
+        // Never on a hidden element: the vector check and the hidden fix do not stack on one record.
+        if (flatMember?.flatness !== undefined && hiddenFix === undefined)
+            fix.vector = { flatness: { ...flatMember.flatness } };
         if (member.kind === "plain")
             fix.width = member.needed;
         if (best !== undefined)
@@ -321,6 +420,15 @@ export function buildImageRecords(input) {
                 continue;
             own.set(m.format, Math.max(own.get(m.format) ?? -Infinity, m.qualityInfo.target));
         }
+        // A loaded-but-not-shown element has no vector claim (the vector check and the hidden fix never stack), and a copy that
+        // is never shown on load has no sizes claim either: its bytes are the hidden fix's. A responsive twin keeps the sizes of
+        // the viewports that show it (see the hidden-images tests).
+        if (hiddenFix !== undefined) {
+            record.hidden = hiddenFix;
+            delete record.fix.vector;
+            if (hiddenFix.shownIn.length === 0)
+                delete record.fix.sizes;
+        }
         targets.set(record, own);
         records.push(record);
     }
@@ -344,7 +452,8 @@ export function buildImageRecords(input) {
         for (const [format, target] of entry.max)
             perFormat[format] = target;
         for (const record of entry.records) {
-            if (record.current.quality === undefined)
+            // An image never shown has no quality claim: its file is not on screen at any viewport.
+            if (record.current.quality === undefined || record.hidden?.shownIn.length === 0)
                 continue;
             record.fix.quality = {
                 perFormat,

package/dist/layout.js

@@ -1,7 +1,4 @@
-// Layout chains and the CSS `sizes` value derived from them. Pure: no DOM, no network. The browser side (remote.ts) records
-// a chain per image and viewport; this module walks the chain down from the viewport to the image and states the image's
-// width as a linear function of the viewport width (a * vw + b). The function is checked against the widths the browser
-// rendered, branch by branch, and printed as CSS.
+import { offsetPx, wholePx } from "./px.js";
 /** Rounding of the coefficients: the printed value is the value the check uses. */
 const round = (value, digits) => {
     const scale = 10 ** digits;
@@ -95,16 +92,19 @@ export function formatLinear(l) {
     const vwPercent = round(l.a * 100, 2);
     const px = round(l.b, 2);
     if (vwPercent === 0)
-        return `${Math.max(0, px)}px`;
+        return `${Math.max(0, wholePx(px))}px`;
     if (px === 0)
         return `${vwPercent}vw`;
-    return `calc(${vwPercent}vw ${px < 0 ? "-" : "+"} ${Math.abs(px)}px)`;
+    const offset = offsetPx(px);
+    if (offset === 0)
+        return `${vwPercent}vw`;
+    return `calc(${vwPercent}vw ${offset < 0 ? "-" : "+"} ${Math.abs(offset)}px)`;
 }
 /** A fitted line held outside the range it was measured in: the viewport is clamped to [lo, hi] (CSS clamp()). */
 export function formatHeldFit(l, lo, hi) {
     if (Math.abs(l.a) < 1e-9)
         return formatLinear({ a: 0, b: l.b });
-    const b = round(l.b, 2);
+    const b = offsetPx(round(l.b, 2));
     return `calc(${round(l.a, 4)} * clamp(${Math.round(lo)}px, 100vw, ${Math.round(hi)}px) ${b < 0 ? "-" : "+"} ${Math.abs(b)}px)`;
 }
 /** The value of a held fit at a viewport: the line at the viewport clamped to [lo, hi]. */

package/dist/lcp.js

@@ -32,7 +32,8 @@ export function lcpImagesOf(result) {
             servedBytes: served.reduce((sum, p) => sum + p.servedBytes, 0) / served.length,
             savedBytes: record.fix.bytes.saved,
             exactBytes: record.fix.bytes.sizes ?? 0,
-            estBytes: record.fix.bytes.quality ?? 0,
+            // The resize of a plain image with no srcset is an estimate too (see ImageFix.bytes).
+            estBytes: (record.fix.bytes.quality ?? 0) + (record.fix.bytes.resize ?? 0),
             ...(skipped !== undefined ? { skipped } : {}),
         });
     }

package/dist/measure.js

@@ -184,14 +184,52 @@ export async function settleWithin(promises, ms) {
     await Promise.race([Promise.all(promises), timeout]);
     clearTimeout(timer);
 }
-/** Scrolls one viewport height at a time until the bottom, so lazy images start loading. */
+/**
+ * Marks, on the page, every image and video that is visible at this scroll position: not display:none, not
+ * visibility hidden, opacity above 0, a box inside the viewport, and not outside an overflow-hidden ancestor (a carousel slide
+ * off its track is not visible). The marks live in window.__imgtuneSeen (a WeakSet of elements) for the page's read (see
+ * readView): a copy seen visible at any scroll step of the scan's own pass is shown, whatever its state at the read.
+ */
+export const MARK_VISIBLE_SCRIPT = `(() => {
+  const seen = window.__imgtuneSeen || (window.__imgtuneSeen = new WeakSet());
+  const vw = window.innerWidth;
+  const vh = window.innerHeight;
+  for (const el of document.querySelectorAll("img, video")) {
+    const cs = getComputedStyle(el);
+    if (cs.display === "none" || cs.visibility === "hidden" || cs.visibility === "collapse") continue;
+    if (!(parseFloat(cs.opacity) > 0)) continue;
+    const r = el.getBoundingClientRect();
+    if (r.width <= 0 || r.height <= 0 || r.right <= 0 || r.bottom <= 0 || r.left >= vw || r.top >= vh) continue;
+    // The same rules as the hidden check (readView): content-visibility hidden, a closed details (except its summary), a
+    // display:none ancestor, and an overflow-hidden ancestor the box lies outside of.
+    let clipped = false;
+    for (let a = el.parentElement; a && !clipped; a = a.parentElement) {
+      const s = getComputedStyle(a);
+      if (s.display === "none" || s.getPropertyValue("content-visibility") === "hidden") clipped = true;
+      else if (a.tagName === "DETAILS" && !a.hasAttribute("open") && el.closest("summary") === null) clipped = true;
+      else if (/hidden|clip/.test(s.overflowX + " " + s.overflowY)) {
+        const b = a.getBoundingClientRect();
+        if (r.right <= b.left || r.left >= b.right || r.bottom <= b.top || r.top >= b.bottom) clipped = true;
+      }
+    }
+    if (!clipped) seen.add(el);
+  }
+})()`;
+/**
+ * Scrolls one viewport height at a time until the bottom, so lazy images start loading. After each step the copies visible at
+ * that position are marked (see MARK_VISIBLE_SCRIPT): a copy shown at any step of the pass is not a hidden copy.
+ */
 async function scrollThrough(page) {
+    await page.evaluate(MARK_VISIBLE_SCRIPT);
     for (let step = 0; step < MAX_SCROLL_STEPS; step++) {
         const atBottom = await page.evaluate(() => {
             window.scrollBy(0, window.innerHeight);
             return window.scrollY + window.innerHeight >= document.documentElement.scrollHeight - 1;
         });
         count("scroll steps");
+        // Two frames: the scroll events the step fired have run, so a state a scroll listener sets is the one marked.
+        await page.evaluate(() => new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(() => resolve()))));
+        await page.evaluate(MARK_VISIBLE_SCRIPT);
         await new Promise((resolve) => setTimeout(resolve, SCROLL_STEP_WAIT_MS));
         if (atBottom)
             return;

package/dist/media-encode.js

@@ -972,8 +972,12 @@ export async function searchQuality(samples, probe, codec, width, opts) {
         // A broken scorer is reported even when an earlier quality passed: the passes before it were not checked by it.
         if (err instanceof StageError && err.reason === "score-failed")
             return { ok: false, reason: "score-failed" };
-        if (best)
+        if (best) {
+            // A search the deadline ended keeps its best passing quality, labelled as cut short (never silently a finished search).
+            if (isDeadline(err))
+                return { ok: true, best: { ...best, timeLimited: true }, tried: ctx.cache.size };
             return { ok: true, best, tried: ctx.cache.size };
+        }
         if (err instanceof StageError)
             return { ok: false, reason: err.reason };
         return { ok: false, reason: isDeadline(err) ? "time-limit" : "probe-failed" };

package/dist/media-model.js

@@ -17,6 +17,7 @@ const REASON_TEXT = {
     "probe-failed": "ffprobe could not read the file",
     "score-failed": "the quality scorer failed",
     aborted: "aborted",
+    "never-shown": "never shown on load",
 };
 /** The text of a not-encoded reason (see REASON_TEXT). */
 export function reasonText(reason) {
@@ -228,12 +229,15 @@ export function sampleOffsets(durationS) {
     return [1 / 6, 1 / 2, 5 / 6].map((f) => Math.min(Math.max(0, durationS * f - 1), durationS - 2));
 }
 /**
- * Orders assets for the encode budget: heaviest per-view bytes first, then per-play bytes, then key. Duplicate keys
- * are dropped, keeping the first (heaviest) copy. The first `budget` assets are encoded; the rest are skipped and
- * still get their cheap hints. The input is not mutated.
+ * Orders assets for the encode budget: heaviest per-view bytes first, then per-play bytes, then key. The per-view bytes are
+ * `rankView` when the asset has one (the largest per-view bytes of one viewport), else `perView`: the claim is averaged over
+ * the viewports, and an average would rank a video shown at one viewport of two at half its weight. Duplicate keys are
+ * dropped, keeping the first (heaviest) copy. The first `budget` assets are encoded; the rest are skipped and still get
+ * their cheap hints. The input is not mutated.
  */
 export function rankForBudget(assets, budget) {
-    const sorted = [...assets].sort((a, b) => b.perView - a.perView || b.perPlay - a.perPlay || (a.key < b.key ? -1 : a.key > b.key ? 1 : 0));
+    const rank = (a) => a.rankView ?? a.perView;
+    const sorted = [...assets].sort((a, b) => rank(b) - rank(a) || b.perPlay - a.perPlay || (a.key < b.key ? -1 : a.key > b.key ? 1 : 0));
     const seen = new Set();
     const unique = [];
     for (const a of sorted) {

package/dist/media-phase.js

@@ -62,9 +62,23 @@ export function partitionByPolicy(assets, policy) {
 export function mediaKeyOf(kind, context, url, widths) {
     return `${kind}|${context}|${widths.join(",")}|${url}`;
 }
+/** The notEncoded reason of a video no viewport shows on load (its text is in media-model.ts reasonText). */
+export const NEVER_SHOWN = "never-shown";
+/**
+ * The assets to encode, and the ones that are never shown on load. A never-shown video has no claim to encode (no viewport
+ * displays it), so it keeps its probe (per-play bytes) and is marked NEVER_SHOWN instead of taking an encode budget slot.
+ */
+export function splitNeverShown(assets) {
+    const encode = [];
+    const neverShown = [];
+    for (const asset of assets)
+        (asset.neverShown === true ? neverShown : encode).push(asset);
+    return { encode, neverShown };
+}
 /** The asset of a `<video>` record: its widths are the kept widths of the scan. */
 export function videoAssetOf(record) {
     const widths = record.widths?.widths ?? [];
+    const neverShown = record.hidden !== undefined && record.hidden.shownIn.length === 0;
     return {
         key: mediaKeyOf("video", "video", record.src, widths),
         url: record.src,
@@ -75,6 +89,12 @@ export function videoAssetOf(record) {
         perView: record.bytes.perView,
         perPlay: record.bytes.perPlay,
         perViewBasis: record.bytes.perViewBasis,
+        // A video shown at one viewport of two has half the averaged perView, but its one viewport loads it in full: the budget
+        // ranks it by that, so the averaging does not push it out of the encode budget.
+        ...(record.perViewport !== undefined && record.perViewport.length > 0
+            ? { rankView: Math.max(...record.perViewport.map((p) => p.bytes)) }
+            : {}),
+        ...(neverShown ? { neverShown: true } : {}),
     };
 }
 /** The redirect-hop check of a video's page: the third-party policy as the browser's route guard applies it. */
@@ -289,8 +309,11 @@ async function runJobs(jobs, identity, probe, samplesOf, dir, deadline, env, rea
                 workDir: join(dir, `${job.codec}-${job.width}`),
                 signal: opts.signal,
             });
-            if (outcome.ok)
-                await opts.cache?.putJson(cacheKey, { ok: true, best: outcome.best });
+            // A search cut short by its deadline is not cached: a later run with more time may find a cheaper passing quality.
+            if (outcome.ok) {
+                if (outcome.best.timeLimited !== true)
+                    await opts.cache?.putJson(cacheKey, { ok: true, best: outcome.best });
+            }
             else if (outcome.reason === "no-passing-quality")
                 await opts.cache?.putJson(cacheKey, { ok: false, reason: "no-passing-quality" });
         }

package/dist/px.js

@@ -0,0 +1,11 @@
+// Whole-px rounding of a proposed sizes value. A fitted length is rounded in the direction that keeps the chosen srcset
+// candidate covering the need: a length up, a plus offset up, and a minus offset down in magnitude (so the value is not
+// below the fit). A `sizes` value like 190.04px is never printed.
+/** A px length as whole px, rounded up (190.04 -> 191). */
+export function wholePx(px) {
+    return Math.ceil(px - 1e-9);
+}
+/** A signed px offset of a calc(): a plus offset rounded up, a minus offset rounded down in magnitude. */
+export function offsetPx(b) {
+    return b < 0 ? -Math.floor(-b + 1e-9) : Math.ceil(b - 1e-9);
+}

package/dist/recheck.js

@@ -11,6 +11,7 @@ import { parseViewports, safeText, scanOnce, scorerNote } from "./remote.js";
 import { settleLimit } from "./concurrency.js";
 import { cleanRecord } from "./locate-join.js";
 import { batchLine, rowLine } from "./recheck-rows.js";
+import { hiddenSummaryLine } from "./hints.js";
 import { parseAllowHosts, thirdPartyFromFlags } from "./third-party.js";
 /** Browser contexts (one per viewport loaded) a recheck keeps in flight over all its pages together. */
 export const RECHECK_CONTEXTS = 3;
@@ -210,7 +211,11 @@ export function compareImage(before, after, unchangedSrc, how = { ambiguous: 0 }
     const reused = unchangedSrc ? " (src unchanged: estimate reused)" : "";
     lines.push(`  hint   sizes ${sizesBefore} -> ${sizesAfter}  saves ${kb(savedBefore)} -> ${kb(savedAfter)}${reused}`);
     // Predicted (the hint, per view, averaged over viewports) next to measured (served bytes at the same viewports).
-    const split = before.fix.bytes.sizes !== undefined ? ` (sizes ${kb(before.fix.bytes.sizes)}, quality ${kb(before.fix.bytes.quality ?? 0)})` : "";
+    const split = before.fix.bytes.resize !== undefined
+        ? ` (sizes ${kb(before.fix.bytes.sizes ?? 0)}, resize ${kb(before.fix.bytes.resize)}, quality ${kb(before.fix.bytes.quality ?? 0)})`
+        : before.fix.bytes.sizes !== undefined
+            ? ` (sizes ${kb(before.fix.bytes.sizes)}, quality ${kb(before.fix.bytes.quality ?? 0)})`
+            : "";
     const predicted = `predicted ${saving(savedBefore)}/view${split}`;
     const mean = measured.length > 0 ? measured.reduce((sum, b) => sum + b, 0) / measured.length : undefined;
     if (mean !== undefined)
@@ -369,6 +374,9 @@ async function recheckPage(file, args, cwd, log, options) {
     if (details.length > 0)
         out.push("", "not passed:", ...details);
     out.push(batchLine(rows, seconds) + ` on ${safeText(target.href)} at ${viewports.length} viewport(s)`);
+    const hiddenLine = hiddenSummaryLine(fresh.hidden);
+    if (hiddenLine !== undefined)
+        out.push(hiddenLine);
     out.push(failures.length === 0 ? "ok: no image became undersized, and no bytes rose without a sharpness fix" : `FAILED: ${failures.length} check(s)`);
     for (const failure of failures)
         out.push(`  ${safeText(failure)}`);