imgtune 0.2.0 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,103 @@
 # Changelog
 
+## 0.3.0 (date TBD)
+
+- Page weight, not only images. `scan` now reports what else a page downloads, each with its bytes per view and a fix an
+  agent can apply: images and video that are loaded but never shown, fonts, compression, favicons, vector art, SVG, Lottie
+  files, 3D models and audio. Images and video stay the headline. The positioning is in the README, the site and the skill.
+- Loaded but not shown: images and videos. `scan` reports the images and `<video>` elements the browser downloads but no
+  viewport shows: `display:none`, `visibility:hidden`, `opacity: 0`, a zero-size box, an offscreen slide of a track, a closed
+  `<details>`, `content-visibility: hidden`, a hover swap, a tab panel, and a CSS background layer whose file a hidden element
+  loaded. A copy counts as hidden only if it reads hidden on two reads at least 1 s apart and again after a scroll; anything
+  that toggles (a carousel, a crossfade, a reveal) counts as shown, and a copy seen visible at any step of the scroll pass is
+  shown. Each case gets its own fix: a `<picture>` with a media condition for a responsive twin, `loading="lazy"` or render on
+  activation for a carousel, tab or hover copy, and removal or an on-demand load for an image no viewport shows on load. A
+  hidden copy's bytes are kept apart from the savings, and it gets no sizes, quality or encode claim at the viewports that hide
+  it. An image that already has `loading="lazy"` is no longer advised to get it. The JSON gains `images[].hidden` and
+  `videos[].hidden`. See the Hidden images guide.
+- Video: the claim is per viewport. A `<video>`'s per-view bytes are counted at each viewport (what that viewport loads) and
+  averaged over the viewports, the same as images. A desktop and a mobile copy of one video count once. A video that only some
+  viewports load therefore claims less than it did in 0.2. A video no viewport shows is never encoded (`never-shown`).
+- `<source media>` support is stated as reported in the hints: Chrome and Edge 120 or later, Firefox 120 or later, Safari
+  (version not verified).
+- Fonts. `scan` reports each web font file's bytes per view and its savings: a re-encode to WOFF2 (measured for small files,
+  estimated for large ones), a subset to the Unicode scripts the page's text uses (the subset keeps Basic Latin, Latin-1,
+  punctuation and currency), and faces the browser downloaded but no rendered text uses. Icon fonts are not subset, and a
+  family of several static weights is noted as a candidate for one variable font, with no saving. Each finding names the
+  command and the expected bytes. See the Fonts guide.
+- Compression. Text served with no `Content-Encoding` (JavaScript, CSS, HTML, JSON, XML, SVG, WASM, TTF and OTF, at least 1 KB)
+  is reported with its brotli-11 saving, grouped per host and content type. The fix is the server or CDN setting. See the
+  Compression guide.
+- Favicons. A favicon over 10 KB, or an apple-touch-icon over 30 KB, is reported with the saving of a re-encode to 32 px or
+  180 px. Each icon is fetched once per run. See the Favicons guide.
+- Vector art. A still raster that is flat (a few colours cover most of it: logos, icons, flat illustrations) gets a vector
+  check. `scan` traces the heaviest such images (`--svg-budget`, default 50, 0 to 1000; 0 traces none) with vtracer, through
+  the optional `@neplex/vectorizer` dependency, and renders each SVG back at the served size. The fidelity is SSIMULACRA2 at
+  half size against the served image (bar 70). A passing SVG must be at least 30% smaller than the served file, and its saving
+  is the record's claim when it is the larger one; the raster fix stays as the fallback. The traced file is written to
+  `svg/<id>.svg` in the scan folder. Without the vectorizer, a flat image gets one note and no byte claim. `fix.vector` in the
+  JSON, a `vector` field on hints, and the summary and the check report count the flat and traced images. See the Vector art
+  guide.
+- SVG files. Each SVG of 2 KB to 5 MB is optimised with SVGO (floatPrecision 2) and reported when the brotli size drops by at
+  least 20% and the render still scores 70 or more on SSIMULACRA2 at half size. SVGs with embedded `data:` rasters are listed.
+  Inline `<svg>` is not checked.
+- Lottie animations. `scan` reads each Lottie JSON and `.lottie` file the page loads: the size, layers, frame rate and duration,
+  and the savings: embedded rasters re-encoded to WebP at the display size, numbers rounded to three decimals, and a `.lottie`
+  repack (an estimate). A huge animation shown small gets a hint to export at the display size. See the Lottie guide.
+- 3D models. `scan` checks glTF and GLB files: the geometry saving with meshopt is measured (the file is repacked with
+  gltf-transform), base64 buffers get the GLB repack, and PNG or JPEG textures get a WebP estimate. Draco and meshopt files are
+  reported as compressed. USDZ, OBJ, FBX, KTX2, splats and PLY are informational. See the 3D models guide.
+- Audio. `scan` probes each audio file with ffprobe. WAV and FLAC, lossy files above 128 kbps stereo (64 kbps mono), and stereo
+  files with identical channels get an Opus re-encode, measured on a 10 s sample. A file the page loads on page load gets the
+  `preload="none"` fix. Without ffmpeg only the bytes are reported. See the Audio guide.
+- Resources, as one group. The non-image checks above run on every response the page makes, and their findings are reported in
+  a Resources section (after Video), in the JSON as `resources`, and in a Resources block of the PR comment. They are not in
+  the image totals. A file on another site is labelled "third-party (ask the vendor)" and totalled apart from first-party
+  savings; a small saving of a kind that is weak for its cost (SVG, Lottie, favicons) is a "lead" and sorts after the real
+  savings. The heavy steps (brotli-11 sizes, SVGO and render, WOFF2 and subset encodes, Lottie re-encodes, 3D meshopt, audio
+  sample encodes) are computed once per run for each distinct content, not once per viewport and page. `--resource-time <s>`
+  (default 60) caps the heavy work of a run; a file over the budget keeps its cheap finding, marked as an estimate or not
+  measured. The resources overview is in the guide.
+- A plain `<img>` with no `srcset`, served much wider than it is shown (from a same-origin file or a CDN host no adapter knows),
+  gets resized variants instead of a `sizes` change. `sizes` does nothing without `srcset`. The hint says to serve the variants
+  at concrete widths (1 to 3, from the device pixels each viewport needs) and to add the `srcset` and `sizes`. The summary's top
+  group reads `no srcset -> serve <widths> + srcset/sizes`, and the saving is booked as `resize`, not `quality`. Known loaders and
+  pages with Next.js detected keep their advice. The same resize booking applies to CSS background layers. The JSON gains
+  `bytes.resize` and `srcset`.
+- Measuring browser: `--disable-software-rasterizer` is no longer passed to Chromium (`--disable-gpu` stays). With it WebGL was
+  off, so a page with a 3D viewer never requested its model. Only WebGL pages pay the extra CPU.
+- Flags. `--no-resources` skips the resource checks and their capture (`scan`, `check`, `run` and `audit`). A page scanned that
+  way is recorded with `resources: false`. `--resource-time <s>` (`scan`, `check`, `run`, `audit`; default 60, 0 to 3600) caps
+  the heavy resource work. `--svg-budget <N>` (`scan`, `check`, `run`, `audit`; default 50, 0 to 1000) sets how many flat images
+  are traced.
+- Optional dependencies. `@neplex/vectorizer` (0.1.0) is used for the vector trace. `@gltf-transform/core`,
+  `@gltf-transform/extensions`, `@gltf-transform/functions` and `meshoptimizer` are used for the 3D measurements. Each is loaded
+  when a check needs it. If one is missing, its check gives one note and no measured saving; the rest of the scan runs.
+- Smaller fixes: a hidden copy's hints carry its URL and its bytes per viewport (`revealCapped` marks candidates past the
+  per-viewport limit that were not re-read after a scroll); a `<details>` closed on load is not counted as shown. A failed
+  linked stylesheet makes a page `broken` only when no linked stylesheet applied (otherwise it is a warning); a challenge page
+  (WAF or Cloudflare) is `blocked` whatever its images; a search the time limit cut short is labelled "est., search stopped at
+  the time limit"; a page that reloads itself is read between its reloads.
+
+### Changed for 0.2 users
+
+- The JSON gains `resources` (a page file's findings, present unless the scan ran with `--no-resources`), `images[].hidden` and
+  `videos[].hidden`, `fix.vector` on a still raster that looks like vector art, and `bytes.resize` (with `srcset`) on a plain
+  image with no `srcset`. Existing fields keep their meaning, except as noted below.
+- Video numbers change: the per-view claim is averaged over the viewports (see above), so a video loaded at some viewports only
+  claims less than in 0.2. Compare the `videos[].bytes.perView` of a 0.2 run with a 0.3 run only with that in mind.
+- Plain images with no `srcset`: the saving moves from `quality` (and `sizes`) to `resize`, so the quality total of a page can
+  fall by the same amount. The hint asks for resized variants, not a `sizes` change.
+- Hidden images and videos used to be dropped silently. They are now reported, in their own lines and in the JSON, and kept out
+  of the savings, so a page's totals can differ from 0.2 even when no image changed.
+- The Chromium flags changed: WebGL is on for the scan (see above). A page with a WebGL viewer may now load more bytes than it
+  did in 0.2, and those bytes are reported.
+- The result cache: `CACHE_VERSION` is still 3, but the cache keys include the imgtune version, so 0.2 entries are not reused and
+  the first 0.3 scan is cold.
+- New flags: `--no-resources`, `--resource-time` and `--svg-budget`. See the CLI reference.
+- New optional dependencies: `@neplex/vectorizer`, `@gltf-transform/core`, `@gltf-transform/extensions`, `@gltf-transform/functions`
+  and `meshoptimizer`. They install with the package as optional dependencies; none is required.
+
 ## 0.2.0 (2026-11-14)
 
 - Animated media and video. `scan` measures animated GIFs (in an `<img>` or a CSS background), animated WebP and APNG, and

package/README.md

@@ -2,20 +2,32 @@
 
 [![npm version](https://img.shields.io/npm/v/imgtune.svg)](https://www.npmjs.com/package/imgtune)
 
-**ImgTune measures image waste on any live site.**
+**imgtune measures page weight on any live site: images first, and everything else the page downloads.**
 
 Website: https://indicozy.github.io/imgtune/ · [Try the demo](https://indicozy.github.io/imgtune/demo) · [Docs](https://indicozy.github.io/imgtune/guide/getting-started)
 
-Lighthouse tells you your images are too big. ImgTune tells you the `sizes`, quality and format to set for each image,
-points at the line of code that renders it (when your dev server is running), and checks each quality target with
-SSIMULACRA2. Your coding agent applies the change, and a rescan checks it.
+Lighthouse tells you your page is heavy. imgtune tells you which bytes to cut and how: the `sizes`, quality and format for each image, the codec and width for each video, images and videos that load but are never shown, fonts to subset or drop, files served without compression, and 3D models, audio, Lottie and SVG that could be smaller. Each fix comes with the expected bytes and, for images and video with your dev server running, the line of code to change. Your coding agent applies it, and a rescan checks it.
 
 **Works with your image CDN.** Cloudinary, imgix and `next/image` resize to whatever width `sizes` asks for, so a wrong
 `sizes` is waste that no CDN removes. ImgTune works on top of a CDN, not instead of one. Already on Cloudinary auto
 quality (`q_auto`)? ImgTune focuses on `sizes`, which no CDN can fix for you. A format the CDN picks per request
 (Cloudinary `f_auto`, imgix `auto=format`) is not proposed as a change.
 
-**Built for image-heavy sites:** e-commerce catalogs, media, marketplaces.
+**Built for heavy sites:** e-commerce catalogs, media, marketplaces, and marketing pages with video and 3D.
+
+**What it checks**, one guide each:
+
+- [Images](https://indicozy.github.io/imgtune/guide/how-it-measures)
+- [Video and animated images](https://indicozy.github.io/imgtune/guide/video-and-gifs)
+- [Loaded but not shown](https://indicozy.github.io/imgtune/guide/hidden-images)
+- [Fonts](https://indicozy.github.io/imgtune/guide/fonts)
+- [Compression](https://indicozy.github.io/imgtune/guide/compression)
+- [Vector art (raster to SVG)](https://indicozy.github.io/imgtune/guide/vector-art)
+- [SVG](https://indicozy.github.io/imgtune/guide/svg)
+- [Lottie](https://indicozy.github.io/imgtune/guide/lottie)
+- [3D models](https://indicozy.github.io/imgtune/guide/3d-models)
+- [Audio](https://indicozy.github.io/imgtune/guide/audio)
+- [Favicons](https://indicozy.github.io/imgtune/guide/favicons)
 
 ## Two ways to measure
 
@@ -129,6 +141,14 @@ desktop at 1x), scrolls it to the end, and records every image.
 - Production check: `imgtune check` (see [Two ways to measure](#two-ways-to-measure)) and `imgtune audit` do the same
   survey and deep scan for a whole site, with no source needed for `check`.
 
+## Resources
+
+`scan` also reads the page's other responses (not images) and runs seven checks on them: compression, favicons, fonts,
+SVG, Lottie, 3D models and audio. They are reported on their own, not in the image totals. Guides:
+[compression](https://indicozy.github.io/imgtune/guide/compression), [favicons](https://indicozy.github.io/imgtune/guide/favicons), [fonts](https://indicozy.github.io/imgtune/guide/fonts), [SVG](https://indicozy.github.io/imgtune/guide/svg), [Lottie](https://indicozy.github.io/imgtune/guide/lottie),
+[3D models](https://indicozy.github.io/imgtune/guide/3d-models) and [audio](https://indicozy.github.io/imgtune/guide/audio). The [resources overview](https://indicozy.github.io/imgtune/guide/resources) covers the labels, the budget
+and the flags: `--no-resources` turns all seven off, and `--resource-time` caps the heavy work.
+
 ## The evidence ladder
 
 Every fix hint is labelled with the strength of its evidence, the rung it stands on:
@@ -143,6 +163,35 @@ Every fix hint is labelled with the strength of its evidence, the rung it stands
 A ceiling is never derived from the existing `sizes` value. When a usage is measured, its `sizes` comes from the layout
 the browser resolved, not from a guess.
 
+## Lottie and SVG
+
+`scan` also reads the Lottie animations and the SVG files a page loads. A Lottie report gives the size, layers, frame rate and
+duration, and its savings: embedded rasters re-encoded to WebP at the display size, a `.lottie` repack (an estimate), and
+numbers rounded to three decimals. An SVG is optimised with SVGO and reported when the brotli size drops by 20% or more and
+the render still scores 70 or more on SSIMULACRA2 at half size. Guides: [Lottie](https://indicozy.github.io/imgtune/guide/lottie) and [SVG](https://indicozy.github.io/imgtune/guide/svg).
+
+## 3D models and audio
+
+`scan` also reads the 3D models and audio files a page loads. A glTF or GLB gets a measured meshopt saving (the file is
+repacked with gltf-transform), base64 buffers get the GLB repack, and PNG or JPEG textures get a WebP estimate. An audio
+file that is lossless, above 128 kbps stereo, or stereo with identical channels gets an Opus re-encode, measured on a 10 s
+sample with ffmpeg. Guides: [3D models](https://indicozy.github.io/imgtune/guide/3d-models) and [audio](https://indicozy.github.io/imgtune/guide/audio).
+
+## Vector art
+
+A flat logo, icon or illustration served as PNG, WebP or JPEG can often be an SVG: smaller, and sharp at every density.
+`scan` traces the heaviest flat images (`--svg-budget`, default 50) with an optional dependency, `@neplex/vectorizer`,
+renders each SVG back, and keeps it only when it scores at least 70 at half size and is at least 30% smaller. A passing
+trace is written to `svg/` in the scan folder. Without the dependency, a flat image gets one note and no byte claim. See [the guide](https://indicozy.github.io/imgtune/guide/vector-art).
+
+## Loaded but not shown
+
+`scan` also finds the images the browser downloads without showing: a desktop image hidden on phones (or the reverse), an
+offscreen slide of a carousel, a tab panel, an element with `opacity: 0` or `visibility: hidden`, and a zero-size box. Their
+bytes per view are reported on their own line ("loaded but not shown") and kept out of the savings. Each one gets the fix
+for its case: a `<picture>` with a media condition for a responsive twin, `loading="lazy"` or render-on-activation for a
+carousel, tab or hover copy, and an on-demand load or removal for an image no viewport shows on load. See [the guide](https://indicozy.github.io/imgtune/guide/hidden-images).
+
 ## GIFs and video
 
 `scan` also measures animated media: animated GIFs in an `<img>` or a CSS background, animated WebP and APNG, and
@@ -165,7 +214,8 @@ self-hosted `<video>` elements with a plain file source. Static GIFs get the nor
   the animated-image alternative with its size. A small `<img>` GIF or a CSS background gets an animated AVIF or WebP. A
   `<video>` hint names each lever: the width per breakpoint (`<source media>`), the CRF, the codec, the audio track of a
   muted video, and `preload`. A poster is audited as an image. Duration and frame rate are informational only.
-- **Bytes: per view and per play.** Per view is what the first view fetches. An autoplay video counts its full file,
+- **Bytes: per view and per play.** Per view is counted at each viewport and averaged over the viewports, as for images. An
+  autoplay video counts its full file,
   `preload="auto"` counts the bytes the scan saw (browser-dependent), and `preload="metadata"` or `"none"` counts 0. Per
   play is the full file. Both are shown for every video, so a large click-to-play file is not missed. Animated images stay
   in the image totals; `<video>` has its own Video section, and posters count as images.
@@ -183,6 +233,19 @@ self-hosted `<video>` elements with a plain file source. Static GIFs get the nor
 - **Check an agent's output** with `imgtune image <candidate> --reference <original>`: the same VMAF and still-frame bar,
   exit 0 on pass and 1 on fail (see the table below).
 
+## Fonts
+
+`scan` reports each web font file the page downloads: its bytes per view, and what it could save.
+
+- **WOFF2:** a TTF, OTF or WOFF that is not WOFF2 is re-encoded (measured for small files, estimated for large ones).
+- **Subsetting:** a font with far more glyphs than the page's scripts need (the Unicode blocks its text uses, plus Basic
+  Latin, Latin-1, punctuation and currency) is subset to them. The fix gives the `pyftsubset` command.
+- **Unused faces:** a face the browser downloaded but no rendered text uses is wasted bytes. Icon fonts, and faces the
+  browser rendered with (even as a fallback), are never called unused.
+- **Static weights:** three or more static faces of one family are noted as a candidate for one variable font (no saving).
+
+See [the Fonts guide](https://indicozy.github.io/imgtune/guide/fonts).
+
 ## Commands
 
 | command | what it does |

package/dist/audit.js

@@ -232,6 +232,7 @@ async function preflight(prod, settings, outRoot, cwd, log, storageState) {
         ignoreRobots: settings.ignoreRobots,
         aggressive: false,
         quality: false,
+        resources: false,
         thirdParty: settings.thirdParty,
         outDir: join(outRoot, "preflight"),
         viewports: viewportsOf(plan.viewports),

package/dist/backgrounds.js

@@ -6,7 +6,7 @@
 // Pure parsing and sizing here; the measurement (fetches, decodes, resize estimates) is in remote.ts, and the records are
 // built in buildBackgroundRecords below.
 import { sha1 } from "./atomic.js";
-import { losslessServed, rungOfPage, searchHintsOf } from "./images.js";
+import { hiddenFixCore, losslessServed, rungOfPage, searchHintsOf } from "./images.js";
 import { animatedTarget } from "./media-model.js";
 import { loaderName, sanitizeText, urlPattern } from "./locate.js";
 /** The most background elements read per viewport: a page with more keeps the first of them in document order. */
@@ -264,7 +264,8 @@ export function buildBackgroundRecords(input) {
     }
     const records = [];
     for (const [key, members] of byKey) {
-        const member = members.find((m) => m.viewport.name === refName) ?? members[0];
+        // The reference member is shown when some viewport shows the layer: a hidden copy names no size.
+        const member = members.find((m) => m.viewport.name === refName && m.hidden === undefined) ?? members.find((m) => m.hidden === undefined) ?? members[0];
         const source = sources.get(member.bg.index);
         const url = member.url;
         const perViewport = [];
@@ -287,8 +288,22 @@ export function buildBackgroundRecords(input) {
                 entry.overFetchRatio = Math.round((inst.pixelWidth / inst.needed) * 100) / 100;
             if (inst.skipped !== undefined)
                 entry.skipped = inst.skipped;
+            if (inst.hidden !== undefined)
+                entry.hidden = inst.hidden;
             perViewport.push(entry);
         }
+        // A layer's entries: the viewports it is shown at, and those it is hidden at with its file downloaded (a hidden layer that
+        // was not downloaded is not an entry: there are no bytes to report).
+        const entries = members
+            .filter((m) => m.hidden !== undefined || m.skipped !== "hidden")
+            .map((m) => ({
+            viewport: { name: m.viewport.name, width: m.viewport.width },
+            bytes: m.bytes,
+            hidden: m.hidden,
+            inPanel: m.inPanel === true,
+            hover: m.hover === true,
+        }));
+        const hiddenFix = hiddenFixCore(entries, input.viewports.length);
         const saved = members.reduce((sum, m) => sum + m.est, 0) / viewportCount;
         const served = member.format;
         const animatedMember = members.find((m) => m.animated !== undefined);
@@ -324,14 +339,15 @@ export function buildBackgroundRecords(input) {
             },
             perViewport,
             fix: {
-                width: member.needed > 0 ? member.needed : undefined,
-                bytes: { saved, addedForSharpness: 0, sizes: 0, quality: saved },
+                width: member.hidden === undefined && member.needed > 0 ? member.needed : undefined,
+                // A layer's saving is a resize to its needed width (est.), not a re-encode: booked as resize.
+                bytes: { saved, addedForSharpness: 0, sizes: 0, resize: saved, quality: 0 },
             },
             evidence: { rung: rungOfPage(pageUrl, input.harness), notes },
         };
         if (best !== undefined)
             record.fix.format = best;
-        if (animatedMember?.animated !== undefined) {
+        if (animatedMember?.animated !== undefined && hiddenFix?.shownIn.length !== 0) {
             record.fix.animated = {
                 info: animatedMember.animated,
                 context: "css-background",
@@ -339,12 +355,20 @@ export function buildBackgroundRecords(input) {
                 perViewBytes: members.reduce((sum, m) => sum + m.bytes, 0) / viewportCount,
             };
         }
+        // A hidden layer is not a vector claim: the vector check and the hidden fix never stack on one record.
+        if (hiddenFix !== undefined)
+            record.hidden = hiddenFix;
+        else {
+            const flatMember = members.find((m) => m.flatness?.flat === true);
+            if (flatMember?.flatness !== undefined)
+                record.fix.vector = { flatness: { ...flatMember.flatness } };
+        }
         records.push(record);
     }
     return records.filter((r) => r.perViewport.some((p) => p.loaded || p.skipped !== undefined));
 }
 export function backgroundTotals(instances) {
-    const measured = instances.filter((i) => i.skipped === undefined);
+    const measured = instances.filter((i) => i.skipped === undefined && i.hidden === undefined);
     return {
         measured: measured.length,
         servedBytes: measured.reduce((sum, i) => sum + i.bytes, 0),
@@ -353,7 +377,7 @@ export function backgroundTotals(instances) {
     };
 }
 export function backgroundPage(instances, viewportCount, records) {
-    const measured = instances.filter((i) => i.skipped === undefined);
+    const measured = instances.filter((i) => i.skipped === undefined && i.hidden === undefined);
     return {
         layers: records.filter((r) => r.perViewport.some((p) => p.loaded)).length,
         servedBytes: measured.reduce((sum, i) => sum + i.bytes, 0) / viewportCount,

package/dist/broken.js

@@ -25,7 +25,11 @@ export function brokenOf(result, expectedImages) {
             fix: "the URL does not serve this page: check the path, and that the server being scanned serves this route",
         };
     }
-    if (result.stylesheetsFailed !== undefined && Object.keys(result.stylesheetsFailed).length > 0) {
+    // A failed stylesheet breaks the page only when the page is unstyled (no linked stylesheet applied) or empty (no images).
+    // A partly styled page with a failed sheet, usually a third-party CDN's, is measured and warned about (the scan prints it).
+    const unstyled = (result.stylesheetsLoaded ?? 0) === 0;
+    const empty = result.counts.images === 0;
+    if (result.stylesheetsFailed !== undefined && Object.keys(result.stylesheetsFailed).length > 0 && (unstyled || empty)) {
         const hosts = result.stylesheetHosts ?? [];
         // The most failed in any one view: the same sheet at two viewports is one sheet, not two.
         const count = Math.max(...Object.values(result.stylesheetsFailed));

package/dist/browser.js

@@ -14,11 +14,11 @@ export function mapLaunchError(err) {
     return /Executable doesn['’]t exist/.test(text) ? new ChromiumMissingError() : err;
 }
 /**
- * Chromium flags for measuring. `--disable-software-rasterizer` stops Chrome from starting SwiftShader. Its worker
- * threads get a CPU set of their own from Chrome, which can fall outside the CPUs the CLI was started on.
- * Measurements (layout, rendered sizes, transferred bytes, image decoding) do not depend on the rasterizer.
+ * Chromium flags for measuring. `--disable-gpu` keeps the GPU process out. The software rasterizer (SwiftShader) is left
+ * on: with `--disable-software-rasterizer` WebGL is off, and a page with a 3D viewer never requests its model (a census
+ * site made 5 model requests with the default flags and none without). Only WebGL pages pay the extra CPU for it.
  */
-export const CHROMIUM_ARGS = ["--disable-gpu", "--disable-software-rasterizer"];
+export const CHROMIUM_ARGS = ["--disable-gpu"];
 /** The headless Chromium every measuring command uses. */
 export async function launchChromium() {
     try {

package/dist/candidates.js

@@ -13,6 +13,31 @@ export function rightCandidate(candidates, needed) {
     const sorted = [...candidates].sort((a, b) => a.width - b.width);
     return sorted.find((c) => c.width >= needed) ?? sorted[sorted.length - 1];
 }
+/** The device-pixel step a plain image's variant widths are rounded up to. */
+export const SRCSET_WIDTH_STEP = 10;
+/** A plain image gets at most this many variant widths, one file each. */
+export const SRCSET_MAX_WIDTHS = 3;
+/** The widths of a srcset as printed: "190w, 270w, 380w". */
+export function srcsetWidthLabel(widths) {
+    return widths.map((w) => `${w}w`).join(", ");
+}
+/**
+ * The widths the variants of a plain image (no srcset today) need: each device-pixel need rounded up to SRCSET_WIDTH_STEP
+ * and capped at the file's own width. More than SRCSET_MAX_WIDTHS are merged by joining the closest pair and keeping the
+ * larger, so every need is still covered by a file at least as wide. Sorted ascending; empty when no need is known.
+ */
+export function srcsetWidthsOf(needs, naturalWidth) {
+    const cap = naturalWidth !== undefined && naturalWidth > 0 ? naturalWidth : Infinity;
+    const widths = [...new Set(needs.filter((n) => n > 0).map((n) => Math.min(Math.ceil(n / SRCSET_WIDTH_STEP) * SRCSET_WIDTH_STEP, cap)))].sort((a, b) => a - b);
+    while (widths.length > SRCSET_MAX_WIDTHS) {
+        let at = 0;
+        for (let i = 1; i < widths.length - 1; i++)
+            if (widths[i + 1] - widths[i] < widths[at + 1] - widths[at])
+                at = i;
+        widths.splice(at, 1);
+    }
+    return widths;
+}
 /** The served file is undersized: its pixels are below 0.9 x need, and a larger candidate exists. */
 export function isUndersized(servedWidth, needed, largest) {
     return servedWidth < UNDERSIZED_RATIO * needed && servedWidth < largest;

package/dist/check-report.js

@@ -1,12 +1,14 @@
 // The Markdown report of `imgtune check`: a pure builder over the survey results, the deep results, the route grouping and
 // the deep selection. No browser, no files. The audit mode extends it with source-aware sections; the sections below keep
 // their order so the two stay comparable. Page-derived text goes through mdText and mdCode (see text.ts).
-import { hintsOf, videoRowOf, videoSavingOf, videoTotalsLine } from "./hints.js";
+import { groupSrcsetOf, hiddenPagesLine, hiddenVideoSummaryLine, hintsOf, videoRowOf, videoSavingOf, videoTotalsLine } from "./hints.js";
+import { srcsetWidthLabel } from "./candidates.js";
 import { lcpLinesOf } from "./lcp.js";
 import { planQualityCap, qualitiesLine } from "./qualities-cap.js";
 import { hasFix } from "./images.js";
 import { APPROX_MARK, siteNumbers } from "./remote.js";
 import { errorLine, mdCode, mdText, safeText } from "./text.js";
+import { resourceTotalsLine } from "./resources/report.js";
 /** How many fixes, heavy pages, sharpness images and survey route types the report lists in full. */
 export const REPORT_FIXES = 15;
 export const REPORT_SHARPNESS = 15;
@@ -66,6 +68,7 @@ export function fixGroupsOf(deep, qualities) {
         const pages = [...new Set(group.hints.map((h) => h.page))];
         const saved = group.hints.reduce((sum, h) => sum + h.bytes.saved, 0) / 1024;
         const sizes = group.hints.reduce((sum, h) => sum + (h.bytes.sizes ?? 0), 0) / 1024;
+        const resize = group.hints.reduce((sum, h) => sum + (h.bytes.resize ?? 0), 0) / 1024;
         const sharp = group.hints.reduce((sum, h) => sum + h.bytes.addedForSharpness, 0) / 1024;
         const targets = group.hints.map((h) => h.quality?.target).filter((t) => t !== undefined);
         const quality = group.hints.find((h) => h.quality !== undefined)?.quality;
@@ -82,6 +85,7 @@ export function fixGroupsOf(deep, qualities) {
             current,
             proposed,
             basis: first.sizes.basis,
+            srcset: groupSrcsetOf(group),
             format: best !== undefined && best !== first.format?.current ? best : undefined,
             ...(quality !== undefined
                 ? {
@@ -99,7 +103,8 @@ export function fixGroupsOf(deep, qualities) {
             savedKBSum: saved,
             savedKBPerPage: perPage(saved),
             sizesKBPerPage: perPage(sizes),
-            qualityKBPerPage: perPage(saved - sizes),
+            resizeKBPerPage: perPage(resize),
+            qualityKBPerPage: perPage(saved - sizes - resize),
             sharpnessKBPerPage: perPage(sharp),
         });
     }
@@ -108,7 +113,11 @@ export function fixGroupsOf(deep, qualities) {
 /** The line of one fix: where, the sizes and quality change, the saving per view and its pages. */
 function fixLines(fix, rank) {
     const where = fix.located ? mdCode(fix.where) : `${mdCode(fix.where)} (not located)`;
-    const sizes = fix.current === fix.proposed ? "sizes unchanged" : `sizes ${mdCode(fix.current)} -> ${mdCode(fix.proposed)}${fix.basis ? ` (${mdText(fix.basis)})` : ""}`;
+    const sizes = fix.srcset !== undefined
+        ? `no srcset -> serve ${srcsetWidthLabel(fix.srcset.widths)} + srcset/sizes`
+        : fix.current === fix.proposed
+            ? "sizes unchanged"
+            : `sizes ${mdCode(fix.current)} -> ${mdCode(fix.proposed)}${fix.basis ? ` (${mdText(fix.basis)})` : ""}`;
     const quality = fix.quality === undefined
         ? "quality -"
         : fix.quality.target === undefined
@@ -116,7 +125,8 @@ function fixLines(fix, rank) {
             : fix.quality.void
                 ? `quality ${fix.quality.current} -> ${fix.quality.target} (snapped: void, counted as 0)`
                 : `quality ${fix.quality.current} -> ${fix.quality.target}${fix.quality.snapFrom !== undefined ? ` (snapped from ${fix.quality.snapFrom}${fix.quality.allowed ? `, allowed ${fix.quality.allowed.join(",")}` : ""})` : ""}`;
-    const saving = `saves ${kb(fix.savedKBPerPage)} KB/view per page (sizes ${kb(fix.sizesKBPerPage)} + quality ${kb(fix.qualityKBPerPage)})`;
+    const split = fix.resizeKBPerPage > 0 ? `sizes ${kb(fix.sizesKBPerPage)} + resize ${kb(fix.resizeKBPerPage)} + quality ${kb(fix.qualityKBPerPage)}` : `sizes ${kb(fix.sizesKBPerPage)} + quality ${kb(fix.qualityKBPerPage)}`;
+    const saving = `saves ${kb(fix.savedKBPerPage)} KB/view per page (${split})`;
     const source = fix.pattern !== undefined ? `, src ${mdCode(fix.pattern)}` : "";
     const where2 = `${fix.pages.length} page(s), ${fix.images} image(s), loader ${mdText(fix.loader)}${source}`;
     return [
@@ -157,6 +167,9 @@ export function buildCheckReport(input) {
     const media = [...input.survey, ...input.deep].find((p) => p.mediaNote !== undefined)?.mediaNote;
     if (media !== undefined)
         out(mdText(media), "");
+    const vectorNote = input.deep.find((p) => p.vectorNote !== undefined)?.vectorNote;
+    if (vectorNote !== undefined)
+        out(mdText(vectorNote), "");
     if (input.stop !== undefined) {
         out("## Stopped before the deep phase", "", `${mdText(input.stop.reason)}`, `Fix: ${mdText(input.stop.fix)}`, "");
     }
@@ -174,6 +187,9 @@ export function buildCheckReport(input) {
         const exactEst = mean(deepTotals.map((t) => t.exactEstKB));
         const numbers = siteNumbers(deepOk.map((p) => p.page));
         out(`- Deep (${deepOk.length} page(s), viewports ${input.options.deepViewports.map(mdText).join(", ")}): mean image ${kb(numbers.meanImageBytes / 1024)} KB/view.`, `  - exact: ${kb(exact)} KB/view (${pct(numbers.exactPct)})`, `  - exact + est.: ${APPROX_MARK.trim()} ${kb(exactEst)} KB/view (${pct(numbers.exactEstPct)})${approx ? " (some estimates are approximate)" : ""}`, `  - sharpness: +${kb(mean(deepTotals.map((t) => t.sharpnessKB)))} KB/view, a separate number: it is never netted against the saving`);
+        const hiddenLine = hiddenPagesLine(deepOk);
+        if (hiddenLine !== undefined)
+            out(`  - ${mdText(hiddenLine)}`);
         // The LCP image is the one the first paint waits for: its line, per page, before the ranked fixes.
         for (const page of deepOk) {
             for (const line of lcpLinesOf(page, mdCode))
@@ -201,12 +217,29 @@ export function buildCheckReport(input) {
     if (videos.length > 0) {
         out("## Video", "");
         out(`${videoTotalsLine(videos.map((v) => v.video))} (${videos.length} video(s) on ${deepOk.filter((p) => (p.videos ?? []).length > 0).length} deep page(s))`, "");
+        const hiddenVideos = hiddenVideoSummaryLine(videos.map((v) => v.video));
+        if (hiddenVideos !== undefined)
+            out(`- ${mdText(hiddenVideos)}`);
         const ranked = [...videos].sort((a, b) => videoSavingOf(b.video).view - videoSavingOf(a.video).view || a.page.localeCompare(b.page));
         for (const row of ranked.slice(0, REPORT_FIXES)) {
             out(`- ${mdCode(videoRowOf(row.video, (text) => JSON.stringify(safeText(text))))} on ${mdCode(pathOf(row.page))}`);
         }
         out("");
     }
+    // 3c. Resources: the deep pages' non-image findings (compression, favicons), largest saving first (see resources/).
+    const resourceRows = deepOk.flatMap((p) => (p.resources ?? []).map((finding) => ({ page: p.url, finding })));
+    if (resourceRows.length > 0) {
+        out("## Resources", "");
+        out(mdText(resourceTotalsLine(resourceRows.map((r) => r.finding)) ?? ""), "");
+        const ranked = [...resourceRows].sort((a, b) => b.finding.savedBytes - a.finding.savedBytes || a.page.localeCompare(b.page));
+        for (const row of ranked.slice(0, REPORT_FIXES)) {
+            const saved = row.finding.savedBytes > 0 ? `, saves ${kb(row.finding.savedBytes / 1024)} KB/view${row.finding.estimate ? " (est.)" : ""}` : "";
+            out(`- ${mdText(row.finding.kind)}: ${mdText(row.finding.title)}${saved} on ${mdCode(pathOf(row.page))}`);
+            if (row.finding.fix[0] !== undefined)
+                out(`  - fix: ${mdText(row.finding.fix[0])}`);
+        }
+        out("");
+    }
     // 4. Heavy but not wasteful.
     out("## Heavy but not wasteful", "");
     const heavyCut = percentile(deepTotals.map((t) => t.kb), 0.75);

package/dist/check.js

@@ -11,7 +11,7 @@ import { gpuSettingOf, gpuSettingOne } from "./gpu.js";
 import { parseQualities } from "./hints.js";
 import { BROKEN_EXIT, surveyStop } from "./broken.js";
 import { DEFAULT_THIRD_PARTY, parseAllowHosts, thirdPartyFromFlags } from "./third-party.js";
-import { MAX_IDLE_TIMEOUT_MS, MAX_PAGE_CONCURRENCY, parseLimit, parseRange, readStorageState, runScan, scanPlan, } from "./remote.js";
+import { MAX_IDLE_TIMEOUT_MS, MAX_PAGE_CONCURRENCY, MAX_RESOURCE_TIME, MAX_SVG_BUDGET, parseLimit, parseRange, readStorageState, runScan, scanPlan, } from "./remote.js";
 import { restrictRoutes, groupRoutes, parseRouteMap } from "./routes.js";
 import { sampleByPattern, urlsFromSource } from "./urls.js";
 import { deepRetries, selectDeepPages } from "./deep.js";
@@ -38,6 +38,8 @@ export function parseCheckFlags(argv) {
             args.noCache = true;
         else if (arg === "--gpu-encode")
             args.gpuEncode = true;
+        else if (arg === "--no-resources")
+            args.noResources = true;
         else if (arg === "--ignore-robots")
             args.ignoreRobots = true;
         else if (arg === "--block-third-party")
@@ -59,6 +61,8 @@ export function parseCheckFlags(argv) {
             arg === "--page-concurrency" ||
             arg === "--qualities" ||
             arg === "--idle-timeout" ||
+            arg === "--svg-budget" ||
+            arg === "--resource-time" ||
             arg === "--storage-state" ||
             arg === "--allow-host") {
             const value = valueOf(argv, i, arg);
@@ -79,6 +83,10 @@ export function parseCheckFlags(argv) {
                 args.qualities = parseQualities(value);
             else if (arg === "--idle-timeout")
                 args.idleTimeoutMs = parseRange(arg, value, 0, MAX_IDLE_TIMEOUT_MS);
+            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 === "--storage-state")
                 args.storageState = value;
             else
@@ -184,6 +192,7 @@ export async function scanCheckPages(input) {
         ignoreRobots: settings.ignoreRobots,
         aggressive: false,
         thirdParty: settings.thirdParty,
+        resources: settings.noResources !== true,
     };
     const base = { urls: [], out: outRoot, aggressive: false, quality: true, thirdParty: settings.thirdParty };
     const surveyPlan = scanPlan({ ...base, survey: true });
@@ -206,6 +215,8 @@ export async function scanCheckPages(input) {
             ...(settings.thirdParty.block ? ["--block-third-party"] : []),
             ...(settings.noCache ? ["--no-cache"] : []),
             ...(settings.gpuEncode ? ["--gpu-encode"] : []),
+            ...(settings.noResources ? ["--no-resources"] : []),
+            ...(settings.resourceTime !== undefined ? ["--resource-time", String(settings.resourceTime)] : []),
         ].join(" "),
     });
     log(`survey: ${urls.length} URL(s), ${routes.types.length} route type(s)`);
@@ -244,9 +255,12 @@ export async function scanCheckPages(input) {
             ...(settings.thirdParty.allowHosts.length > 0 ? ["--allow-host", shellWord(settings.thirdParty.allowHosts.join(","))] : []),
             ...(settings.noCache ? ["--no-cache"] : []),
             ...(settings.gpuEncode ? ["--gpu-encode"] : []),
+            ...(settings.noResources ? ["--no-resources"] : []),
+            ...(settings.resourceTime !== undefined ? ["--resource-time", String(settings.resourceTime)] : []),
             ...(settings.ignoreRobots ? ["--ignore-robots"] : []),
             ...(settings.pageConcurrency !== undefined ? ["--page-concurrency", String(settings.pageConcurrency)] : []),
             ...(settings.idleTimeoutMs !== undefined ? ["--idle-timeout", String(settings.idleTimeoutMs)] : []),
+            ...(settings.svgBudget !== undefined ? ["--svg-budget", String(settings.svgBudget)] : []),
         ];
         commands.push({ phase: "deep", command: ["imgtune scan", ...deepUrls.map(shellWord), "--out", shellWord(deepDir), ...flags].join(" ") });
         log(`deep: ${deepUrls.length} page(s), full scan`);
@@ -258,6 +272,7 @@ export async function scanCheckPages(input) {
             pageConcurrency: fullPlan.pageConcurrency,
             idleTimeoutMs: fullPlan.idleTimeoutMs,
             gpu: settings.gpu,
+            svgBudget: settings.svgBudget,
             expectImages: (url) => expected.get(url),
         };
         const deepStart = performance.now();
@@ -346,6 +361,8 @@ export async function finishCheck(input) {
             pageConcurrency: settings.pageConcurrency,
             idleTimeoutMs: settings.idleTimeoutMs,
             noCache: settings.noCache,
+            ...(settings.noResources ? { noResources: true } : {}),
+            ...(settings.resourceTime !== undefined ? { resourceTime: settings.resourceTime } : {}),
             ignoreRobots: settings.ignoreRobots,
             storageState: input.storageState,
             thirdParty: settings.thirdParty.block ? "blocked" : "allowed",