imgtune 0.1.0 → 0.3.0

package/dist/remote.js

@@ -5,14 +5,18 @@ 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 } 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 } from "./fetch.js";
+import { makeFetcher, MAX_IMAGE_BYTES } from "./fetch.js";
 import { sameSite } from "./site.js";
 import { confirmMatch, matchLocalQuality } from "./calibrate.js";
 import { DEFAULT_THIRD_PARTY, isThirdPartyBlocked, parseAllowHosts, thirdPartyFromFlags } from "./third-party.js";
@@ -20,17 +24,29 @@ 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";
 import { applySizesOutcome } from "./sizes-outcome.js";
 import { sampleByPattern, urlsFromSource } from "./urls.js";
 import { groupRoutes, parseRouteMap } from "./routes.js";
 import { countDocumentNavigations, gotoParsed, NETWORK_IDLE_TIMEOUT_MS, settlePage, settleWithin, waitForLoadWithin, BODY_READ_TIMEOUT_MS } from "./measure.js";
 import { makeScorer } from "./metric.js";
-import { gpuNote, parseGpuDevice, startGpuScorer } from "./gpu.js";
+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, 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";
@@ -41,6 +57,7 @@ import { count, measure, renderTiming, resetTiming, TIMING_ENABLED } from "./tim
 import { mapLimit, settleLimit } from "./concurrency.js";
 import { getBlob, putBlob, readStagedJson, removeStage, stageDirOf, writeStagedJson } from "./stage.js";
 import { loadGroups } from "./loads.js";
+import { probeFfmpeg } from "./ffmpeg.js";
 export { ipv6Bytes, isBlockedAddress, isLocalTarget, isPrivateAddress, refusedAddress, guardedLookup } from "./address.js";
 export { makeFetcher, MAX_IMAGE_BYTES } from "./fetch.js";
 export { registrableDomain, sameSite } from "./site.js";
@@ -71,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. */
@@ -161,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
@@ -304,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)
@@ -369,6 +398,12 @@ const VALUE_OPTIONS = [
     "--max-qualities",
     "--page-concurrency",
     "--idle-timeout",
+    "--media-budget",
+    "--svg-budget",
+    "--media-time",
+    "--video-bar",
+    "--video-still-bar",
+    "--max-video-widths",
     "--urls-from",
     "--sample-per-pattern",
     "--route-map",
@@ -390,6 +425,22 @@ export function parseRange(name, text, min, max) {
     }
     return value;
 }
+/** The media phase's limits and defaults (see media-phase.ts and the --media-* flags). */
+export const DEFAULT_MEDIA_BUDGET = 20;
+const MAX_MEDIA_BUDGET = 1000;
+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 };
@@ -411,9 +462,13 @@ export function parseScanArgs(argv) {
         else if (arg === "--resume")
             args.resume = true;
         else if (arg === "--gpu")
-            args.gpu ??= { device: 0 };
+            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")
             args.harness = true;
         else if (arg === "--survey")
@@ -447,6 +502,20 @@ export function parseScanArgs(argv) {
                 args.pageConcurrency = parseRange(arg, value, 1, MAX_PAGE_CONCURRENCY);
             else if (arg === "--idle-timeout")
                 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")
+                args.videoBar = parseRange(arg, value, 0, 100);
+            else if (arg === "--video-still-bar")
+                args.videoStillBar = parseRange(arg, value, 0, 100);
+            else if (arg === "--max-video-widths")
+                args.maxVideoWidths = parseRange(arg, value, 1, 3);
             else if (arg === "--urls-from")
                 args.urlsFrom = value;
             else if (arg === "--sample-per-pattern")
@@ -456,7 +525,7 @@ export function parseScanArgs(argv) {
             else if (arg === "--storage-state")
                 args.storageState = value;
             else if (arg === "--gpu-device")
-                args.gpu = { device: parseGpuDevice(value) };
+                args.gpu = gpuSettingOf(value);
             else if (arg === "--allow-host")
                 allowHosts = parseAllowHosts(value);
             else
@@ -476,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.
@@ -510,6 +573,26 @@ export async function pixelSize(buffer) {
         return undefined;
     }
 }
+/** The animation of a response's bytes, read once per buffer (see animated.ts). Undefined for a still image. */
+const animationMemo = new WeakMap();
+export function animationOfBuffer(buffer) {
+    let info = animationMemo.get(buffer);
+    if (info === undefined) {
+        info = animationOf(buffer) ?? null;
+        animationMemo.set(buffer, info);
+    }
+    return info ?? undefined;
+}
+/**
+ * The format the pixel rules judge a file by. A static GIF is a lossless palette file, so it takes the PNG rules (a
+ * local resize, and the AVIF that meets the file's own score). An animated GIF takes none of them: its saving is an
+ * encode to video or animated AVIF (see video-analysis.ts), so it keeps its own name and gets no estimate here. The
+ * bytes must really be a GIF (its signature), so a label alone never routes a file to the PNG rules.
+ */
+export function pixelRuleFormat(format, buffer) {
+    const isGif = buffer.toString("latin1", 0, 4) === "GIF8";
+    return format === "gif" && isGif && animationOfBuffer(buffer) === undefined ? "png" : format;
+}
 /** The file decoded to 8-bit RGBA; resized to `size` when given and different (the scorer needs equal dimensions). */
 export async function decodeRaw(buffer, size) {
     const { data, info } = await openImage(buffer).rotate().ensureAlpha().raw().toBuffer({ resolveWithObject: true });
@@ -613,7 +696,7 @@ export async function matchedQualityOf(buffer, format) {
  */
 export async function resizedEstimate(buffer, format, requestedWidth, quality) {
     const targetWidth = clampWidth(requestedWidth);
-    if (format === "png") {
+    if (pixelRuleFormat(format, buffer) === "png") {
         const out = await openImage(buffer).rotate().resize({ width: targetWidth, withoutEnlargement: true }).png().toBuffer();
         return { bytes: out.length, buffer: out };
     }
@@ -784,7 +867,8 @@ export async function estimateQuality(input, deltas, deps) {
         }
         return { ratio, target };
     }
-    if (input.format === "jpeg" || input.format === "png") {
+    const lossless = pixelRuleFormat(input.format, input.served);
+    if (lossless === "jpeg" || lossless === "png") {
         const servedRaw = await measure("decode: served", () => decodeRaw(input.served, { width: reference.width, height: reference.height }));
         const ownScore = await score(reference, servedRaw);
         for (const delta of deltas) {
@@ -806,9 +890,91 @@ function isNavigationError(err) {
 export const LAYOUT_DEPTH = 15;
 /** React owners read per image, nearest first. */
 export const MAX_OWNERS = 8;
-/** One read of the page as it stands: its images and whether it is a Next.js app. */
-async function readView(page, light = false) {
-    const seen = await page.evaluate(({ depth, maxOwners, maxBackgrounds, maxValue, light }) => {
+/**
+ * Whether a <video> source is out of scope: a blob or media-stream URL (made by the page, not a file), an adaptive stream
+ * (HLS .m3u8 or DASH .mpd, with or without a query string), or no source at all. readView applies the same rule in the
+ * browser, before a video leaves the page, so the rule is written there too.
+ */
+export function isOutOfScopeVideo(src) {
+    return src.trim() === "" || /^(blob|mediastream):/i.test(src) || /\.(m3u8|mpd)(?:[?#]|$)/i.test(src);
+}
+/**
+ * The bytes a media response carries, from its headers: Content-Length, else the span of Content-Range (`bytes a-b/total`
+ * is b - a + 1). Undefined when neither gives a length. The body is never read.
+ */
+export function mediaBytesOf(headers) {
+    const length = headers["content-length"];
+    if (length !== undefined && /^\d+$/.test(length.trim()))
+        return Number(length);
+    const range = /^bytes (\d+)-(\d+)\/(\d+|\*)$/i.exec((headers["content-range"] ?? "").trim());
+    if (range && Number(range[2]) >= Number(range[1]))
+        return Number(range[2]) - Number(range[1]) + 1;
+    return undefined;
+}
+/**
+ * The start and the total of a Content-Range header (`bytes a-b/total`), when it has them. Undefined fields when the
+ * header is absent or does not parse (a 200 has none, so its bytes start at 0).
+ */
+export function contentRangeOf(headers) {
+    const range = /^bytes (\d+)-(\d+)\/(\d+|\*)$/i.exec((headers["content-range"] ?? "").trim());
+    if (!range)
+        return {};
+    const total = range[3] === "*" ? undefined : Number(range[3]);
+    return { start: Number(range[1]), ...(total !== undefined ? { total } : {}) };
+}
+/** Merges [start, end) ranges into the ascending, disjoint list that covers the same bytes. */
+export function mergeRanges(ranges) {
+    const sorted = ranges.filter(([a, b]) => b > a).sort((x, y) => x[0] - y[0] || x[1] - y[1]);
+    const merged = [];
+    for (const [start, end] of sorted) {
+        const last = merged[merged.length - 1];
+        if (last && start <= last[1])
+            last[1] = Math.max(last[1], end);
+        else
+            merged.push([start, end]);
+    }
+    return merged;
+}
+/**
+ * Adds one media response's bytes to the page load's map (see readGroup). The response covers [start, start + bytes) (a
+ * 200 starts at 0), so a re-request of bytes already received adds nothing: the figure is the union of the ranges, capped
+ * at the file's total when one is known. The status and content type are the last ones seen. Every media response counts,
+ * a 200 as well as a 206 (a server that ignores Range sends the whole file, and the bytes the page moved are the union).
+ */
+export function addMediaResponse(media, response) {
+    const prev = media.get(response.url);
+    const start = response.start ?? 0;
+    const ranges = mergeRanges([...(prev?.ranges ?? []), [start, start + response.bytes]]);
+    const total = response.total ?? prev?.total;
+    const union = ranges.reduce((sum, [a, b]) => sum + (b - a), 0);
+    media.set(response.url, {
+        url: response.url,
+        contentType: response.contentType ?? prev?.contentType,
+        bytes: total !== undefined ? Math.min(union, total) : union,
+        status: response.status,
+        ranges,
+        ...(total !== undefined ? { total } : {}),
+    });
+}
+/**
+ * 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;
@@ -953,8 +1119,86 @@ async function readView(page, light = 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,
@@ -966,6 +1210,9 @@ async function readView(page, light = 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,
@@ -990,6 +1237,7 @@ async function readView(page, light = 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({
@@ -1000,15 +1248,218 @@ async function readView(page, light = 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),
                 });
             }
         }
-        return { nextjs, images, backgrounds };
-    }, { depth: LAYOUT_DEPTH, maxOwners: MAX_OWNERS, maxBackgrounds: MAX_BACKGROUND_ELEMENTS, maxValue: MAX_BACKGROUND_VALUE, light });
+        // <video> elements with a file source. Blob, media-stream and adaptive sources, and an empty src, are dropped here
+        // (the rule of isOutOfScopeVideo, written out because this function cannot import it). A data: URI is replaced
+        // before it leaves the browser. A light read takes none unless it asks (a locate joins the dev page's videos: the DOM
+        // read is cheap, and no media is read). Only the top document is read: a video in an iframe is not.
+        const videos = [];
+        if (!light || withVideos) {
+            const OUT_OF_SCOPE = (src) => src.trim() === "" || /^(blob|mediastream):/i.test(src) || /\.(m3u8|mpd)(?:[?#]|$)/i.test(src);
+            const shortUrl = (url) => (url.startsWith("data:") ? "data:" : url);
+            document.querySelectorAll("video").forEach((video, index) => {
+                // A src attribute wins: the browser ignores the <source> children then, so they are not read at all.
+                const hasSrcAttribute = (video.getAttribute("src") ?? "").trim() !== "";
+                const sourceEls = hasSrcAttribute ? [] : Array.from(video.querySelectorAll("source"));
+                // The source the browser plays. When it chose none (every source refused, so currentSrc is ""), the src attribute,
+                // else the first in-scope <source>. Dropped only when none is in scope.
+                const inScope = sourceEls.map((source) => source.src).filter((src) => !OUT_OF_SCOPE(src));
+                const playing = video.currentSrc !== "" ? video.currentSrc : hasSrcAttribute ? video.src : (inScope[0] ?? video.src);
+                if (OUT_OF_SCOPE(playing))
+                    return;
+                const cs = getComputedStyle(video);
+                const rect = video.getBoundingClientRect();
+                const hiddenInfo = light ? undefined : hiddenReasonOf(video, rect);
+                videos.push({
+                    index,
+                    currentSrc: shortUrl(playing),
+                    // The out-of-scope <source> children are left out, as the video itself is when its source is out of scope.
+                    sources: sourceEls
+                        .filter((source) => !OUT_OF_SCOPE(source.src))
+                        .map((source) => ({
+                        src: shortUrl(source.src),
+                        type: source.getAttribute("type") ?? undefined,
+                        media: source.getAttribute("media") ?? undefined,
+                    })),
+                    autoplay: video.autoplay,
+                    muted: video.muted,
+                    loop: video.loop,
+                    playsinline: video.hasAttribute("playsinline"),
+                    controls: video.controls,
+                    preload: video.getAttribute("preload") ?? "",
+                    poster: video.poster ? shortUrl(video.poster) : undefined,
+                    paused: video.paused,
+                    ...(video.error ? { errorCode: video.error.code } : {}),
+                    renderedWidth: rect.width,
+                    renderedHeight: rect.height,
+                    ...(video.videoWidth > 0 ? { videoWidth: video.videoWidth } : {}),
+                    inFirstViewport: rect.bottom > 0 && rect.top < window.innerHeight,
+                    // 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),
+                        owners: ownersOf(fiberOf(video)),
+                    },
+                });
+            });
+        }
+        // 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 };
 }
@@ -1093,8 +1544,12 @@ export async function readLcp(page) {
  * location change after load). At most MAX_POST_LOAD_NAVIGATIONS repeats; past that, the last complete read is used.
  * `readLcpFirst`: the LCP is read before the first scroll, and kept with the read it belongs to (fresh loads only).
  */
-async function settledView(page, navigations, loadCapMs, light = false, idleTimeoutMs = NETWORK_IDLE_TIMEOUT_MS, afterSettle, readLcpFirst = false) {
+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;
@@ -1112,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));
+            view = await measure("read view", () => readView(page, light, withVideos, quick));
             view.lcp = lcp;
         }
         catch (err) {
@@ -1128,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);
     }
@@ -1274,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;
@@ -1295,17 +1749,45 @@ 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) {
+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.
+    const mediaFallbacks = [];
+    // The media requests in flight, by request id: the bytes received so far (CDP dataReceived), for the fallback above.
+    const inFlightMedia = new Map();
+    const streamedBytesOf = (url) => {
+        let bytes = 0;
+        for (const entry of inFlightMedia.values())
+            if (entry.url === url)
+                bytes += entry.bytes;
+        return bytes;
+    };
+    // One deadline for the media reads of the whole page load: the viewport steps share it, so a stream that never ends
+    // 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).
@@ -1313,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({
@@ -1351,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++;
@@ -1380,15 +1873,70 @@ 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
+                // fallback only: when sizes fails or reports 0, or when the response is still streaming at the settle (see below).
+                // A light read reads no media at all: it waits on none of it.
+                if (response.request().resourceType() === "media" || (contentType ?? "").toLowerCase().startsWith("video/")) {
+                    if (light)
+                        return;
+                    const url = response.url();
+                    const status = response.status();
+                    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 {
+                            // An aborted range request also finishes (with an error): its sizes still count what was received.
+                            await response.finished();
+                            const { responseBodySize } = await response.request().sizes();
+                            count(responseBodySize > 0 ? responseBodySize : headerBytes);
+                        }
+                        catch {
+                            count(headerBytes);
+                        }
+                    })());
+                    // Still streaming at the settle: the bytes that have arrived so far (or the header bytes, when those are more).
+                    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;
@@ -1427,13 +1975,28 @@ async function readGroup(browser, pageUrl, viewports, guard, loadCapMs, storageS
                 navigations = await countDocumentNavigations(context, page);
             }
             // The requests in flight, for the network-idle wait after a resize (the browser's own events).
-            const cdp = viewports.length > 1 ? await context.newCDPSession(page) : undefined;
-            if (cdp !== undefined) {
-                cdp.on("Network.requestWillBeSent", (event) => busy.add(event.requestId));
-                cdp.on("Network.loadingFinished", (event) => busy.delete(event.requestId));
-                cdp.on("Network.loadingFailed", (event) => busy.delete(event.requestId));
-                await cdp.send("Network.enable");
-            }
+            // Always opened: the media bytes that arrive before a settle are read from its data events (see inFlightMedia).
+            const cdp = await context.newCDPSession(page);
+            // A media request is not counted as busy: a streaming autoplay video never finishes, and would hold every resize's
+            // network-idle wait to its cap. Its bytes are still counted per response (see the media branch above).
+            cdp.on("Network.requestWillBeSent", (event) => {
+                if (event.type === "Media")
+                    inFlightMedia.set(event.requestId, { url: event.request?.url ?? "", bytes: 0 });
+                else
+                    busy.add(event.requestId);
+            });
+            cdp.on("Network.dataReceived", (event) => {
+                const entry = inFlightMedia.get(event.requestId);
+                if (entry !== undefined)
+                    entry.bytes += event.dataLength ?? 0;
+            });
+            const done = (event) => {
+                busy.delete(event.requestId);
+                inFlightMedia.delete(event.requestId);
+            };
+            cdp.on("Network.loadingFinished", done);
+            cdp.on("Network.loadingFailed", done);
+            await cdp.send("Network.enable");
             const resizeState = { userAgent: first.userAgent };
             let loaded;
             for (const [step, viewport] of viewports.entries()) {
@@ -1449,11 +2012,16 @@ async function readGroup(browser, pageUrl, viewports, guard, loadCapMs, storageS
                         await measure(`resize ${viewport.name}`, () => resizeTo(cdp, page, viewport, resizeState));
                     }
                     // The LCP belongs to the page's own load: a fresh load's viewport reads it (a resized one shares that load's LCP).
-                    const { seen, html, lcp } = await settledView(page, navigations, loadCapMs, light, idleTimeoutMs, step === 0 ? undefined : () => waitNetworkQuiet(() => busy.size, idleTimeoutMs), !light && step === 0);
+                    const { seen, html, lcp } = await settledView(page, navigations, loadCapMs, light, idleTimeoutMs, 
+                    // Every full read waits on the busy set, fresh load included: Playwright's networkidle counts the media requests
+                    // too, so a streaming video would hold a fresh load to the cap. A light fresh load waits for nothing, as before.
+                    step === 0 && light ? undefined : () => waitNetworkQuiet(() => busy.size, idleTimeoutMs), !light && step === 0, withVideos);
                     if (step > 0 && navigations() !== navigatedBefore) {
                         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) {
@@ -1466,6 +2034,12 @@ 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.
+                    for (const fallback of mediaFallbacks)
+                        fallback();
                     const responses = step === 0 ? new Map(fetched) : responsesOfStep(fetched, answered, seen, viewport.dpr);
                     count("image responses", responses.size);
                     for (const record of responses.values()) {
@@ -1474,24 +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 } : {}) }
+                                : {}),
                         },
                     });
                 }
@@ -1516,17 +2109,17 @@ 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) {
-    const { outcomes, fresh } = await readGroup(browser, pageUrl, viewports, guard, loadCapMs, storageState, light, functionsWanted, idleTimeoutMs);
+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);
+        const [outcome] = await observeLoads(browser, pageUrl, [viewport], guard, loadCapMs, storageState, light, functionsWanted, idleTimeoutMs, withVideos, captureResources);
         outcomes.push(outcome);
     }
     return outcomes;
 }
 /** One viewport's observation by a fresh load (the locate and sizes-only paths). */
-async function observeViewport(browser, pageUrl, viewport, guard, loadCapMs = LOAD_EVENT_CAP_MS, storageState, light = false, functionsWanted, idleTimeoutMs = NETWORK_IDLE_TIMEOUT_MS) {
-    const [outcome] = await observeLoads(browser, pageUrl, [viewport], guard, loadCapMs, storageState, light, functionsWanted, idleTimeoutMs);
+async function observeViewport(browser, pageUrl, viewport, guard, loadCapMs = LOAD_EVENT_CAP_MS, storageState, light = false, functionsWanted, idleTimeoutMs = NETWORK_IDLE_TIMEOUT_MS, withVideos = false) {
+    const [outcome] = await observeLoads(browser, pageUrl, [viewport], guard, loadCapMs, storageState, light, functionsWanted, idleTimeoutMs, withVideos);
     if (!outcome.ok)
         throw outcome.error;
     return outcome.value;
@@ -1612,22 +2205,43 @@ async function resolveSources(ctx, observations, wanted) {
         for (const img of obs.images) {
             if (wanted && !wanted(img))
                 continue;
-            const owners = img.locator?.owners ?? [];
-            const chain = owners.length > 0 ? await resolveOwnerChain(owners, (chunk) => loadSourceMap(ctx, chunk)) : [];
-            const dev = chain[0] !== undefined ? { file: chain[0].file, line: chain[0].line } : undefined;
-            // A production build has no owner source: the function locations of the owners stand in (prod-sourcemap).
-            const prod = dev === undefined && img.locator?.functionLocations?.length
-                ? await resolveFunctionLocations(img.locator.functionLocations, (chunk) => loadSourceMap(ctx, chunk))
-                : undefined;
-            const found = dev ?? prod;
-            const via = dev ? "react-dev" : prod ? "prod-sourcemap" : undefined;
-            const component = componentNamesOf(owners);
-            const check = found ? await checkSource(ctx, texts, found.file, found.line, component[0]) : undefined;
-            resolved.set(img, { file: found?.file, line: found?.line, component, check, via, ownerChain: chain.length > 0 ? chain : undefined });
+            resolved.set(img, await resolveLocator(ctx, texts, img.locator));
         }
     }
     return resolved;
 }
+/**
+ * The owner source of each observed <video> (the same rule as an image's, see resolveLocator): its file:line on a dev build,
+ * or the function location on a production build, and the check of that line. Used by the scan's video records and by a
+ * locate, which joins the dev page's videos to the measured ones.
+ */
+async function resolveVideoSources(ctx, observations) {
+    const resolved = new Map();
+    const texts = new Map();
+    for (const obs of observations) {
+        for (const video of obs.videos ?? [])
+            resolved.set(video, await resolveLocator(ctx, texts, video.locator));
+    }
+    return resolved;
+}
+/**
+ * The source of one observed element from its locator: the React owner chain (dev builds, through the source map), else the
+ * owner's function location (production builds), and the check of the file:line against the project file.
+ */
+async function resolveLocator(ctx, texts, locator) {
+    const owners = locator?.owners ?? [];
+    const chain = owners.length > 0 ? await resolveOwnerChain(owners, (chunk) => loadSourceMap(ctx, chunk)) : [];
+    const dev = chain[0] !== undefined ? { file: chain[0].file, line: chain[0].line } : undefined;
+    // A production build has no owner source: the function locations of the owners stand in (prod-sourcemap).
+    const prod = dev === undefined && locator?.functionLocations?.length
+        ? await resolveFunctionLocations(locator.functionLocations, (chunk) => loadSourceMap(ctx, chunk))
+        : undefined;
+    const found = dev ?? prod;
+    const via = dev ? "react-dev" : prod ? "prod-sourcemap" : undefined;
+    const component = componentNamesOf(owners);
+    const check = found ? await checkSource(ctx, texts, found.file, found.line, component[0]) : undefined;
+    return { file: found?.file, line: found?.line, component, check, via, ownerChain: chain.length > 0 ? chain : undefined };
+}
 const formatName = (format) => (format === "jpg" ? "jpeg" : format);
 /**
  * The owner of each CSS background element, by its index (the first viewport that has it). Owners give the component
@@ -1679,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)
@@ -1708,7 +2337,15 @@ async function measureBackground(ctx, obs, bg, layerIndex, layer, size) {
         needed,
         undersized: served.width < UNDERSIZED_RATIO * needed,
     });
-    if (ctx.estimates !== false && served.width > PLAIN_RESIZE_RATIO * needed && served.format) {
+    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)
             Object.assign(instance, approxEst(Math.max(0, response.bytes - resized.bytes), resized.approx));
@@ -1740,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");
@@ -1748,11 +2386,28 @@ 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)
         return skip("not decodable");
     Object.assign(instance, { bytes: response.bytes, pixelWidth: served.width, format: formatName(served.format) });
+    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));
@@ -1790,9 +2445,10 @@ async function baseline(ctx, obs, img) {
         }
         return instance;
     }
-    // No w-descriptor srcset: a wider file than needed is estimated by a local resize at its own format (est.).
+    // No w-descriptor srcset: a wider file than needed is estimated by a local resize at its own format (est.). An animated
+    // file gets no resize estimate: its saving is an encode.
     instance.kind = "plain";
-    if (ctx.estimates !== false && served.width > PLAIN_RESIZE_RATIO * needed && served.format) {
+    if (ctx.estimates !== false && instance.animated === undefined && served.width > PLAIN_RESIZE_RATIO * needed && served.format) {
         const resized = await measure("plain resize estimate", () => resizeEstimateOf(ctx, response.buffer, served.format, needed));
         if (resized)
             Object.assign(instance, approxEst(Math.max(0, response.bytes - resized.bytes), resized.approx));
@@ -1839,14 +2495,15 @@ export const CDN_AUTO_QUALITY_SHARE = 0.1;
  */
 export function applyCdnPolicies(instances, viewportCount) {
     for (const inst of instances) {
-        if (inst.formatAuto === true && inst.kind !== "skipped" && (inst.format === "jpeg" || inst.format === "png")) {
+        const lossless = inst.format === "jpeg" || inst.format === "png" || (inst.format === "gif" && inst.animated === undefined);
+        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)
@@ -1881,7 +2538,8 @@ function median(values) {
 async function estimateQualities(ctx, all, refName) {
     const groups = new Map();
     for (const inst of all) {
-        if (inst.kind !== "srcset" || !inst.right)
+        // An animated file has no quality sweep: its saving is an encode (see video-analysis.ts), not a re-encode of the still.
+        if (inst.kind !== "srcset" || !inst.right || inst.animated !== undefined)
             continue;
         if (ctx.qualityFor && !ctx.qualityFor(inst))
             continue;
@@ -2018,9 +2676,27 @@ 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) {
+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.
+    const encodes = opts.quality === true && opts.survey !== true && ffmpeg !== undefined;
+    const media = encodes
+        ? {
+            mediaBudget: opts.mediaBudget ?? DEFAULT_MEDIA_BUDGET,
+            mediaTime: opts.mediaTime ?? DEFAULT_MEDIA_TIME,
+            videoBar: opts.videoBar ?? DEFAULT_VIDEO_BAR,
+            videoStillBar: opts.videoStillBar ?? DEFAULT_VIDEO_STILL_BAR,
+            maxVideoWidths: opts.maxVideoWidths ?? SCAN_MAX_VIDEO_WIDTHS,
+            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,
@@ -2028,6 +2704,7 @@ export function recordOptionsOf(opts) {
         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" } : {}),
@@ -2098,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)
@@ -2112,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/"));
@@ -2147,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);
@@ -2156,7 +2839,9 @@ 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, observations, 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));
     const instances = [];
     for (const obs of observations) {
@@ -2222,6 +2907,19 @@ export async function analysePage(ctx, observations, 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 = [];
@@ -2256,7 +2954,7 @@ export async function analysePage(ctx, observations, 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));
@@ -2269,6 +2967,7 @@ export async function analysePage(ctx, observations, 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]));
@@ -2281,12 +2980,24 @@ export async function analysePage(ctx, observations, 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,
@@ -2297,6 +3008,8 @@ export async function analysePage(ctx, observations, 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 } : {}),
     };
@@ -2386,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));
@@ -2398,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()) {
@@ -2414,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) {
@@ -2440,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)
@@ -2448,13 +3164,41 @@ 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,
+        maxVideoWidths: run.maxVideoWidths,
         fetcher: run.fetcher,
         allowPrivate: isLocalTarget(pageUrl),
         deps: run.deps,
@@ -2466,6 +3210,8 @@ function analysisContextOf(run, pageUrl) {
         sourceMaps: run.sourceMaps,
         projectDir: run.projectDir,
         projectRoot: run.projectRoot,
+        thirdParty: run.thirdParty,
+        flatBuffers: run.flatBuffers,
     };
 }
 /**
@@ -2476,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, ...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 });
+                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);
@@ -2499,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 });
@@ -2515,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, ...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 });
+        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;
 }
@@ -2536,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;
         }
     }
@@ -2574,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,
         };
@@ -2589,14 +3360,18 @@ 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,
+            maxVideoWidths: opts.maxVideoWidths,
             projectDir: opts.cwd,
             projectRoot: opts.root,
             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,
@@ -2650,6 +3425,70 @@ export function progressLine(done, total) {
     const status = last.status === "ok" ? "" : ` (${last.status})`;
     return `page ${done.length}/${total} done${status} · ${(measured / (1024 * 1024)).toFixed(1)} MB measured · est. ${estimated.toFixed(0)}%`;
 }
+/**
+ * The media phase of a run (see media-phase.ts), run once after every page is measured. Each asset is first checked against
+ * the third-party policy from the page it was found on: a blocked one is never fetched, read or proxied. The rest go to
+ * runMediaPhase (see mediaPhaseFor).
+ */
+async function runMediaFor(assets, run, opts, urls) {
+    const { allowed, blocked } = partitionByPolicy(assets, run.thirdParty);
+    const results = await mediaPhaseFor(allowed, run, opts, urls);
+    return blocked.size > 0 ? { ...results, blocked } : results;
+}
+/**
+ * The media phase for the assets the policy allows. The videos are read through an egress proxy started for the phase,
+ * which allows private destinations only when every scanned URL is local. The length of every video URL is probed first,
+ * whatever the settings (a click-to-play video's per-play bytes need it, and no ffmpeg); the budget ranks the videos by
+ * that length. A survey or a scan with quality off encodes nothing, and each asset says so. Never throws.
+ */
+async function mediaPhaseFor(assets, run, opts, urls) {
+    if (assets.length === 0)
+        return { byKey: new Map() };
+    const allowPrivate = urls.length > 0 && urls.every((url) => isLocalTarget(url));
+    let proxy;
+    // Declared outside the try: a media error after the probe keeps the lengths, so a click-to-play video's per-play bytes stay.
+    let lengths = new Map();
+    try {
+        const videoUrls = assets.filter((asset) => asset.kind === "video").map((asset) => asset.url);
+        if (videoUrls.length > 0) {
+            proxy = await startEgressProxy({ resolver: run.resolver, allowPrivate, connectAddress: run.connectAddress });
+            lengths = await probeLengths(assets.filter((asset) => asset.kind === "video").map((asset) => ({ url: asset.url, page: asset.page })), proxy.url, { thirdParty: run.thirdParty });
+        }
+        const sized = assets.map((asset) => refineAssetLength(asset, lengths.get(asset.url)));
+        if (opts.quality !== true || opts.survey === true) {
+            return { ...skippedMedia(sized, opts.survey === true ? "survey" : "quality off"), lengths };
+        }
+        // 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,
+            stillBar: opts.videoStillBar ?? DEFAULT_VIDEO_STILL_BAR,
+            survey: false,
+            workDir: join(resolve(opts.outDir), ".media-work"),
+            cache: run.deps.cache,
+            log: opts.log,
+            proxy: proxy?.url,
+            score: run.deps.score,
+            scorerId: run.deps.scorerId,
+            // The media is encoded on the CPU unless --gpu-encode asks for the GPUs: the --gpu-device list, else GPU 0.
+            gpus: opts.gpuEncode === true ? (opts.gpu?.devices ?? [0]) : undefined,
+            signal: opts.signal,
+            thirdParty: run.thirdParty,
+        }, {
+            fetch: (url, maxBytes, hop) => run.fetcher.get(url, { maxBytes: maxBytes ?? MAX_IMAGE_BYTES, allowPrivate, allowHop: hop?.allowHop, allowHopKey: hop?.page }),
+        });
+        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);
+        return { ...skippedMedia(assets, `media error: ${message}`), lengths };
+    }
+    finally {
+        await proxy?.close();
+    }
+}
 /**
  * Scans the pages in two phases, with a progress line after each. Phase 1 measures every page (up to `pageConcurrency` in
  * flight at once on the shared browser; pages start in input order) and collects the estimate jobs they need, so no
@@ -2665,14 +3504,20 @@ export function progressLine(done, total) {
 export async function runScan(urls, opts) {
     return withScanRun(opts, async (browser, run, robotsFor) => {
         await mkdir(opts.outDir, { recursive: true });
-        const options = recordOptionsOf(opts);
+        // Whether ffmpeg is installed decides whether the media encodes run, so it is part of the record (see recordOptionsOf).
+        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 = [];
         let started = 0;
         let images = 0;
         let measuredCount = 0;
@@ -2697,7 +3542,8 @@ 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) {
-                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;
                 measuredCount++;
@@ -2717,8 +3563,15 @@ 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 });
             images += provisional.counts?.images ?? 0;
@@ -2731,15 +3584,41 @@ export async function runScan(urls, opts) {
             const counts = registry.counts();
             opts.log(`estimates: ${counts.unique} unique of ${counts.requests}, ${counts.skipped} skipped`);
             await registry.runJobs(QUALITY_PARALLEL);
+            // Each page's image analysis is written as soon as its estimates are in, with no media results and no completeness
+            // marker: a crash or Ctrl-C during the long media phase keeps it (--resume scans it again and readers skip it).
+            const analysedPages = [];
             for (const { index, url, page } of measured) {
                 const tally = { fallbacks: 0 };
                 const analysed = await page.analyse(registry.reader(tally));
-                const result = withBroken({ ...analysed, complete: true, options, scorer: scorerOf(run.gpu, tally.fallbacks) }, opts.expectImages?.(url));
+                await writePage(url, withBroken({ ...analysed, options, scorer: scorerOf(run.gpu, tally.fallbacks) }, opts.expectImages?.(url)));
+                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) {
+                const withMedia = attachMediaResults(analysed, media, { quality: opts.quality, survey: opts.survey === true });
+                const result = withBroken({ ...withMedia, complete: true, options, scorer: scorerOf(run.gpu, fallbacks) }, opts.expectImages?.(url));
                 results[index] = result;
                 finished.push(result);
                 await writePage(url, result);
                 await page.finish?.();
-                opts.log(progressLine(finished, urls.length));
             }
         }
         // Every measured page is complete now: the stage's blobs go with it (an interrupted run never gets here).
@@ -2791,7 +3670,7 @@ export async function observeLight(pageUrl, opts) {
     }, async (browser, run, robotsFor) => {
         const url = new URL(pageUrl);
         const allowPrivate = isLocalTarget(pageUrl);
-        const empty = (status, error) => ({ status, error, observations: [], resolved: new Map() });
+        const empty = (status, error) => ({ status, error, observations: [], resolved: new Map(), resolvedVideos: new Map() });
         const robots = await checkRobots(pageUrl, allowPrivate, () => robotsFor(url.origin, false), run.ignoreRobots);
         if (!robots.allowed)
             return empty("robots", "robots.txt disallows the page");
@@ -2799,7 +3678,7 @@ export async function observeLight(pageUrl, opts) {
             run.log(robotsIgnoredWarning(pageUrl));
         const policy = { resolver: run.resolver, allowPrivate, connectAddress: run.connectAddress };
         const guard = { isBlocked: (u) => run.fetcher.hostIsBlocked(u, allowPrivate), policy, thirdParty: run.thirdParty };
-        const outcomes = await settleLimit(run.viewports, VIEWPORT_CONCURRENCY, (viewport) => observeViewport(browser, pageUrl, viewport, guard, run.loadCapMs, undefined, true, (img) => opts.wanted(img, pageUrl)));
+        const outcomes = await settleLimit(run.viewports, VIEWPORT_CONCURRENCY, (viewport) => observeViewport(browser, pageUrl, viewport, guard, run.loadCapMs, undefined, true, (img) => opts.wanted(img, pageUrl), undefined, opts.videos === true));
         const observations = [];
         for (const [index, outcome] of outcomes.entries()) {
             const viewport = run.viewports[index];
@@ -2826,12 +3705,15 @@ export async function observeLight(pageUrl, opts) {
             projectRoot: run.projectRoot,
         };
         const resolved = new Map();
+        const resolvedVideos = new Map();
         for (const obs of observations) {
             const part = await resolveSources(ctx, [obs], (img) => opts.wanted(img, pageUrl));
             for (const [img, source] of part)
                 resolved.set(img, source);
+            for (const [video, source] of await resolveVideoSources(ctx, [obs]))
+                resolvedVideos.set(video, source);
         }
-        return { status: "ok", observations, resolved };
+        return { status: "ok", observations, resolved, resolvedVideos };
     });
 }
 // ---------------------------------------------------------------------------------------------------------------------
@@ -2869,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) {
@@ -2880,11 +3775,28 @@ 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.
+    const videos = result.videos ?? [];
+    const totals = videoTotalsLine(videos);
+    if (totals !== undefined) {
+        lines.push(`  ${totals}`);
+        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 = [];
@@ -2894,6 +3806,13 @@ export function renderScan(results, aggressive, hintsFile, maxQualities) {
     const note = scorerNote(results);
     if (note !== undefined)
         lines.push(note, "");
+    // The media phase's note (no ffmpeg, a failed encode run) is printed once, at the top, not once per page.
+    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();
@@ -2974,6 +3893,12 @@ function markdownBody(results, aggressive, withHints, maxQualities) {
     const note = scorerNote(results);
     if (note !== undefined)
         lines.push(note, "");
+    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);
@@ -2993,26 +3918,49 @@ function markdownBody(results, aggressive, withHints, maxQualities) {
             continue;
         // The LCP line goes above the page's table: the image that the first paint waits for comes first.
         const lcp = lcpLinesOf(result, mdCode);
-        if (lcp.length === 0 && result.groups.length === 0)
+        const videos = result.videos ?? [];
+        if (lcp.length === 0 && result.groups.length === 0 && videos.length === 0)
             continue;
         lines.push("", `### ${pageLabel(result.url)}`, "");
         for (const line of lcp)
             lines.push(line, "");
-        if (result.groups.length === 0)
-            continue;
-        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 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));
+        if (result.groups.length > 0) {
+            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.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));
+            }
+        }
+        const totals = videoTotalsLine(videos);
+        if (totals !== undefined) {
+            lines.push("", totals, "");
+            for (const video of videos)
+                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) {
@@ -3093,7 +4041,7 @@ export async function rootOf(root, cwd) {
     return absolute;
 }
 /** `imgtune scan`: the arguments after `scan`. The JSON files are written to --out; --markdown and --summary-json too. */
-export async function scanCommand(argv, cwd, log) {
+export async function scanCommand(argv, cwd, log, signal) {
     const args = parseScanArgs(argv);
     const plan = scanPlan(args);
     const viewports = DEFAULT_VIEWPORTS.filter((v) => !plan.viewports || plan.viewports.includes(v.name)).map((v) => ({ ...v }));
@@ -3120,6 +4068,7 @@ export async function scanCommand(argv, cwd, log) {
         outDir: resolve(cwd, args.out),
         cwd,
         root,
+        signal,
         aggressive: args.aggressive,
         quality: plan.quality,
         viewports,
@@ -3130,12 +4079,21 @@ export async function scanCommand(argv, cwd, log) {
         resume: args.resume === true,
         maxPages: args.maxPages,
         maxImages: args.maxImages,
+        mediaBudget: args.mediaBudget,
+        svgBudget: args.svgBudget,
+        resourceTime: args.resourceTime,
+        mediaTime: args.mediaTime,
+        videoBar: args.videoBar,
+        videoStillBar: args.videoStillBar,
+        maxVideoWidths: args.maxVideoWidths,
         pageConcurrency: plan.pageConcurrency,
         idleTimeoutMs: plan.idleTimeoutMs,
         sharedLoads: args.sharedLoads === true,
         storageState,
         gpu: args.gpu,
+        gpuEncode: args.gpuEncode,
         cache: args.noCache !== true,
+        resources: args.resources !== false,
         report,
         thirdParty: args.thirdParty,
     });