imgtune 0.2.0 → 0.3.0

package/dist/remote.js

@@ -5,12 +5,16 @@ import { dirname, join, resolve } from "node:path";
 import { launchChromium } from "./browser.js";
 import sharp from "sharp";
 import { writeFileAtomic, sha1 } from "./atomic.js";
+import { MAX_INPUT_PIXELS, openImage } from "./image-open.js";
 import { errorLine, mdCode, mdText, safeText } from "./text.js";
-import { commentHints, videoRowOf, videoTotalsLine } from "./hints.js";
+import { hiddenPagesLine, hiddenVideoPagesLine, commentHints, hiddenSummaryLine, videoRowOf, videoTotalsLine } from "./hints.js";
 import { lcpLinesOf } from "./lcp.js";
 import { MAX_MAX_QUALITIES, MIN_MAX_QUALITIES, planQualityCap, qualitiesLine } from "./qualities-cap.js";
 export { mdCode, mdText, safeText };
+export { MAX_INPUT_PIXELS, openImage };
 import { isLocalTarget, systemResolver } from "./address.js";
+import { loadVectorizer, stillFlatness } from "./vector-art.js";
+import { applyVector, FlatBuffers, runVectorPhase } from "./vector-phase.js";
 import { startEgressProxy } from "./egress-proxy.js";
 import { makeFetcher, MAX_IMAGE_BYTES } from "./fetch.js";
 import { sameSite } from "./site.js";
@@ -20,7 +24,7 @@ import { DEFAULT_VIEWPORTS } from "./config.js";
 import { encode, encodedBytes, ENCODE_THREADS, ENCODER_ID, FAST_AVIF_EFFORT } from "./encode.js";
 import { adapterFor, formatAutoOf, originalOf } from "./loaders.js";
 import { COMPONENT_NAME, MAX_SOURCE_READ, imageAtLine, parseSourceMap, resolveFunctionLocations, resolveOwnerChain, resolveOwners } from "./locate.js";
-import { buildImageRecords, hasFix, rungOfPage } from "./images.js";
+import { buildImageRecords, hasFix, hiddenTotalsOf, isPlainNoSrcset, rungOfPage } from "./images.js";
 import { animationOf } from "./animated.js";
 import { fullBytesOf, SCAN_MAX_VIDEO_WIDTHS, videoRecordsOf, withPosterImages } from "./video-analysis.js";
 import { backgroundPage, backgroundTotals, buildBackgroundRecords, displayedCssWidth, MAX_BACKGROUND_ELEMENTS, MAX_BACKGROUND_VALUE, backgroundTooLarge, neededDevicePixels, parseBackgroundImage, parseBackgroundSize, pickLoaded, } from "./backgrounds.js";
@@ -33,7 +37,16 @@ import { gpuNote, startGpuScorer, gpuSettingOf, gpuSettingOne } from "./gpu.js";
 import { bisectQuality, confirmBisect, minPassingQuality } from "./search.js";
 import { SURVEY_IDLE_TIMEOUT_MS, SURVEY_PAGE_CONCURRENCY, SURVEY_VIEWPORTS, surveyNote } from "./survey.js";
 import { cacheScope, CACHE_DIR, CACHE_VERSION, contentHash, ResultCache, resizeScope } from "./result-cache.js";
-import { attachMediaResults, mediaAssetsOf, partitionByPolicy, probeLengths, refineAssetLength, runMediaPhase, skippedMedia, } from "./media-phase.js";
+import { attachMediaResults, mediaAssetsOf, NEVER_SHOWN, partitionByPolicy, probeLengths, refineAssetLength, runMediaPhase, skippedMedia, splitNeverShown, } from "./media-phase.js";
+import { analyzeResources } from "./resources/phase.js";
+import { replayHarPath } from "./replay.js";
+import { ResourcePool } from "./resources/pool.js";
+import { RESOURCE_BODY_SETTLE_MS } from "./resources/capture.js";
+import { DEFAULT_RESOURCE_BUDGET_MS, newResourceRun } from "./resources/cache.js";
+import { resourceLinesOf, resourceTotalsLine } from "./resources/report.js";
+/** Resource findings listed in the PR-comment Markdown (the JSON and the text output have more). */
+const RESOURCE_MARKDOWN_ROWS = 5;
+import { readPageContext, readResourceBody, resourceRecordOf } from "./resources/capture.js";
 import { BROKEN_EXIT, withBroken } from "./broken.js";
 import { EstimateRegistry, hashOf, withEstimates } from "./estimate-jobs.js";
 import { isFolder, sourceRootOf, unreadSourceNote } from "./source-root.js";
@@ -75,7 +88,15 @@ export const MAX_PAGE_CONCURRENCY = 6;
 /** The longest --idle-timeout: ten minutes (a timer past 2^31 ms would fire at once). */
 export const MAX_IDLE_TIMEOUT_MS = 600_000;
 const CHALLENGE_STATUS = [403, 429, 503];
-const CHALLENGE_MARKERS = ["cf-chl", "captcha"];
+const CHALLENGE_MARKERS = ["cf-chl", "captcha", "just a moment", "captcha-delivery", "awswaf"];
+/**
+ * Response headers a WAF or CDN sends with its challenge page. They decide whatever the page has in it: a challenge page can
+ * carry a few images (S071 had 3 of a page's 148), so the image count does not clear them.
+ */
+const CHALLENGE_HEADERS = [
+    { name: "x-amzn-waf-action", values: ["challenge", "captcha"] },
+    { name: "cf-mitigated", values: ["challenge"] },
+];
 /** Quality assumed for an image whose URL does not say (next/image's default). */
 export const ASSUMED_QUALITY = 75;
 /** Rules longer than this are ignored; a robots.txt is read up to MAX_ROBOTS_BYTES. */
@@ -165,7 +186,7 @@ function decidingRule(robotsTxt, target) {
 // ---------------------------------------------------------------------------------------------------------------------
 // Resolution: srcset candidates and the right one
 // ---------------------------------------------------------------------------------------------------------------------
-import { UNDERSIZED_RATIO, isUndersized, neededWidth, rightCandidate, undersizedProposal } from "./candidates.js";
+import { UNDERSIZED_RATIO, isUndersized, neededWidth, rightCandidate, srcsetWidthLabel, srcsetWidthsOf, undersizedProposal } from "./candidates.js";
 export { isUndersized, neededWidth, rightCandidate } from "./candidates.js";
 // ---------------------------------------------------------------------------------------------------------------------
 // References and the current quality of a URL
@@ -308,7 +329,11 @@ export function groupKey(sizes, classes, refWidth) {
     return [sizes ?? "-", cls || "-", bucket].join("|");
 }
 /** A page is a challenge when the document is refused or throttled, or it has no image and shows a challenge marker. */
-export function isChallenge(status, imageCount, html) {
+export function isChallenge(status, imageCount, html, headers = {}) {
+    for (const { name, values } of CHALLENGE_HEADERS) {
+        if (values.includes((headers[name] ?? "").toLowerCase()))
+            return true;
+    }
     if (status !== undefined && CHALLENGE_STATUS.includes(status))
         return true;
     if (imageCount > 0)
@@ -374,6 +399,7 @@ const VALUE_OPTIONS = [
     "--page-concurrency",
     "--idle-timeout",
     "--media-budget",
+    "--svg-budget",
     "--media-time",
     "--video-bar",
     "--video-still-bar",
@@ -406,6 +432,15 @@ export const DEFAULT_MEDIA_TIME = 600;
 const MAX_MEDIA_TIME = 3600;
 export const DEFAULT_VIDEO_BAR = 93;
 export const DEFAULT_VIDEO_STILL_BAR = 65;
+/** The vector check's budget: the flat images traced per run, heaviest first (--svg-budget). */
+export const DEFAULT_SVG_BUDGET = 50;
+export const MAX_SVG_BUDGET = 1000;
+/** The longest --resource-time, in seconds. */
+export const MAX_RESOURCE_TIME = 3600;
+/** The resource analyses of a scan that run at once, in the phase-1 pool (see resources/pool.ts). */
+const RESOURCE_PARALLEL = 2;
+/** The default --resource-time, in seconds: the heavy resource work of a run (see resources/cache.ts). */
+export const DEFAULT_RESOURCE_TIME_S = DEFAULT_RESOURCE_BUDGET_MS / 1000;
 /** The arguments after `scan`: one or more page URLs and the options. Throws with a message the CLI prints. */
 export function parseScanArgs(argv) {
     const args = { urls: [], out: DEFAULT_OUT, aggressive: false, quality: true, thirdParty: DEFAULT_THIRD_PARTY };
@@ -430,6 +465,8 @@ export function parseScanArgs(argv) {
             args.gpu ??= gpuSettingOne(0);
         else if (arg === "--no-cache")
             args.noCache = true;
+        else if (arg === "--no-resources")
+            args.resources = false;
         else if (arg === "--gpu-encode")
             args.gpuEncode = true;
         else if (arg === "--harness")
@@ -467,6 +504,10 @@ export function parseScanArgs(argv) {
                 args.idleTimeoutMs = parseRange(arg, value, 0, MAX_IDLE_TIMEOUT_MS);
             else if (arg === "--media-budget")
                 args.mediaBudget = parseRange(arg, value, 0, MAX_MEDIA_BUDGET);
+            else if (arg === "--svg-budget")
+                args.svgBudget = parseRange(arg, value, 0, MAX_SVG_BUDGET);
+            else if (arg === "--resource-time")
+                args.resourceTime = parseRange(arg, value, 0, MAX_RESOURCE_TIME);
             else if (arg === "--media-time")
                 args.mediaTime = parseRange(arg, value, 1, MAX_MEDIA_TIME);
             else if (arg === "--video-bar")
@@ -504,16 +545,10 @@ export function parseScanArgs(argv) {
     args.thirdParty = thirdPartyFromFlags(blockThirdParty, allowHosts);
     return args;
 }
-/** The most input pixels sharp accepts for a downloaded file. */
-export const MAX_INPUT_PIXELS = 100_000_000;
 /** A width clamped to 1..MAX_WIDTH. */
 export function clampWidth(width) {
     return Math.max(1, Math.min(MAX_WIDTH, Math.floor(width)));
 }
-/** sharp over a downloaded file, refusing inputs above `limit` pixels. */
-export function openImage(buffer, limit = MAX_INPUT_PIXELS) {
-    return sharp(buffer, { limitInputPixels: limit });
-}
 /**
  * sharp names an AVIF file "heif" (its compression is "av1"). Every other use in this file says "avif", so that is the
  * name a pixel size carries. A HEIF with another compression (HEVC) keeps sharp's name and gets no estimate.
@@ -921,9 +956,25 @@ export function addMediaResponse(media, response) {
         ...(total !== undefined ? { total } : {}),
     });
 }
-/** One read of the page as it stands: its images and whether it is a Next.js app. */
-async function readView(page, light = false, withVideos = false) {
-    const seen = await page.evaluate(({ depth, maxOwners, maxBackgrounds, maxValue, light, withVideos }) => {
+/**
+ * The most candidates per viewport that are re-read after a scroll (see readView): an opacity, clipped or zero-size copy.
+ * A candidate past the cap keeps its snapshot reason, and the page counts it (ViewportObservation.revealCapped).
+ */
+export const REVEAL_CAP = 60;
+/** The wait between the snapshot and the second read of a hidden candidate (see readView): it must span a toggle period. */
+export const REVEAL_STABLE_MS = 1000;
+/** The wait after the scroll pass, before the last read: a fade the scroll started has finished by then. */
+export const REVEAL_SETTLE_MS = 800;
+/** The candidates of a page's viewports that were past REVEAL_CAP (not re-read after a scroll), summed. */
+function revealCappedOf(observations) {
+    return observations.reduce((sum, obs) => sum + (obs.revealCapped ?? 0), 0);
+}
+/**
+ * One read of the page as it stands: its images and whether it is a Next.js app. `quick` takes no stability pass (see
+ * settledView): every hidden copy it finds is unverified.
+ */
+async function readView(page, light = false, withVideos = false, quick = false) {
+    const seen = await page.evaluate(async ({ depth, maxOwners, maxBackgrounds, maxValue, light, withVideos, revealCap, revealWait, revealSettle, reveal }) => {
         const num = (value) => {
             const n = parseFloat(value);
             return Number.isFinite(n) ? n : 0;
@@ -1068,8 +1119,86 @@ async function readView(page, light = false, withVideos = false) {
             return { nodes, skipped, truncated: el !== null };
         };
         const nextjs = document.querySelector('img[data-nimg], script[src*="/_next/"], link[href*="/_next/"]') !== null;
+        // Why an image is not shown, if it is not (see HiddenReason). Read in full reads only: a light read has no use for it.
+        // The selectors of the :hover rules that swap what is shown (a rule setting display, visibility or opacity), with the
+        // :hover taken out: an element they match is shown on hover, not on load.
+        const hoverSelectors = [];
+        const collectHover = (rules) => {
+            for (const rule of Array.from(rules)) {
+                if (hoverSelectors.length >= 2000)
+                    return;
+                if (rule instanceof CSSStyleRule) {
+                    if (rule.selectorText.includes(":hover") && (rule.style.display || rule.style.visibility || rule.style.opacity)) {
+                        hoverSelectors.push(rule.selectorText.replace(/:hover/g, ""));
+                    }
+                }
+                else if ("cssRules" in rule) {
+                    collectHover(rule.cssRules);
+                }
+            }
+        };
+        for (const sheet of Array.from(document.styleSheets)) {
+            try {
+                collectHover(sheet.cssRules);
+            }
+            catch {
+                // A cross-origin sheet has no readable rules.
+            }
+        }
+        const hoverSwap = (el) => hoverSelectors.some((selector) => {
+            try {
+                return el.matches(selector);
+            }
+            catch {
+                return false;
+            }
+        });
+        const hiddenReasonOf = (img, rect) => {
+            let displayNone = false;
+            let opacityZero = false;
+            let inPanel = false;
+            let clipped = false;
+            for (let el = img; el !== null; el = el.parentElement) {
+                const s = getComputedStyle(el);
+                // content-visibility: hidden keeps the box (a closed <details> does) but skips the rendering: not shown either.
+                if (s.display === "none" || s.getPropertyValue("content-visibility") === "hidden")
+                    displayNone = true;
+                if (s.opacity === "0")
+                    opacityZero = true;
+                // A tab panel, a hidden subtree, an aria-hidden one, or the content of a closed <details> (rendered when it opens).
+                if (el.getAttribute("role") === "tabpanel" || el.hasAttribute("hidden") || el.getAttribute("aria-hidden") === "true")
+                    inPanel = true;
+                // The content of a closed <details> is not rendered (Chrome skips it with a pseudo-element, so the box is laid out
+                // and only the content is not shown); the summary stays visible.
+                if (el.tagName === "DETAILS" && !el.hasAttribute("open") && img.closest("summary") === null) {
+                    inPanel = true;
+                    displayNone = true;
+                }
+                // The root's overflow is the viewport's (it propagates from html or body), so it clips nothing: only the ancestors between.
+                const root = el === document.documentElement || el === document.body;
+                if (!root && el !== img && (s.overflowX === "hidden" || s.overflowY === "hidden" || s.overflowX === "clip" || s.overflowY === "clip")) {
+                    const box = el.getBoundingClientRect();
+                    if (rect.width > 0 && rect.height > 0 && (rect.right <= box.left || rect.left >= box.right || rect.bottom <= box.top || rect.top >= box.bottom))
+                        clipped = true;
+                }
+            }
+            const own = getComputedStyle(img);
+            const reason = displayNone
+                ? "display"
+                : own.visibility === "hidden" || own.visibility === "collapse"
+                    ? "visibility"
+                    : opacityZero
+                        ? "opacity"
+                        : rect.width === 0 || rect.height === 0
+                            ? "zero-size"
+                            : clipped
+                                ? "clipped"
+                                : undefined;
+            return reason === undefined ? undefined : { reason, inPanel, hover: hoverSwap(img) };
+        };
         const images = Array.from(document.querySelectorAll("img"), (img, index) => {
             const rect = img.getBoundingClientRect();
+            const hidden = light ? undefined : hiddenReasonOf(img, rect);
             return {
                 index,
                 currentSrc: img.currentSrc,
@@ -1081,6 +1210,9 @@ async function readView(page, light = false, withVideos = false) {
                 nextImage: img.hasAttribute("data-nimg"),
                 inFirstViewport: rect.bottom > 0 && rect.top < window.innerHeight,
                 lazy: img.loading === "lazy",
+                ...(hidden !== undefined
+                    ? { hidden: hidden.reason, ...(hidden.inPanel ? { inPanel: true } : {}), ...(hidden.hover ? { hover: true } : {}) }
+                    : {}),
                 layout: light ? undefined : layoutOf(img),
                 locator: {
                     testid: img.closest("[data-testid]")?.getAttribute("data-testid") ?? undefined,
@@ -1105,6 +1237,7 @@ async function readView(page, light = false, withVideos = false) {
                 if (!value || value === "none" || !/url\(|image-set\(/.test(value))
                     continue;
                 const rect = el.getBoundingClientRect();
+                const hiddenInfo = hiddenReasonOf(el, rect);
                 // The element's own fiber only: an ancestor's owner would name a component that does not draw this background.
                 const fiberKey = Object.keys(el).find((k) => k.startsWith("__reactFiber$"));
                 backgrounds.push({
@@ -1115,7 +1248,11 @@ async function readView(page, light = false, withVideos = false) {
                     owners: ownersOf(fiberKey ? el[fiberKey] : undefined),
                     width: rect.width,
                     height: rect.height,
-                    hidden: cs.display === "none" || cs.visibility === "hidden" || rect.width === 0 || rect.height === 0,
+                    // Hidden: the reason (see hiddenReasonOf). A hidden layer is measured only when its file was downloaded.
+                    hidden: hiddenInfo !== undefined,
+                    ...(hiddenInfo !== undefined
+                        ? { hiddenReason: hiddenInfo.reason, ...(hiddenInfo.inPanel ? { inPanel: true } : {}), ...(hiddenInfo.hover ? { hover: true } : {}) }
+                        : {}),
                     // Capped here as well: one character over the cap is enough for Node to skip the element.
                     backgroundImage: (value.length > maxValue ? value.slice(0, maxValue + 1) : value).replace(/url\((["']?)data:[^)]*\)/g, 'url("data:")'),
                     backgroundSize: cs.backgroundSize.slice(0, maxValue + 1),
@@ -1142,6 +1279,7 @@ async function readView(page, light = false, withVideos = false) {
                     return;
                 const cs = getComputedStyle(video);
                 const rect = video.getBoundingClientRect();
+                const hiddenInfo = light ? undefined : hiddenReasonOf(video, rect);
                 videos.push({
                     index,
                     currentSrc: shortUrl(playing),
@@ -1166,7 +1304,11 @@ async function readView(page, light = false, withVideos = false) {
                     renderedHeight: rect.height,
                     ...(video.videoWidth > 0 ? { videoWidth: video.videoWidth } : {}),
                     inFirstViewport: rect.bottom > 0 && rect.top < window.innerHeight,
-                    hidden: cs.display === "none" || cs.visibility === "hidden" || rect.width === 0 || rect.height === 0,
+                    // A full read uses the same check as an image (hiddenReasonOf); a light read keeps the display and box check only.
+                    hidden: hiddenInfo !== undefined || (light && (cs.display === "none" || cs.visibility === "hidden" || rect.width === 0 || rect.height === 0)),
+                    ...(hiddenInfo !== undefined
+                        ? { hiddenReason: hiddenInfo.reason, ...(hiddenInfo.inPanel ? { inPanel: true } : {}), ...(hiddenInfo.hover ? { hover: true } : {}) }
+                        : {}),
                     locator: {
                         testid: video.closest("[data-testid]")?.getAttribute("data-testid") ?? undefined,
                         selector: cssPath(video),
@@ -1175,8 +1317,149 @@ async function readView(page, light = false, withVideos = false) {
                 });
             });
         }
-        return { nextjs, images, backgrounds, videos };
-    }, { depth: LAYOUT_DEPTH, maxOwners: MAX_OWNERS, maxBackgrounds: MAX_BACKGROUND_ELEMENTS, maxValue: MAX_BACKGROUND_VALUE, light, withVideos });
+        // Stability: a copy is hidden only when it reads hidden on every read: the snapshot, a read REVEAL_STABLE_MS later with no
+        // scroll, and a read after a scroll to it (the same reason each time). A copy that reads shown at any read is shown: a
+        // carousel slide that auto-advances, a crossfade, or a fade-in a scroll brings in. The candidates are every hidden copy
+        // (images, then videos, in document order); past revealCap per viewport a candidate keeps its snapshot reason and is
+        // flagged unstable: "unknown". The scroll pass is one pass over the candidates: each is brought to the centre of the
+        // window (the window only, so an overflow box such as a carousel track is not scrolled), read after two frames, and
+        // the window is put back at the end. A light read does none of this.
+        let revealCapped = 0;
+        if (!light) {
+            const candidates = [];
+            // A copy the scan's scroll pass saw visible at some step is shown (see MARK_VISIBLE_SCRIPT in measure.ts).
+            const seenVisible = window.__imgtuneSeen;
+            document.querySelectorAll("img").forEach((img, index) => {
+                const obj = images[index];
+                if (obj === undefined || obj.hidden === undefined)
+                    return;
+                if (seenVisible?.has(img) === true) {
+                    delete obj.hidden;
+                    delete obj.inPanel;
+                    delete obj.hover;
+                    return;
+                }
+                candidates.push({
+                    el: img,
+                    isVideo: false,
+                    snap: { reason: obj.hidden, inPanel: obj.inPanel === true, hover: obj.hover === true },
+                    apply: (info, unstable) => {
+                        delete obj.hidden;
+                        delete obj.inPanel;
+                        delete obj.hover;
+                        if (unstable)
+                            obj.unstable = "unknown";
+                        if (info !== undefined) {
+                            obj.hidden = info.reason;
+                            if (info.inPanel)
+                                obj.inPanel = true;
+                            if (info.hover)
+                                obj.hover = true;
+                        }
+                    },
+                });
+            });
+            document.querySelectorAll("video").forEach((video, index) => {
+                const obj = videos.find((v) => v.index === index);
+                if (obj === undefined || !obj.hidden || obj.hiddenReason === undefined)
+                    return;
+                if (seenVisible?.has(video) === true) {
+                    delete obj.hiddenReason;
+                    delete obj.inPanel;
+                    delete obj.hover;
+                    obj.hidden = false;
+                    return;
+                }
+                candidates.push({
+                    el: video,
+                    isVideo: true,
+                    snap: { reason: obj.hiddenReason, inPanel: obj.inPanel === true, hover: obj.hover === true },
+                    apply: (info, unstable) => {
+                        delete obj.hiddenReason;
+                        delete obj.inPanel;
+                        delete obj.hover;
+                        obj.hidden = info !== undefined;
+                        if (unstable)
+                            obj.unstable = "unknown";
+                        if (info !== undefined) {
+                            obj.hiddenReason = info.reason;
+                            if (info.inPanel)
+                                obj.inPanel = true;
+                            if (info.hover)
+                                obj.hover = true;
+                        }
+                    },
+                });
+            });
+            // Videos first: they are the heavy copies, so the cap never leaves a video unverified while images are checked.
+            candidates.sort((a, b) => Number(b.isVideo) - Number(a.isVideo));
+            // No candidate, or a quick read (a read taken after the page navigated during a full read): no stability pass, so no
+            // sleeps. A hidden copy the pass would have verified is unverified here (unstable: "unknown"), as past revealCap.
+            if (candidates.length === 0 || !reveal) {
+                for (const c of candidates)
+                    c.apply(c.snap, true);
+                return { nextjs, images, backgrounds, videos, revealCapped: 0 };
+            }
+            const checked = candidates.slice(0, revealCap);
+            revealCapped = candidates.length - checked.length;
+            const x0 = window.scrollX;
+            const y0 = window.scrollY;
+            const frames = () => new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(() => resolve())));
+            // Read 2: a second read, revealWait ms after the snapshot, with no scroll. Attribute changes in that window are recorded
+            // too: a toggle whose two reads happen to agree (a period that fits twice in the window) still shows as a change.
+            const touched = [];
+            const watch = new MutationObserver((records) => {
+                for (const record of records)
+                    touched.push(record.target);
+            });
+            watch.observe(document.documentElement, { subtree: true, attributes: true, attributeFilter: ["style", "class", "hidden", "open", "aria-hidden"] });
+            await new Promise((resolve) => setTimeout(resolve, revealWait));
+            watch.disconnect();
+            // A change on the copy, its descendants, or one of its three nearest ancestors (a carousel's track or slide wrapper).
+            const changedNear = (el) => touched.some((node) => {
+                if (node === el || el.contains(node))
+                    return true;
+                let up = el;
+                for (let level = 0; level < 3 && up !== null; level++, up = up.parentElement)
+                    if (up === node)
+                        return true;
+                return false;
+            });
+            const second = checked.map((c) => hiddenReasonOf(c.el, c.el.getBoundingClientRect()));
+            // Read 3: one pass, each candidate read after a scroll to it.
+            // Read 3a: each candidate right after its own scroll (a display that a scroll shows is read at its own position).
+            const third = [];
+            for (const c of checked) {
+                const box = c.el.getBoundingClientRect();
+                window.scrollBy(box.left + box.width / 2 - window.innerWidth / 2, box.top + box.height / 2 - window.innerHeight / 2);
+                await frames();
+                third.push(hiddenReasonOf(c.el, c.el.getBoundingClientRect()));
+            }
+            // Read 3b: once, after the pass, so a CSS fade started by the scroll has finished (one wait for the whole pass).
+            await new Promise((resolve) => setTimeout(resolve, revealSettle));
+            const fourth = checked.map((c) => hiddenReasonOf(c.el, c.el.getBoundingClientRect()));
+            window.scrollTo(x0, y0);
+            checked.forEach((c, i) => {
+                const a = c.snap;
+                const b = second[i];
+                const t = third[i];
+                const f = fourth[i];
+                // Hidden only when every read is hidden with the same reason; any read that shows it, or a change of reason, is
+                // shown (a toggle, a fade, or a box a scroll brings in).
+                const stable = b !== undefined &&
+                    t !== undefined &&
+                    f !== undefined &&
+                    b.reason === a.reason &&
+                    t.reason === a.reason &&
+                    f.reason === a.reason &&
+                    !changedNear(c.el);
+                c.apply(stable ? f : undefined, false);
+            });
+            for (const c of candidates.slice(revealCap))
+                c.apply(c.snap, true);
+        }
+        return { nextjs, images, backgrounds, videos, revealCapped };
+    }, { depth: LAYOUT_DEPTH, maxOwners: MAX_OWNERS, maxBackgrounds: MAX_BACKGROUND_ELEMENTS, maxValue: MAX_BACKGROUND_VALUE, light, withVideos, revealCap: REVEAL_CAP, revealWait: REVEAL_STABLE_MS, revealSettle: REVEAL_SETTLE_MS, reveal: !quick });
     const html = seen.images.length === 0 ? await page.content() : "";
     return { seen, html };
 }
@@ -1263,6 +1546,10 @@ export async function readLcp(page) {
  */
 async function settledView(page, navigations, loadCapMs, light = false, idleTimeoutMs = NETWORK_IDLE_TIMEOUT_MS, afterSettle, readLcpFirst = false, withVideos = false) {
     let last;
+    // Once a read was cut off by a navigation, the later reads are quick ones. A full read holds the page for its stability
+    // pass (about 1.8 s of waits and a scroll), and a page that reloads itself on a timer would cut every full read. The
+    // quick read's hidden copies are unverified, not claimed.
+    let quick = false;
     for (let repeat = 0;; repeat++) {
         const start = navigations();
         let view;
@@ -1280,7 +1567,7 @@ async function settledView(page, navigations, loadCapMs, light = false, idleTime
             });
             if (afterSettle !== undefined)
                 await afterSettle();
-            view = await measure("read view", () => readView(page, light, withVideos));
+            view = await measure("read view", () => readView(page, light, withVideos, quick));
             view.lcp = lcp;
         }
         catch (err) {
@@ -1296,6 +1583,7 @@ async function settledView(page, navigations, loadCapMs, light = false, idleTime
                 return last;
             throw new Error(`the page kept navigating after load (${MAX_POST_LOAD_NAVIGATIONS + 1} attempts)`);
         }
+        quick = true;
         // The new document settles first: its load event, or the cap if it never comes.
         await waitForLoadWithin(page, loadCapMs).catch(() => false);
     }
@@ -1442,8 +1730,6 @@ function responsesOfStep(fetched, answered, seen, dpr) {
         if (img.currentSrc)
             keep(img.currentSrc);
     for (const bg of seen.backgrounds) {
-        if (bg.hidden)
-            continue;
         for (const layer of parseBackgroundImage(bg.backgroundImage)) {
             if (layer.dataUri)
                 continue;
@@ -1463,15 +1749,21 @@ function responsesOfStep(fetched, answered, seen, dpr) {
  *
  * `light` (the locate and sizes-only paths) reads no image bodies and no layout chain, and is always a single fresh load.
  */
-async function readGroup(browser, pageUrl, viewports, guard, loadCapMs, storageState, light, functionsWanted, idleTimeoutMs, withVideos = false) {
+async function readGroup(browser, pageUrl, viewports, guard, loadCapMs, storageState, light, functionsWanted, idleTimeoutMs, withVideos = false, captureResources = false) {
     const first = viewports[0];
     const outcomes = [];
     let fresh = [];
     // Every image response of the document, by URL (the latest one for a URL fetched twice).
     const fetched = new Map();
+    // Every other response of the page load (not media, not in a light read), by URL: the resource analyzers' records. The
+    // records are kept across the viewport steps, since a resized viewport is the same page and its resources stay loaded.
+    const others = new Map();
     // Every media (video) response of the page load, by URL: its bytes from the headers, never from the body.
     const media = new Map();
     const bodyReads = [];
+    // The resource bodies (see resources/): settled on their own short wait, so one stream that never ends costs seconds, not the
+    // image bodies' wait. A body not read in time is fetched again by the resource phase, when an analyzer wants it.
+    const resourceReads = [];
     // The media bodies, awaited on their own: they share one deadline for the whole page load (see mediaDeadline below).
     const mediaReads = [];
     // Per media response: counts the bytes that arrived, for a response still streaming when the media reads settle.
@@ -1489,9 +1781,13 @@ async function readGroup(browser, pageUrl, viewports, guard, loadCapMs, storageS
     // costs BODY_READ_TIMEOUT_MS once per page, not once per viewport.
     let mediaDeadline;
     let blockedRequests = 0;
+    // The names the egress proxy could not resolve during this page load (see startEgressProxy).
+    const unresolvedHosts = new Set();
     let thirdPartyBlocked = 0;
     // Stylesheet URLs the browser could not apply (refused, failed or blocked): one entry per URL.
     const failedSheets = new Set();
+    // Stylesheet URLs the browser applied (answered below 400): with failedSheets, it tells a partly styled page from an unstyled one.
+    const loadedSheets = new Set();
     // Requests the browser has not finished, by request id (a redirect keeps its id).
     const busy = new Set();
     // The image URLs answered during the current step (see responsesOfStep).
@@ -1499,8 +1795,11 @@ async function readGroup(browser, pageUrl, viewports, guard, loadCapMs, storageS
     const decoded = new WeakSet();
     // Every request the browser makes goes through this proxy, so each redirect hop and each tunnel is checked at connect
     // time. Chromium gives the route handler no route for a redirect hop, so the route guard alone would miss them.
-    const egress = await measure("egress proxy start", () => startEgressProxy(guard.policy, () => {
+    const egress = await measure("egress proxy start", () => startEgressProxy(guard.policy, (host) => {
         blockedRequests++;
+        // A name the proxy could not resolve (not a refused address): the page's own scripts for it may not run here.
+        if (host !== undefined)
+            unresolvedHosts.add(host);
     }));
     try {
         const context = await measure("context start", () => browser.newContext({
@@ -1537,6 +1836,14 @@ async function readGroup(browser, pageUrl, viewports, guard, loadCapMs, storageS
                 }
                 catch {
                     blocked = true;
+                    // The guard could not resolve the name (it throws on a failed lookup, not on a refused address): a name a browser
+                    // may still load (see unresolvedHosts).
+                    try {
+                        unresolvedHosts.add(new URL(url).hostname);
+                    }
+                    catch {
+                        // Not a URL the guard looked at.
+                    }
                 }
                 if (blocked) {
                     blockedRequests++;
@@ -1566,14 +1873,22 @@ async function readGroup(browser, pageUrl, viewports, guard, loadCapMs, storageS
                     socket.connectToServer();
                 }
             });
+            // Replay for development (IMGTUNE_REPLAY_HAR, see replay.ts): registered last, so the recorded page answers first.
+            const replayHar = replayHarPath(pageUrl, first.name);
+            if (replayHar !== undefined)
+                await context.routeFromHAR(replayHar, { notFound: "abort" });
             context.on("requestfailed", (request) => {
                 if (request.resourceType() === "stylesheet")
                     failedSheets.add(request.url());
             });
             context.on("response", (response) => {
                 // A stylesheet the server refused is not applied (Chromium still makes an empty sheet for it): counted for the scan's warning.
-                if (response.request().resourceType() === "stylesheet" && response.status() >= 400)
-                    failedSheets.add(response.url());
+                if (response.request().resourceType() === "stylesheet") {
+                    if (response.status() >= 400)
+                        failedSheets.add(response.url());
+                    else
+                        loadedSheets.add(response.url());
+                }
                 const contentType = response.headers()["content-type"];
                 // A media response is sized once it has finished, from the browser's count of its body (sizes): the body is never
                 // read, since a video can be far too big to buffer. Chunked answers have no Content-Length, so the headers are the
@@ -1587,12 +1902,19 @@ async function readGroup(browser, pageUrl, viewports, guard, loadCapMs, storageS
                     const headers = response.headers();
                     const headerBytes = mediaBytesOf(headers) ?? 0;
                     const { start, total } = contentRangeOf(headers);
+                    // A media file is a resource record too, without a body: the resource phase fetches it again when it is wanted
+                    // (Chromium gives no body for a range response, see resources/phase.ts).
+                    const resourceRecord = captureResources ? resourceRecordOf(response, pageUrl, "", contentType) : undefined;
+                    if (resourceRecord !== undefined)
+                        others.set(url, resourceRecord);
                     let counted = false;
                     const count = (bytes) => {
                         if (counted)
                             return;
                         counted = true;
                         addMediaResponse(media, { url, status, contentType, bytes, start, total });
+                        if (resourceRecord !== undefined)
+                            resourceRecord.bytes = bytes;
                     };
                     mediaReads.push((async () => {
                         try {
@@ -1609,6 +1931,12 @@ async function readGroup(browser, pageUrl, viewports, guard, loadCapMs, storageS
                     mediaFallbacks.push(() => count(Math.max(headerBytes, streamedBytesOf(url))));
                     return;
                 }
+                // Every other response is a resource record (see resources/): its body is read only when an analyzer wants it.
+                if (captureResources && !light) {
+                    const record = resourceRecordOf(response, pageUrl, "", contentType);
+                    others.set(response.url(), record);
+                    resourceReads.push(readResourceBody(record, response).catch(() => { }));
+                }
                 const isImage = response.request().resourceType() === "image" || (contentType ?? "").toLowerCase().startsWith("image/");
                 if (!isImage)
                     return;
@@ -1692,6 +2020,8 @@ async function readGroup(browser, pageUrl, viewports, guard, loadCapMs, storageS
                         fresh = viewports.slice(step);
                         break;
                     }
+                    // What the page shows, once it has settled (the resource analyzers read it; a light read takes none).
+                    const pageContext = captureResources && !light ? await measure("page context", () => readPageContext(page)) : undefined;
                     const status = loaded?.response?.status();
                     if (debug !== undefined && functionsWanted !== undefined) {
                         for (const img of seen.images) {
@@ -1704,6 +2034,7 @@ async function readGroup(browser, pageUrl, viewports, guard, loadCapMs, storageS
                         await debug.session.detach().catch(() => undefined);
                     }
                     await measure("body reads", () => settleWithin(bodyReads, BODY_READ_TIMEOUT_MS));
+                    await measure("resource bodies", () => settleWithin(resourceReads, RESOURCE_BODY_SETTLE_MS));
                     mediaDeadline ??= Date.now() + BODY_READ_TIMEOUT_MS;
                     await measure("media reads", () => settleWithin(mediaReads, Math.max(0, mediaDeadline - Date.now())));
                     // A media response still streaming at the settle counts the bytes that arrived; it is not waited for.
@@ -1717,27 +2048,43 @@ async function readGroup(browser, pageUrl, viewports, guard, loadCapMs, storageS
                         decoded.add(record);
                         record.pixels = await measure("decode: pixel size", () => pixelSize(record.buffer));
                     }
+                    // A page with a name the proxy could not resolve may not run its own scripts as a visitor's browser runs them: its
+                    // hidden copies are not verified (unstable: "unknown"), and the page says which names (unresolvedHosts).
+                    if (unresolvedHosts.size > 0) {
+                        for (const image of seen.images)
+                            if (image.hidden !== undefined)
+                                image.unstable = "unknown";
+                        for (const video of seen.videos)
+                            if (video.hidden && video.hiddenReason !== undefined)
+                                video.unstable = "unknown";
+                    }
                     outcomes.push({
                         ok: true,
                         value: {
                             viewport,
                             load: step === 0 ? "fresh" : "resized",
+                            ...(unresolvedHosts.size > 0 ? { unresolvedHosts: [...unresolvedHosts].slice(0, 20) } : {}),
                             status,
                             finalUrl: page.url(),
                             ...(step === 0 && loaded !== undefined ? { loadTimedOut: loaded.loadTimedOut } : {}),
                             ...(lcp !== undefined ? { lcp } : {}),
-                            blocked: isChallenge(status, seen.images.length, html),
+                            blocked: isChallenge(status, seen.images.length, html, loaded?.response?.headers()),
                             blockedRequests: blockedRequests - blockedBefore,
                             thirdPartyBlocked: thirdPartyBlocked - thirdBefore,
                             nextjs: seen.nextjs,
                             images: seen.images,
+                            revealCapped: seen.revealCapped,
                             backgrounds: seen.backgrounds,
                             videos: seen.videos,
                             // A copy: the page load's records keep growing for the viewports after this one.
                             media: new Map(media),
                             stylesheetsFailed: failedSheets.size,
                             stylesheetHosts: hostsOf(failedSheets),
+                            stylesheetsLoaded: loadedSheets.size,
                             responses,
+                            ...(captureResources && !light
+                                ? { resources: [...others.values()].map((record) => ({ ...record, viewport: viewport.name })), ...(pageContext !== undefined ? { pageContext } : {}) }
+                                : {}),
                         },
                     });
                 }
@@ -1762,10 +2109,10 @@ async function readGroup(browser, pageUrl, viewports, guard, loadCapMs, storageS
  * The observations of one load group (see readGroup), one outcome per viewport in the order given. A group of one
  * viewport is a fresh load: the default. `--shared-loads` groups the viewports of a class into one load.
  */
-export async function observeLoads(browser, pageUrl, viewports, guard, loadCapMs = LOAD_EVENT_CAP_MS, storageState, light = false, functionsWanted, idleTimeoutMs = NETWORK_IDLE_TIMEOUT_MS, withVideos = false) {
-    const { outcomes, fresh } = await readGroup(browser, pageUrl, viewports, guard, loadCapMs, storageState, light, functionsWanted, idleTimeoutMs, withVideos);
+export async function observeLoads(browser, pageUrl, viewports, guard, loadCapMs = LOAD_EVENT_CAP_MS, storageState, light = false, functionsWanted, idleTimeoutMs = NETWORK_IDLE_TIMEOUT_MS, withVideos = false, captureResources = false) {
+    const { outcomes, fresh } = await readGroup(browser, pageUrl, viewports, guard, loadCapMs, storageState, light, functionsWanted, idleTimeoutMs, withVideos, captureResources);
     for (const viewport of fresh) {
-        const [outcome] = await observeLoads(browser, pageUrl, [viewport], guard, loadCapMs, storageState, light, functionsWanted, idleTimeoutMs, withVideos);
+        const [outcome] = await observeLoads(browser, pageUrl, [viewport], guard, loadCapMs, storageState, light, functionsWanted, idleTimeoutMs, withVideos, captureResources);
         outcomes.push(outcome);
     }
     return outcomes;
@@ -1946,8 +2293,23 @@ async function measureBackground(ctx, obs, bg, layerIndex, layer, size) {
         size,
     };
     const skip = (reason) => ({ ...instance, skipped: reason });
-    if (bg.hidden)
-        return skip("hidden");
+    if (bg.hidden) {
+        // Not shown on load. Its file is measured only if the browser downloaded it (display:none usually does not download).
+        const loaded = layer.dataUri ? undefined : pickLoaded(layer.candidates, (url) => obs.responses.get(url)?.buffer !== undefined, dpr);
+        if (!loaded)
+            return skip("hidden");
+        const downloaded = obs.responses.get(loaded.url);
+        return {
+            ...instance,
+            url: loaded.url,
+            bytes: downloaded.bytes,
+            pixelWidth: downloaded.pixels?.width ?? 0,
+            format: formatName(downloaded.pixels?.format),
+            hidden: bg.hiddenReason,
+            ...(bg.inPanel === true ? { inPanel: true } : {}),
+            ...(bg.hover === true ? { hover: true } : {}),
+        };
+    }
     if (bg.width < MIN_RENDERED_PX || bg.height < MIN_RENDERED_PX)
         return skip("under 16 px");
     if (layer.dataUri)
@@ -1978,6 +2340,11 @@ async function measureBackground(ctx, obs, bg, layerIndex, layer, size) {
     const animated = animationOfBuffer(response.buffer);
     if (animated !== undefined)
         instance.animated = animated;
+    const flatness = await stillFlatness(response, served, animated !== undefined);
+    if (flatness !== undefined)
+        instance.flatness = flatness;
+    if (flatness?.flat === true)
+        ctx.flatBuffers?.offer(chosen.url, response.buffer, response.bytes);
     if (ctx.estimates !== false && animated === undefined && served.width > PLAIN_RESIZE_RATIO * needed && served.format) {
         const resized = await measure("background resize estimate", () => resizeEstimateOf(ctx, response.buffer, served.format, needed));
         if (resized)
@@ -2010,7 +2377,8 @@ async function baseline(ctx, obs, img) {
         ...loaderOf(img.currentSrc, ctx.pageUrl),
     };
     const skip = (reason) => ({ ...instance, skipped: reason });
-    if (img.renderedWidth < MIN_RENDERED_PX)
+    // A hidden element is measured whatever its box: its file was downloaded, and that is what the page spends (see hidden).
+    if (img.renderedWidth < MIN_RENDERED_PX && img.hidden === undefined)
         return skip("under 16 px");
     if (!img.currentSrc || img.currentSrc.startsWith("data:"))
         return skip("data URI");
@@ -2018,6 +2386,15 @@ async function baseline(ctx, obs, img) {
     if (!response?.buffer)
         return skip("not loaded");
     const served = response.pixels;
+    if (img.hidden !== undefined) {
+        // Loaded but not shown at this viewport: the bytes, and nothing to fix in the file itself (no sizes, no quality, no saving).
+        instance.kind = "hidden";
+        Object.assign(instance, { bytes: response.bytes, pixelWidth: served?.width ?? 0, format: served?.format ? formatName(served.format) : undefined });
+        const hiddenAnimated = animationOfBuffer(response.buffer);
+        if (hiddenAnimated !== undefined)
+            instance.animated = hiddenAnimated;
+        return instance;
+    }
     if (response.contentType?.toLowerCase().includes("svg") || served?.format === "svg")
         return skip("vector");
     if (!served)
@@ -2026,6 +2403,11 @@ async function baseline(ctx, obs, img) {
     const animated = animationOfBuffer(response.buffer);
     if (animated !== undefined)
         instance.animated = animated;
+    const flatness = await stillFlatness(response, served, animated !== undefined);
+    if (flatness !== undefined)
+        instance.flatness = flatness;
+    if (flatness?.flat === true)
+        ctx.flatBuffers?.offer(img.currentSrc, response.buffer, response.bytes);
     const candidates = parseSrcset(img.srcset, ctx.pageUrl);
     if (candidates.length > 0) {
         const largest = Math.max(...candidates.map((c) => c.width));
@@ -2114,14 +2496,14 @@ export const CDN_AUTO_QUALITY_SHARE = 0.1;
 export function applyCdnPolicies(instances, viewportCount) {
     for (const inst of instances) {
         const lossless = inst.format === "jpeg" || inst.format === "png" || (inst.format === "gif" && inst.animated === undefined);
-        if (inst.formatAuto === true && inst.kind !== "skipped" && lossless) {
+        if (inst.formatAuto === true && inst.kind !== "skipped" && inst.kind !== "hidden" && lossless) {
             inst.est = 0;
             inst.estAggressive = 0;
         }
     }
     const groups = new Map();
     for (const inst of instances) {
-        if (inst.qualityParam !== "auto" || inst.kind === "skipped")
+        if (inst.qualityParam !== "auto" || inst.kind === "skipped" || inst.kind === "hidden")
             continue;
         const list = groups.get(inst.group);
         if (list)
@@ -2294,7 +2676,7 @@ export function applyQuality(inst) {
 /** The `robots` value recorded for a page on a loopback or private host: its owner's own server is not checked. */
 export const ROBOTS_SKIPPED_LOCAL = "skipped (local host)";
 /** The options of one page's output, for the completeness check of --resume. */
-export function recordOptionsOf(opts, ffmpeg) {
+export function recordOptionsOf(opts, ffmpeg, vectorizer) {
     const thirdParty = opts.thirdParty ?? DEFAULT_THIRD_PARTY;
     // The media settings are recorded when encodes can run, so a page scanned under other settings (or without ffmpeg) is
     // not reused by --resume. Without encodes they are left out, and the record keeps its shape.
@@ -2309,8 +2691,12 @@ export function recordOptionsOf(opts, ffmpeg) {
             ffmpeg,
         }
         : {};
+    const vector = opts.quality === true && opts.survey !== true
+        ? { svgBudget: opts.svgBudget ?? DEFAULT_SVG_BUDGET, vectorizer: vectorizer === true }
+        : {};
     return {
         ...media,
+        ...vector,
         imgtuneVersion: IMGTUNE_VERSION,
         aggressive: opts.aggressive,
         quality: opts.quality,
@@ -2318,6 +2704,7 @@ export function recordOptionsOf(opts, ffmpeg) {
         ignoreRobots: opts.ignoreRobots === true,
         storageState: opts.storageState !== undefined,
         scorer: opts.gpu !== undefined ? "gpu" : "cpu",
+        resources: opts.resources !== false,
         ...(opts.harness === true ? { harness: true } : {}),
         ...(opts.survey === true ? { survey: true } : {}),
         ...(opts.sharedLoads === true ? { loads: "shared" } : {}),
@@ -2388,10 +2775,11 @@ function toReport(inst) {
  * Groups by saving: the group's exact + est. bytes per page view, summed over the page's viewports and divided by their
  * count (as pageNumbers does), with two sample URLs and a sizes hint.
  */
-export function groupReports(instances, viewportCount) {
+export function groupReports(instances, viewportCount, framework = false) {
     const byKey = new Map();
     for (const inst of instances) {
-        if (inst.kind === "skipped")
+        // A hidden file is not a group member: its saving is none, and its size is not a size the page shows.
+        if (inst.kind === "skipped" || inst.kind === "hidden")
             continue;
         const list = byKey.get(inst.group);
         if (list)
@@ -2402,11 +2790,15 @@ export function groupReports(instances, viewportCount) {
     const reports = [];
     for (const [key, members] of byKey) {
         const sizes = members[0].img.sizes;
+        // Plain images with no srcset: a sizes proposal does nothing there, so the group is told the variant widths instead.
+        const plainGroup = members.every((m) => isPlainNoSrcset(m.kind, m.img.srcset, m.loader, framework));
+        const naturals = members.map((m) => m.pixelWidth).filter((w) => w > 0);
+        const srcsetWidths = plainGroup ? srcsetWidthsOf(members.map((m) => m.needed), naturals.length > 0 ? Math.min(...naturals) : undefined) : [];
         const points = members
             .filter((m) => m.renderedWidth >= 1)
             .map((m) => ({ viewportWidth: m.viewport.width, renderedWidth: m.renderedWidth, mobile: m.viewport.mobile }));
         // A proposal that leaves any measured viewport undersized is not a saving: it is dropped, with its exact bytes.
-        const proposed = deriveSizes(points);
+        const proposed = plainGroup ? undefined : deriveSizes(points);
         const undersized = proposed === undefined
             ? undefined
             : undersizedProposal(proposed, members.map((m) => ({ viewport: m.viewport.name, viewportWidth: m.viewport.width, dpr: m.viewport.dpr, renderedWidth: m.renderedWidth, srcset: m.img.srcset })), (srcset) => parseSrcset(srcset, "http://imgtune.invalid/"));
@@ -2437,6 +2829,7 @@ export function groupReports(instances, viewportCount) {
             members: new Set(members.map((m) => m.element)).size,
             samples,
             hint: suggestedSizes && suggestedSizes !== sizes ? `set sizes="${suggestedSizes}"` : undefined,
+            ...(srcsetWidths.length > 0 ? { srcset: { widths: srcsetWidths } } : {}),
         });
     }
     return reports.sort((a, b) => b.savedBytes - a.savedBytes).slice(0, TOP_GROUPS);
@@ -2446,7 +2839,7 @@ function referenceViewportName(viewports) {
     return viewports.find((v) => v.name === "iphone-15")?.name ?? viewports.find((v) => v.mobile)?.name ?? viewports[0].name;
 }
 /** Turns the observations of one page into the report. Fetches and local encodes happen here. */
-export async function analysePage(ctx, input, base) {
+export async function analysePage(ctx, input, base, resourcesJob = () => resourcesOf(ctx, input)) {
     // A fetched video poster is measured as an image, sized to its video's box (see video-analysis.ts).
     const observations = withPosterImages(input);
     const refName = referenceViewportName(observations.map((o) => o.viewport));
@@ -2514,6 +2907,19 @@ export async function analysePage(ctx, input, base) {
             }
         }
     }
+    // A hidden layer whose file a shown element also loads adds no bytes of its own: it is not a hidden copy (skipped).
+    const shownUrls = new Set([
+        ...instances.filter((i) => i.kind !== "hidden" && i.url !== "").map((i) => i.url),
+        ...bgInstances.filter((i) => i.hidden === undefined && i.url !== "").map((i) => i.url),
+    ]);
+    for (const inst of bgInstances) {
+        if (inst.hidden !== undefined && shownUrls.has(inst.url)) {
+            inst.hidden = undefined;
+            inst.inPanel = undefined;
+            inst.hover = undefined;
+            inst.skipped = "hidden: file shared with a shown image";
+        }
+    }
     const bgSources = await resolveBackgroundSources(ctx, observations);
     const perViewport = {};
     const totals = [];
@@ -2548,7 +2954,7 @@ export async function analysePage(ctx, input, base) {
         const mine = instances.filter((i) => i.element === e);
         if (mine.every((i) => i.kind === "skipped" && i.skipped !== "duplicate"))
             skippedElements.add(e);
-        if (mine.some((i) => i.kind !== "skipped" && i.qualityRatio === undefined))
+        if (mine.some((i) => i.kind !== "skipped" && i.kind !== "hidden" && i.qualityRatio === undefined))
             naElements.add(e);
     }
     const numbers = measure("aggregate", () => pageNumbers(totals));
@@ -2561,6 +2967,7 @@ export async function analysePage(ctx, input, base) {
         refName,
         resolved: sources,
         currentQuality,
+        nextjs: observations.some((o) => o.nextjs),
     });
     // A proposed sizes is a saving only when its predicted outcome saves more bytes than it adds (sizes-outcome.ts).
     const widths = new Map(observations.map((o) => [o.viewport.name, o.viewport.width]));
@@ -2573,15 +2980,24 @@ export async function analysePage(ctx, input, base) {
         refName,
         sources: bgSources,
     });
+    // The page's loaded-but-not-shown numbers are counted over the same records the report lists (images and background layers).
+    const hiddenTotals = hiddenTotalsOf([...images, ...backgroundRecords], observations.length);
     const videoSources = await resolveVideoSources(ctx, input);
     const videos = videoRecordsOf(ctx.pageUrl, input, fullBytesOf(input), "scan", ctx.maxVideoWidths ?? SCAN_MAX_VIDEO_WIDTHS, videoSources);
+    // The resource phase runs when the page was captured with resources (see readGroup); its findings are the page's.
+    const resourcesFound = await resourcesJob();
+    // An image never shown on load is reported once, as loaded-but-not-shown (its bytes are that fix's): an svg or text file
+    // behind it gets no resource finding too, so the same bytes are not claimed twice. A favicon is not an image on the page.
+    const neverShown = new Set([...images, ...backgroundRecords].flatMap((r) => (r.hidden !== undefined && r.hidden.shownIn.length === 0 ? [r.current.src] : [])).filter((src) => src !== undefined && src !== ""));
+    const resources = resourcesFound?.filter((finding) => finding.kind === "favicon" || !neverShown.has(finding.url));
     return {
         ...base,
         nextjs: observations.some((o) => o.nextjs),
         ...(videos.length > 0 ? { videos } : {}),
+        ...(resources !== undefined ? { resources } : {}),
         perViewport,
         page: ctx.aggressive ? { ...withoutAggressive, aggressiveExactEstPct } : withoutAggressive,
-        groups: measure("aggregate", () => groupReports(instances, observations.length)),
+        groups: measure("aggregate", () => groupReports(instances, observations.length, observations.some((o) => o.nextjs))),
         counts: {
             images: elements.size,
             qualityNA: naElements.size,
@@ -2592,6 +3008,8 @@ export async function analysePage(ctx, input, base) {
         thirdPartyBlocked: observations.reduce((sum, o) => sum + (o.thirdPartyBlocked ?? 0), 0),
         images: [...images, ...backgroundRecords],
         notLoaded: images.filter((r) => r.lazy === true && !r.perViewport.some((p) => p.loaded)).length,
+        ...(hiddenTotals !== undefined ? { hidden: hiddenTotals } : {}),
+        ...(revealCappedOf(input) > 0 ? { revealCapped: revealCappedOf(input) } : {}),
         ...(bgInstances.length > 0 ? { backgrounds: backgroundPage(bgInstances, observations.length, backgroundRecords) } : {}),
         ...(ctx.harness === true ? { harness: true } : {}),
     };
@@ -2681,7 +3099,7 @@ async function scanPage(browser, run, pageUrl, robotsFor) {
     const groupOutcomes = await settleLimit(groups, run.viewportConcurrency, (group) => {
         count("page loads");
         count("viewport loads", group.length);
-        return observeLoads(browser, pageUrl, group, guard, run.loadCapMs, run.storageState, false, undefined, run.idleTimeoutMs);
+        return observeLoads(browser, pageUrl, group, guard, run.loadCapMs, run.storageState, false, undefined, run.idleTimeoutMs, false, run.resources);
     });
     const outcomes = run.viewports.map((viewport) => {
         const index = groups.findIndex((group) => group.includes(viewport));
@@ -2693,6 +3111,7 @@ async function scanPage(browser, run, pageUrl, robotsFor) {
     let loadTimedOut = false;
     const sheetsFailed = {};
     const failedHosts = new Set();
+    let loadedSheets = 0;
     const documentStatus = {};
     try {
         for (const [index, outcome] of outcomes.entries()) {
@@ -2709,6 +3128,7 @@ async function scanPage(browser, run, pageUrl, robotsFor) {
                 sheetsFailed[viewport.name] = obs.stylesheetsFailed;
             for (const host of obs.stylesheetHosts ?? [])
                 failedHosts.add(host);
+            loadedSheets = Math.max(loadedSheets, obs.stylesheetsLoaded ?? 0);
             if (obs.status !== undefined && obs.status >= 400)
                 documentStatus[viewport.name] = obs.status;
             if (obs.finalUrl !== undefined && new URL(obs.finalUrl).href !== url.href) {
@@ -2735,6 +3155,7 @@ async function scanPage(browser, run, pageUrl, robotsFor) {
         described.documentStatus = documentStatus;
     if (Object.keys(sheetsFailed).length > 0) {
         described.stylesheetsFailed = sheetsFailed;
+        described.stylesheetsLoaded = loadedSheets;
         run.log(`warning: ${safeText(pageUrl)}: a linked stylesheet did not load at ${Object.keys(sheetsFailed).map((name) => safeText(name)).join(", ")}; the page is not styled as the app is, so its widths and sizes verdicts are not valid (check the asset prefix the server was started with)`);
     }
     if (robotsIgnored)
@@ -2743,10 +3164,37 @@ async function scanPage(browser, run, pageUrl, robotsFor) {
         described.robotsRule = robotsRule;
     if (finalUrl !== undefined)
         described.redirectNote = `the page ends on ${finalUrl}; measured there`;
-    if (run.stage === undefined)
-        return { analyse: (store) => analysePage({ ...analysisContextOf(run, pageUrl), store }, observations, described) };
+    if (run.stage === undefined) {
+        const ctx = analysisContextOf(run, pageUrl);
+        const resources = pageResourceJob(ctx, async () => observations);
+        return {
+            resources,
+            analyse: (store, withResources = true) => analysePage({ ...ctx, store }, observations, described, withResources ? resources : NO_RESOURCES),
+        };
+    }
     return stagedMeasure(run, run.stage, pageUrl, described, observations);
 }
+/**
+ * The resource findings of a page's observations (see resources/), or undefined when the page was captured without resources.
+ * Never throws: a failed analysis gives undefined, so it does not fail the page.
+ */
+async function resourcesOf(ctx, observations) {
+    if (!observations.some((o) => o.resources !== undefined))
+        return undefined;
+    try {
+        return await measure("resources", () => analyzeResources(observations.map((o) => ({ viewport: o.viewport, resources: o.resources, pageContext: o.pageContext })), ctx.pageUrl, { cache: ctx.deps.cache, fetcher: ctx.fetcher, allowPrivate: ctx.allowPrivate, thirdParty: ctx.thirdParty, run: ctx.deps.resourceRun }));
+    }
+    catch {
+        return undefined;
+    }
+}
+/** A page's resource analysis, started at most once: the phase-1 pool starts it, and the estimate pass reads the same job. */
+export function pageResourceJob(ctx, observations) {
+    let job;
+    return () => (job ??= observations().then((obs) => resourcesOf(ctx, obs)).catch(() => undefined));
+}
+/** No resource analysis: the provisional pass of a page (its resources are replaced by the estimate pass's). */
+const NO_RESOURCES = () => Promise.resolve(undefined);
 function analysisContextOf(run, pageUrl) {
     return {
         pageUrl,
@@ -2762,6 +3210,8 @@ function analysisContextOf(run, pageUrl) {
         sourceMaps: run.sourceMaps,
         projectDir: run.projectDir,
         projectRoot: run.projectRoot,
+        thirdParty: run.thirdParty,
+        flatBuffers: run.flatBuffers,
     };
 }
 /**
@@ -2772,19 +3222,33 @@ function stagedMeasure(run, stage, pageUrl, described, live) {
     const file = join(stage.dir, pageFileName(new URL(pageUrl)));
     let pending = live;
     const ctx = analysisContextOf(run, pageUrl);
+    // The observations the resource job reads: the live ones while the page is in memory (phase 1 starts the job before the stage
+    // drops them), else the staged file's.
+    const resources = pageResourceJob(ctx, async () => pending ?? (await unstagedObservations(stage.dir, file)));
     return {
+        resources,
         stage: async () => {
             if (pending === undefined)
                 return;
             const staged = [];
             for (const obs of pending) {
-                const { responses, media, ...rest } = obs;
+                const { responses, media, resources, ...rest } = obs;
                 const records = [];
                 for (const [url, record] of responses) {
                     const { buffer, ...meta } = record;
                     records.push({ url, record: meta, blob: buffer === undefined ? undefined : await putBlob(stage.dir, buffer) });
                 }
-                staged.push({ ...rest, responses: records, ...(media !== undefined ? { media: [...media] } : {}) });
+                const stagedResources = [];
+                for (const resource of resources ?? []) {
+                    const { body, ...meta } = resource;
+                    stagedResources.push({ record: meta, blob: body === undefined ? undefined : await putBlob(stage.dir, body) });
+                }
+                staged.push({
+                    ...rest,
+                    responses: records,
+                    ...(media !== undefined ? { media: [...media] } : {}),
+                    ...(resources !== undefined ? { resources: stagedResources } : {}),
+                });
             }
             const state = { version: 1, url: pageUrl, options: stage.options, described, observations: staged };
             await writeStagedJson(stage.dir, file, state);
@@ -2795,9 +3259,9 @@ function stagedMeasure(run, stage, pageUrl, described, live) {
             if (state !== undefined)
                 await writeStagedJson(stage.dir, file, { ...state, images });
         },
-        analyse: async (store) => {
+        analyse: async (store, withResources = true) => {
             const observations = pending ?? (await unstagedObservations(stage.dir, file));
-            return analysePage({ ...ctx, store }, observations, described);
+            return analysePage({ ...ctx, store }, observations, described, withResources ? resources : NO_RESOURCES);
         },
         finish: async () => {
             await rm(file, { force: true });
@@ -2811,12 +3275,21 @@ async function unstagedObservations(stageDir, file) {
         throw new Error(`staged page is missing or unreadable: ${safeText(file)}`);
     const observations = [];
     for (const staged of state.observations) {
-        const { responses: records, media, ...rest } = staged;
+        const { responses: records, media, resources, ...rest } = staged;
         const responses = new Map();
         for (const { url, record, blob } of records) {
             responses.set(url, blob === undefined ? { ...record } : { ...record, buffer: await getBlob(stageDir, blob) });
         }
-        observations.push({ ...rest, responses, ...(media !== undefined ? { media: new Map(media) } : {}) });
+        const resourceRecords = [];
+        for (const { record, blob } of resources ?? []) {
+            resourceRecords.push(blob === undefined ? { ...record } : { ...record, body: await getBlob(stageDir, blob) });
+        }
+        observations.push({
+            ...rest,
+            responses,
+            ...(media !== undefined ? { media: new Map(media) } : {}),
+            ...(resources !== undefined ? { resources: resourceRecords } : {}),
+        });
     }
     return observations;
 }
@@ -2832,10 +3305,11 @@ async function resumeStaged(run, url) {
     if (state === undefined || state.url !== url || state.images === undefined || !sameRecordOptions(state.options, stage.options))
         return undefined;
     for (const obs of state.observations) {
-        for (const response of obs.responses) {
-            if (response.blob === undefined)
+        const blobs = [...obs.responses, ...(obs.resources ?? [])].map((entry) => entry.blob);
+        for (const blob of blobs) {
+            if (blob === undefined)
                 continue;
-            if (!(await stat(join(stage.dir, "blobs", response.blob)).then(() => true, () => false)))
+            if (!(await stat(join(stage.dir, "blobs", blob)).then(() => true, () => false)))
                 return undefined;
         }
     }
@@ -2870,6 +3344,7 @@ async function withBrowser(opts, gpu, body) {
         const deps = {
             score: makeScorer("ssimulacra2", { projectDir: opts.cwd, gpu }),
             cache,
+            resourceRun: newResourceRun((opts.resourceTime ?? DEFAULT_RESOURCE_TIME_S) * 1000),
             scorerId: gpu !== undefined ? `gpu:${gpu.deviceName}` : "cpu",
             cpuScored: gpu !== undefined ? () => gpu.cpuScores : undefined,
         };
@@ -2885,6 +3360,8 @@ async function withBrowser(opts, gpu, body) {
             ignoreRobots: opts.ignoreRobots === true,
             harness: opts.harness === true,
             sourceMaps: new Map(),
+            // The browser's own bytes of the flat images the vector check may trace (see FlatBuffers); none without the check.
+            flatBuffers: new FlatBuffers(opts.quality && opts.survey !== true ? (opts.svgBudget ?? DEFAULT_SVG_BUDGET) : 0),
             storageState: opts.storageState,
             thirdParty: opts.thirdParty ?? DEFAULT_THIRD_PARTY,
             qualityFor: opts.qualityFor,
@@ -2894,6 +3371,7 @@ async function withBrowser(opts, gpu, body) {
             viewportConcurrency: opts.viewportConcurrency ?? VIEWPORT_CONCURRENCY,
             idleTimeoutMs: opts.idleTimeoutMs ?? NETWORK_IDLE_TIMEOUT_MS,
             sharedLoads: opts.sharedLoads === true,
+            resources: opts.resources !== false,
             estimates: opts.survey !== true,
             log: opts.log,
             gpu,
@@ -2980,7 +3458,9 @@ async function mediaPhaseFor(assets, run, opts, urls) {
         if (opts.quality !== true || opts.survey === true) {
             return { ...skippedMedia(sized, opts.survey === true ? "survey" : "quality off"), lengths };
         }
-        return await runMediaPhase(sized, {
+        // A video no viewport shows is not encoded: its record keeps the probe's bytes, and the reason is printed (see splitNeverShown).
+        const { encode, neverShown } = splitNeverShown(sized);
+        const encoded = await runMediaPhase(sized, {
             budget: opts.mediaBudget ?? DEFAULT_MEDIA_BUDGET,
             timeS: opts.mediaTime ?? DEFAULT_MEDIA_TIME,
             vmafBar: opts.videoBar ?? DEFAULT_VIDEO_BAR,
@@ -2998,7 +3478,8 @@ async function mediaPhaseFor(assets, run, opts, urls) {
             thirdParty: run.thirdParty,
         }, {
             fetch: (url, maxBytes, hop) => run.fetcher.get(url, { maxBytes: maxBytes ?? MAX_IMAGE_BYTES, allowPrivate, allowHop: hop?.allowHop, allowHopKey: hop?.page }),
-        }).then((results) => ({ ...results, lengths }));
+        });
+        return { ...encoded, byKey: new Map([...encoded.byKey, ...skippedMedia(neverShown, NEVER_SHOWN).byKey]), lengths };
     }
     catch (err) {
         const message = (err instanceof Error ? err.message : String(err)).replace(/\s+/g, " ").slice(0, 200);
@@ -3024,13 +3505,16 @@ export async function runScan(urls, opts) {
     return withScanRun(opts, async (browser, run, robotsFor) => {
         await mkdir(opts.outDir, { recursive: true });
         // Whether ffmpeg is installed decides whether the media encodes run, so it is part of the record (see recordOptionsOf).
-        const options = recordOptionsOf(opts, (await probeFfmpeg()).ffmpeg);
+        const vectorizer = (await loadVectorizer()) !== undefined;
+        const options = recordOptionsOf(opts, (await probeFfmpeg()).ffmpeg, vectorizer);
         run.stage = { dir: stageDirOf(opts.outDir), options };
         const results = new Array(urls.length);
         // The finished pages in finishing order: the progress line counts them.
         const finished = [];
         const registry = new EstimateRegistry();
         const collector = registry.collector();
+        // The resource analyses run in this pool while later pages are measured (see resources/pool.ts).
+        const resourcePool = new ResourcePool(RESOURCE_PARALLEL, (error) => opts.log(`resources: a page's analysis failed: ${safeText(String(error))}`));
         const measured = [];
         // The media assets (videos and animated images) of every measured page, from its collecting pass (see media-phase.ts).
         const mediaAssets = [];
@@ -3058,7 +3542,7 @@ export async function runScan(urls, opts) {
             // A page measured by an interrupted run: its estimates only. Its requests are collected as a measured page's are.
             const staged = opts.resume ? await resumeStaged(run, url) : undefined;
             if (staged !== undefined) {
-                const stagedProvisional = await staged.page.analyse(collector);
+                const stagedProvisional = await staged.page.analyse(collector, false);
                 mediaAssets.push(...mediaAssetsOf(stagedProvisional));
                 measured.push({ index, url, page: staged.page });
                 images += staged.images;
@@ -3079,8 +3563,14 @@ export async function runScan(urls, opts) {
             }
             // The collecting pass: the page's estimate requests are recorded; its own numbers are provisional and replaced below.
             // Staged as soon as it is measured: the collecting pass reads it back from the stage, so no bytes are held meanwhile.
+            // The resource analysis starts now, pooled, so it overlaps the next pages' measurement. It reads the observations before the
+            // stage drops them from memory.
+            if (outcome.resources !== undefined) {
+                await resourcePool.admit();
+                void resourcePool.start(outcome.resources);
+            }
             await outcome.stage?.();
-            const provisional = await outcome.analyse(collector);
+            const provisional = await outcome.analyse(collector, false);
             mediaAssets.push(...mediaAssetsOf(provisional));
             await outcome.countImages?.(provisional.counts?.images ?? 0);
             measured.push({ index, url, page: outcome });
@@ -3104,6 +3594,22 @@ export async function runScan(urls, opts) {
                 analysedPages.push({ index, url, page, analysed, fallbacks: tally.fallbacks });
                 opts.log(progressLine([...finished, ...analysedPages.map((p) => p.analysed)], urls.length));
             }
+            // The vector check runs once over the flat images of every page (see vector-phase.ts), before the media phase.
+            const allowPrivate = urls.length > 0 && urls.every((url) => isLocalTarget(url));
+            const vector = await runVectorPhase(analysedPages.map((p) => p.analysed), {
+                budget: opts.svgBudget ?? DEFAULT_SVG_BUDGET,
+                survey: opts.survey === true,
+                quality: opts.quality,
+                outDir: resolve(opts.outDir),
+                cwd: opts.cwd,
+                cache: run.deps.cache,
+                log: opts.log,
+            }, {
+                // The browser's own bytes when they were kept (the same file the page got); else fetched, as before.
+                fetch: async (url) => run.flatBuffers.get(url) ?? run.fetcher.get(url, { maxBytes: MAX_IMAGE_BYTES, allowPrivate }),
+            });
+            for (const entry of analysedPages)
+                entry.analysed = applyVector(entry.analysed, vector);
             // The media phase runs once for every page's assets (see runMediaFor); each page is then written again, complete.
             const media = await runMediaFor(mediaAssets, run, opts, urls);
             for (const { index, url, page, analysed, fallbacks } of analysedPages) {
@@ -3245,7 +3751,20 @@ export function renderPage(result, aggressive, hintsFile) {
     if (bg) {
         lines.push(`  CSS backgrounds (not in the lines above): ${bg.layers} layer(s), ${kb(bg.servedBytes)}/view served, ${kb(bg.estSaved)}/view est. saving, ${bg.undersized} undersized`);
     }
-    const hinted = (result.images ?? []).filter(hasFix).length;
+    // The Loaded but not shown group: the images the browser downloaded that no viewport shows in full, by bytes per view.
+    if (result.hidden !== undefined) {
+        lines.push(`  ${hiddenSummaryLine(result.hidden) ?? ""}`);
+        const hiddenRecords = (result.images ?? []).filter((r) => r.hidden !== undefined);
+        const rows = hiddenRecords.sort((a, b) => (b.hidden?.perViewBytes ?? 0) - (a.hidden?.perViewBytes ?? 0)).slice(0, HIDDEN_ROWS);
+        for (const record of rows) {
+            const hidden = record.hidden;
+            const where = record.locator.file !== undefined ? `${record.locator.file}:${record.locator.line ?? 0}` : record.locator.selector;
+            lines.push(`    ${JSON.stringify(safeText(where))}  hidden at ${hidden.viewports.length} of ${hidden.of}  ${kb(hidden.perViewBytes)}/view  ${hidden.action}`);
+        }
+        if (hiddenRecords.length > rows.length)
+            lines.push(`    (+${hiddenRecords.length - rows.length} more: see imgtune hints)`);
+    }
+    const hinted = (result.images ?? []).filter((r) => hasFix(r) || r.hidden !== undefined).length;
     if (hinted > 0 && hintsFile !== undefined)
         lines.push(`  ${hinted} images with fix hints: run \`imgtune hints ${safeText(hintsFile)}\``);
     if (result.groups.length > 0) {
@@ -3256,7 +3775,8 @@ export function renderPage(result, aggressive, hintsFile) {
             const loader = g.loader ? `  loader: ${safeText(g.loader)}` : "";
             const sizes = g.sizes === undefined ? "no sizes" : safeText(g.sizes);
             const suggested = g.suggestedSizes === undefined ? "-" : safeText(g.suggestedSizes);
-            lines.push(`    ${sizes} -> ${suggested}  saves ${kb(g.savedBytes)}/view${loader}${hint}${qualityHint}`);
+            const head = g.srcset !== undefined ? srcsetGroupText(g.srcset.widths) : `${sizes} -> ${suggested}`;
+            lines.push(`    ${head}  saves ${kb(g.savedBytes)}/view${loader}${hint}${qualityHint}`);
         }
     }
     // The Video section: the page's <video> files, per view and per play, with each one's encode or the reason it has none.
@@ -3267,8 +3787,16 @@ export function renderPage(result, aggressive, hintsFile) {
         for (const video of videos)
             lines.push(`    ${videoRowOf(video, (text) => JSON.stringify(safeText(text)))}`);
     }
+    // The Resources section: the page's non-image findings, ranked by saving (see resources/).
+    lines.push(...resourceLinesOf(result.resources ?? [], (text) => safeText(text)));
     return lines;
 }
+/** The most loaded-but-not-shown images the page's text output lists (the rest are in the hints). */
+const HIDDEN_ROWS = 10;
+/** The top-groups line of a plain image group with no srcset: what to serve, in place of a sizes change. */
+export function srcsetGroupText(widths) {
+    return `no srcset -> serve ${srcsetWidthLabel(widths)} + srcset/sizes`;
+}
 /** Per-site line for hosts with two or more scanned pages. */
 export function renderScan(results, aggressive, hintsFile, maxQualities) {
     const lines = [];
@@ -3282,6 +3810,9 @@ export function renderScan(results, aggressive, hintsFile, maxQualities) {
     const media = results.find((r) => r.mediaNote !== undefined)?.mediaNote;
     if (media !== undefined)
         lines.push(safeText(media), "");
+    const vectorNote = results.find((r) => r.vectorNote !== undefined)?.vectorNote;
+    if (vectorNote !== undefined)
+        lines.push(safeText(vectorNote), "");
     for (const result of results)
         lines.push(...renderPage(result, aggressive, hintsFile?.(result)), "");
     const byHost = new Map();
@@ -3365,6 +3896,9 @@ function markdownBody(results, aggressive, withHints, maxQualities) {
     const media = results.find((r) => r.mediaNote !== undefined)?.mediaNote;
     if (media !== undefined)
         lines.push(mdText(media), "");
+    const vectorNote = results.find((r) => r.vectorNote !== undefined)?.vectorNote;
+    if (vectorNote !== undefined)
+        lines.push(mdText(vectorNote), "");
     lines.push(mdRow(head, width), mdRow(align, width));
     for (const result of results) {
         const label = pageLabel(result.url);
@@ -3394,8 +3928,8 @@ function markdownBody(results, aggressive, withHints, maxQualities) {
             lines.push(mdRow(["current sizes", "suggested", "saves KB/view", "loader", "hint"], 5));
             lines.push(mdRow(["---", "---", "---:", "---", "---"], 5));
             for (const g of result.groups.slice(0, SUMMARY_GROUPS)) {
-                const current = g.sizes === undefined ? "no sizes" : mdCode(g.sizes);
-                const suggested = g.suggestedSizes === undefined ? "-" : mdCode(g.suggestedSizes);
+                const current = g.srcset !== undefined ? "no srcset" : g.sizes === undefined ? "no sizes" : mdCode(g.sizes);
+                const suggested = g.srcset !== undefined ? mdText(`serve ${srcsetWidthLabel(g.srcset.widths)} + srcset/sizes`) : g.suggestedSizes === undefined ? "-" : mdCode(g.suggestedSizes);
                 const loader = g.loader ? mdCode(g.loader) : "-";
                 const hint = [g.hint, g.qualityHint].filter((h) => h !== undefined).map((h) => mdCode(h)).join("; ");
                 lines.push(mdRow([current, suggested, `${kbNumber(g.savedBytes)}${g.estApprox === true ? APPROX_MARK : ""}`, loader, hint || "-"], 5));
@@ -3408,9 +3942,25 @@ function markdownBody(results, aggressive, withHints, maxQualities) {
                 lines.push(`- ${mdCode(videoRowOf(video, (text) => JSON.stringify(safeText(text))))}`);
         }
     }
+    // Resources (see resources/): the totals, then the largest findings. They are not in the image totals above.
+    const resourceRows = results.filter((r) => r.status === "ok").flatMap((r) => r.resources ?? []);
+    const resourceTotals = resourceTotalsLine(resourceRows);
+    if (resourceTotals !== undefined) {
+        lines.push("", mdText(resourceTotals));
+        const largest = [...resourceRows].sort((a, b) => b.savedBytes - a.savedBytes).slice(0, RESOURCE_MARKDOWN_ROWS);
+        for (const finding of largest) {
+            const saved = finding.savedBytes > 0 ? ` saves ${kbNumber(finding.savedBytes)} KB${finding.estimate ? APPROX_MARK : ""}` : "";
+            lines.push(`- ${mdCode(`${finding.kind}: ${safeText(finding.title)}`)}${saved}`);
+        }
+    }
     const plan = planQualityCap(results, maxQualities);
     if (plan !== undefined)
         lines.push("", mdCode(qualitiesLine(plan)));
+    const hiddenLine = hiddenPagesLine(results);
+    const hiddenVideoLine = hiddenVideoPagesLine(results);
+    const hiddenRows = [hiddenLine, hiddenVideoLine].flatMap((line) => (line !== undefined ? [mdCode(line)] : []));
+    if (hiddenRows.length > 0)
+        lines.push("", ...hiddenRows);
     if (withHints) {
         const hints = commentHints(results, undefined, maxQualities);
         if (hints.lines.length > 0) {
@@ -3530,6 +4080,8 @@ export async function scanCommand(argv, cwd, log, signal) {
         maxPages: args.maxPages,
         maxImages: args.maxImages,
         mediaBudget: args.mediaBudget,
+        svgBudget: args.svgBudget,
+        resourceTime: args.resourceTime,
         mediaTime: args.mediaTime,
         videoBar: args.videoBar,
         videoStillBar: args.videoStillBar,
@@ -3541,6 +4093,7 @@ export async function scanCommand(argv, cwd, log, signal) {
         gpu: args.gpu,
         gpuEncode: args.gpuEncode,
         cache: args.noCache !== true,
+        resources: args.resources !== false,
         report,
         thirdParty: args.thirdParty,
     });