imgtune 0.0.0-stage → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (87) hide show
  1. package/CHANGELOG.md +322 -0
  2. package/LICENSE +21 -0
  3. package/NOTICE +20 -0
  4. package/README.md +350 -2
  5. package/THIRD_PARTY_LICENSES +295 -0
  6. package/dist/address.js +221 -0
  7. package/dist/animated.js +176 -0
  8. package/dist/app-routes.js +211 -0
  9. package/dist/atomic.js +63 -0
  10. package/dist/audit.js +372 -0
  11. package/dist/backgrounds.js +363 -0
  12. package/dist/broken.js +106 -0
  13. package/dist/browser.js +30 -0
  14. package/dist/calibrate.js +221 -0
  15. package/dist/candidates.js +151 -0
  16. package/dist/check-report.js +302 -0
  17. package/dist/check.js +416 -0
  18. package/dist/cli.js +531 -0
  19. package/dist/compare.js +398 -0
  20. package/dist/concurrency.js +37 -0
  21. package/dist/config.js +10 -0
  22. package/dist/crawl.js +186 -0
  23. package/dist/deep.js +76 -0
  24. package/dist/egress-proxy.js +151 -0
  25. package/dist/encode.js +101 -0
  26. package/dist/estimate-jobs.js +114 -0
  27. package/dist/fetch.js +179 -0
  28. package/dist/ffmpeg.js +495 -0
  29. package/dist/gpu.js +353 -0
  30. package/dist/group-sizes.js +120 -0
  31. package/dist/hints.js +1102 -0
  32. package/dist/image-file.js +553 -0
  33. package/dist/images.js +361 -0
  34. package/dist/layout.js +240 -0
  35. package/dist/lcp.js +66 -0
  36. package/dist/loaders.js +267 -0
  37. package/dist/loads.js +29 -0
  38. package/dist/locate-join.js +511 -0
  39. package/dist/locate-only.js +178 -0
  40. package/dist/locate.js +382 -0
  41. package/dist/lru.js +34 -0
  42. package/dist/measure.js +238 -0
  43. package/dist/media-encode.js +1050 -0
  44. package/dist/media-file.js +284 -0
  45. package/dist/media-limits.js +31 -0
  46. package/dist/media-model.js +247 -0
  47. package/dist/media-phase.js +652 -0
  48. package/dist/media-prepare.js +31 -0
  49. package/dist/metric.js +227 -0
  50. package/dist/next-config.js +87 -0
  51. package/dist/qualities-cap.js +141 -0
  52. package/dist/recheck-rows.js +40 -0
  53. package/dist/recheck.js +376 -0
  54. package/dist/remote.js +3582 -0
  55. package/dist/report.js +253 -0
  56. package/dist/result-cache.js +183 -0
  57. package/dist/routes.js +280 -0
  58. package/dist/run.js +445 -0
  59. package/dist/search.js +88 -0
  60. package/dist/site.js +31 -0
  61. package/dist/sizes-outcome.js +81 -0
  62. package/dist/sizes-recheck.js +332 -0
  63. package/dist/sizes.js +148 -0
  64. package/dist/source-root.js +77 -0
  65. package/dist/srcset-parse.js +98 -0
  66. package/dist/srcset.js +44 -0
  67. package/dist/ssim.js +196 -0
  68. package/dist/stage.js +51 -0
  69. package/dist/summary.js +495 -0
  70. package/dist/survey.js +13 -0
  71. package/dist/text.js +72 -0
  72. package/dist/third-party.js +127 -0
  73. package/dist/timing.js +60 -0
  74. package/dist/types.js +1 -0
  75. package/dist/urls.js +300 -0
  76. package/dist/version.js +3 -0
  77. package/dist/video-analysis.js +273 -0
  78. package/dist/webp-animation.js +283 -0
  79. package/dist/worst.js +42 -0
  80. package/package.json +70 -4
  81. package/skills/imgtune/AGENTS.snippet.md +47 -0
  82. package/skills/imgtune/SKILL.md +344 -0
  83. package/skills/imgtune/reference.md +339 -0
  84. package/vendor/ssimulacra2/ssim_wasm.cjs +113 -0
  85. package/vendor/ssimulacra2/ssim_wasm.d.ts +8 -0
  86. package/vendor/ssimulacra2/ssim_wasm_bg.wasm +0 -0
  87. package/vendor/ssimulacra2/ssim_wasm_bg.wasm.d.ts +6 -0
package/README.md CHANGED
@@ -1,3 +1,351 @@
1
- # Temporary Holding Version
1
+ # ImgTune
2
2
 
3
- This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
3
+ [![npm version](https://img.shields.io/npm/v/imgtune.svg)](https://www.npmjs.com/package/imgtune)
4
+
5
+ **ImgTune measures image waste on any live site.**
6
+
7
+ Website: https://indicozy.github.io/imgtune/ · [Try the demo](https://indicozy.github.io/imgtune/demo) · [Docs](https://indicozy.github.io/imgtune/guide/getting-started)
8
+
9
+ Lighthouse tells you your images are too big. ImgTune tells you the `sizes`, quality and format to set for each image,
10
+ points at the line of code that renders it (when your dev server is running), and checks each quality target with
11
+ SSIMULACRA2. Your coding agent applies the change, and a rescan checks it.
12
+
13
+ **Works with your image CDN.** Cloudinary, imgix and `next/image` resize to whatever width `sizes` asks for, so a wrong
14
+ `sizes` is waste that no CDN removes. ImgTune works on top of a CDN, not instead of one. Already on Cloudinary auto
15
+ quality (`q_auto`)? ImgTune focuses on `sizes`, which no CDN can fix for you. A format the CDN picks per request
16
+ (Cloudinary `f_auto`, imgix `auto=format`) is not proposed as a change.
17
+
18
+ **Built for image-heavy sites:** e-commerce catalogs, media, marketplaces.
19
+
20
+ ## Two ways to measure
21
+
22
+ - **`npx imgtune check https://your-site`** measures any live site, in a browser, with no source. It reads the site's
23
+ sitemap, groups the URLs into route types (templates such as product or listing pages), deep-scans the heaviest page of
24
+ each type at six viewports, and writes a Markdown report, `report.md`.
25
+ - **`npx imgtune audit --app . --prod http://localhost:3000 --dev http://localhost:3001`** is the deep mode for your own
26
+ Next.js app. It reads the route files and `next.config`, measures the production build, and with `--dev` locates each
27
+ fix at its `file:line` in the source.
28
+
29
+ Each page's report shows one line above its numbers for its LCP image (the largest contentful paint element, when it is an
30
+ image). Where `next.config` lists several `images.qualities`, ImgTune clusters them into at most
31
+ `--max-qualities` values (default 2), and each target is raised to the nearest value kept, so the SSIMULACRA2 bar still holds.
32
+
33
+ ## Install
34
+
35
+ ```sh
36
+ npm i -D imgtune
37
+ ```
38
+
39
+ Then run it with `npx imgtune`. Without installing, `npx imgtune` fetches it for one run. ImgTune needs Chromium for
40
+ Playwright; see [Requirements](#requirements).
41
+
42
+ ## Quick start
43
+
44
+ Measure a live site, with no access to its source:
45
+
46
+ ```sh
47
+ npx imgtune scan https://your-site.example/
48
+ ```
49
+
50
+ The scan writes one JSON file per page to `.imgtune/scan/`, for example `.imgtune/scan/your-site.example-index.json`, and
51
+ prints a count of the images with fix hints. Read the hints in batches of ten:
52
+
53
+ ```sh
54
+ npx imgtune hints .imgtune/scan/your-site.example-index.json
55
+ ```
56
+
57
+ Each hint names the image, its component and `file:line` when they resolve, the `sizes` and quality to use, and the bytes
58
+ the fix saves per view, with the bytes it adds for sharpness shown separately. Run `npx imgtune --help`, or
59
+ `npx imgtune scan --help` for every option.
60
+
61
+ For the whole site in one report, run `npx imgtune check https://your-site.example/` instead. It writes `report.md` to
62
+ `.imgtune/check/`, and `imgtune summary` prints its one-screen summary.
63
+
64
+ ## Why one lever is not enough
65
+
66
+ It looks at three levers for each image: **resolution** (the pixels the browser actually needs), **quality** (the
67
+ encoder setting), and **format** (for example AVIF or WebP instead of JPEG). Measurements are per page view, per
68
+ viewport, and quality is scored with SSIMULACRA2.
69
+
70
+ - **Compressors** squeeze the file you hand them, but never learn how wide it is shown. A 6,000 px logo in a 150 px
71
+ slot stays 6,000 px, only better compressed.
72
+ - **Image CDNs and `next/image`** resize on request, but only to the widths your `sizes` attribute asks for. A wrong or
73
+ missing `sizes` makes every phone fetch a file several times too wide.
74
+ - **Lighthouse** flags oversized, poorly encoded and old-format images, at one viewport per run, with a fixed estimate.
75
+ It tells you something is wrong, not which `sizes` or quality to set.
76
+ - **ImgTune** measures size, quality and format together, per image, on the live page at six viewports, accepts a
77
+ saving only when SSIMULACRA2 says nobody can see it.
78
+
79
+ ## Fix it with your agent
80
+
81
+ ImgTune measures; it does not edit your project. The agent skill does the editing: it scans, matches each hint to the
82
+ source, fixes it, verifies with a rescan, and reports from a ledger it keeps in the project.
83
+
84
+ - **Claude Code**: copy the skill folder into your project. From the project root:
85
+
86
+ ```sh
87
+ mkdir -p .claude/skills && cp -r node_modules/imgtune/skills/imgtune .claude/skills/
88
+ ```
89
+
90
+ Then ask Claude Code to optimise the images of the site. The skill is `.claude/skills/imgtune/SKILL.md`, with a
91
+ `reference.md` beside it.
92
+ - **Cursor, Codex, Copilot, and other agents**: paste `node_modules/imgtune/skills/imgtune/AGENTS.snippet.md` into your
93
+ `AGENTS.md` or `CLAUDE.md`. It is the short form of the same loop and rules, and points to `npx imgtune --help`.
94
+
95
+ The skill works in batches of about ten hints, starting with the LCP image, and writes `.imgtune/ledger.jsonl` (one line
96
+ per image usage). When its context fills, it writes `.imgtune/HANDOFF.md`, so a new session can resume. Use a built or
97
+ preview server for the before and after numbers, and the dev server for the edit loop: source locations only resolve in
98
+ dev builds, or in a built page that ships source maps.
99
+
100
+ ## What `scan` measures
101
+
102
+ `scan` loads each page in headless Chromium at six viewports (four phones, a 1440 px desktop at 2x, and a 1280 px
103
+ desktop at 1x), scrolls it to the end, and records every image.
104
+
105
+ - **Exact** savings come from the site's own smaller `srcset` candidates. Each one is fetched and measured, so the
106
+ number is the real byte difference.
107
+ - **Estimated** savings come from a local re-encode of the image: a different quality, a different format, or a resize of
108
+ a plain `<img>`. They are estimates.
109
+ - The CLI prints `exact` and `exact + est.`. The `exact + est.` figure is the estimated saving: the exact part plus the
110
+ estimate.
111
+ - Quality is judged with SSIMULACRA2 at a delta of 2 points. `--aggressive` adds a delta 4 column, which is reported
112
+ beside the main numbers and never used for the headline.
113
+ - Undersized images (a file smaller than the slot it fills) are reported as sharpness growth, separately. Growth from
114
+ undersized images is never subtracted from other images' savings, and an undersized image itself contributes no
115
+ saving.
116
+ - For each image, the scan records its locator (the component and `file:line` in dev builds, `data-testid`, `alt`, and the
117
+ loader URL pattern), the `sizes` the browser resolved at each viewport, the layout chain above it, and a fix hint with
118
+ two numbers: bytes saved, and bytes added for sharpness. The two are never netted.
119
+ - Pages are scanned after their `robots.txt` is checked for the `*` user agent. A disallowed page is skipped and
120
+ recorded as `robots`. Pages that return a challenge or bot wall are recorded as `blocked` and not retried. The
121
+ scanner identifies itself with the default Chromium user agent, uses no stealth plugins, and fetches each image URL
122
+ at most once per scan.
123
+ - Besides the page itself, scan fetches the page's own srcset candidates and, for quality estimates, the original of a
124
+ sampled image (derived from the loader URL), each at most once per scan. It never requests new transformations from
125
+ the CDN.
126
+ - Large sites: `--urls-from` reads a URL list or a sitemap, `--sample-per-pattern` samples each route type, and
127
+ `--resume`, `--max-pages` and `--max-images` split a long run into parts. `--survey` is a fast pass over every URL
128
+ (two viewports, exact savings only, labelled as such); full-scan the heaviest page of each route type after it.
129
+ - Production check: `imgtune check` (see [Two ways to measure](#two-ways-to-measure)) and `imgtune audit` do the same
130
+ survey and deep scan for a whole site, with no source needed for `check`.
131
+
132
+ ## The evidence ladder
133
+
134
+ Every fix hint is labelled with the strength of its evidence, the rung it stands on:
135
+
136
+ 1. **measured-page** (exact): the usage was measured on the live page, at each viewport. This is what `scan` produces.
137
+ 2. **measured-harness**: the usage was measured in isolation, through a temporary route such as `/__imgtune/<component>`
138
+ that renders each state, or through Storybook. The agent removes the route afterwards.
139
+ 3. **ceiling-code**: derived from the resolved classes and the layout constraints (container width, grid columns,
140
+ padding). It is an upper bound on the width needed, never a measured saving.
141
+ 4. **not-measured**: no number, with the reason (hidden, behind a login, not rendered at scan time).
142
+
143
+ A ceiling is never derived from the existing `sizes` value. When a usage is measured, its `sizes` comes from the layout
144
+ the browser resolved, not from a guess.
145
+
146
+ ## GIFs and video
147
+
148
+ `scan` also measures animated media: animated GIFs in an `<img>` or a CSS background, animated WebP and APNG, and
149
+ self-hosted `<video>` elements with a plain file source. Static GIFs get the normal image hints.
150
+
151
+ - **Out of scope, not reported:** adaptive streams (HLS, DASH, Mux, Cloudflare Stream) and third-party iframes (YouTube,
152
+ Vimeo). A video hosted on another site follows the third-party rules (`--block-third-party`, `--allow-host`).
153
+ - **ffmpeg** is used from `PATH`; ImgTune does not bundle it. Without it, `scan` still reports each animated image's and
154
+ video's bytes and the width it needs, and prints one note: `install ffmpeg for verified video and GIF hints`. The encodes,
155
+ and so the fix hints with a size, need it.
156
+ - **Encodes run on the CPU by default.** `--gpu-encode` is **experimental**: it moves the sample encodes to the GPU (NVENC
157
+ `av1_nvenc` / `h264_nvenc`, preset p4, constant quality in VBR; `libvmaf_cuda` for the VMAF). It uses the `--gpu-device`
158
+ list, else GPU 0, in workers beside the CPU ones. Each GPU is proven by a tiny test encode first; a width under 144 px or
159
+ an NVENC failure is encoded on the CPU for that candidate. NVENC is larger at equal quality, so its bytes are reported as
160
+ NVENC bytes ÷ 1.4, labelled `est. (GPU-encoded, scaled to a CPU encode ÷1.4)`. In our measurements `--gpu-encode` was
161
+ slower than the CPU (per-process CUDA start-up); see the report before using it. `--gpu` and `--gpu-device` only pick the
162
+ SSIMULACRA2 GPU scorer (the first device) unless `--gpu-encode` is given. The hint's recipe is the CPU one (`libsvtav1` / `libx264`), and an NVENC
163
+ quality is marked `approx.` (CRF = cq).
164
+ - **Hints.** A large animated GIF gets `<video autoplay muted loop playsinline>` with AV1 first and an H.264 fallback, and
165
+ the animated-image alternative with its size. A small `<img>` GIF or a CSS background gets an animated AVIF or WebP. A
166
+ `<video>` hint names each lever: the width per breakpoint (`<source media>`), the CRF, the codec, the audio track of a
167
+ muted video, and `preload`. A poster is audited as an image. Duration and frame rate are informational only.
168
+ - **Bytes: per view and per play.** Per view is what the first view fetches. An autoplay video counts its full file,
169
+ `preload="auto"` counts the bytes the scan saw (browser-dependent), and `preload="metadata"` or `"none"` counts 0. Per
170
+ play is the full file. Both are shown for every video, so a large click-to-play file is not missed. Animated images stay
171
+ in the image totals; `<video>` has its own Video section, and posters count as images.
172
+ - **Estimates come from 2 s samples.** One sample for a video of up to 6 s, three for a longer one. The full-file bytes
173
+ are extrapolated from the samples and labelled as an estimate; nothing is encoded in full.
174
+ - **Quality bars.** VMAF must reach `--video-bar` (default 93) against the served file at its display size. A still-frame
175
+ guard (SSIMULACRA2 on the stillest frames) catches blurred text in screen recordings and must reach `--video-still-bar`
176
+ (default 65), lowered to at most 10 points below the best the codec reaches on that content, and never below 20. The
177
+ relative bar catches the loss the encode adds, not what the format can never reproduce, such as GIF dither.
178
+ - **Budget and widths.** Encodes run on the heaviest animated assets first, at most `--media-budget` per run (default 20)
179
+ and within `--media-time` seconds (default 600). Assets over the budget keep their cheap hints and are marked "over
180
+ --media-budget". A video is served at most `--max-video-widths` widths (default 2): each viewport gets the smallest
181
+ kept width that covers its display width times its device pixel ratio. `audit` reports the bytes at one, two and three
182
+ widths instead, and the agent chooses. `--no-quality` and `--survey` make no encodes.
183
+ - **Check an agent's output** with `imgtune image <candidate> --reference <original>`: the same VMAF and still-frame bar,
184
+ exit 0 on pass and 1 on fail (see the table below).
185
+
186
+ ## Commands
187
+
188
+ | command | what it does |
189
+ | --- | --- |
190
+ | `imgtune check <origin \| sitemap-url \| page-url>` | the production check, in a browser only: surveys the URLs, deep-scans the heaviest page of each route type, writes `report.md` and `run.json` to `--out` (default `.imgtune/check/<timestamp>`); `--urls-from <file\|sitemap>` instead of the URL; `--sample-per-pattern` (default 3), `--deep` (default 20), `--route-map` |
191
+ | `imgtune audit --app <dir> --prod <origin> [--dev <origin>]` | the deep mode for a Next.js app: the check, plus the route files and `images.qualities` from `next.config`; with `--dev`, the `file:line` of each located fix; `--urls-from <file\|sitemap>`, `--max-locales` (default 3, how many values of a dynamic first segment the crawl expands) |
192
+ | `imgtune run <url> [<url> ...] \| --urls-from <file\|sitemap>` | the whole flow in one command: survey, deep scan, locate (`--dev`), hints, and one run directory with a summary |
193
+ | `imgtune scan <url> [<url> ...]` | measures live pages, one JSON file per page in `--out` (default `.imgtune/scan`); `--urls-from`, `--max-qualities <N>` (1 to 4, default 2) |
194
+ | `imgtune hints <scan.json>` | prints a batch of fix hints: `--limit` (default 10), `--offset`, `--page`, `--component`, `--min-kb`, `--top`, `--flat`, `--qualities`, `--max-qualities`, `--format json` |
195
+ | `imgtune summary <run dir \| scan.json ...>` | the one-screen summary of a run directory (`run.json`) or of scan files |
196
+ | `imgtune scan --recheck <scan.json> [--ids a,b,c]` | rescans only the named images at the viewports where they rendered; prints before and after; exits 1 on a failed check |
197
+ | `imgtune image <file\|url\|glob>` | measures image files without a page: bytes now, the lowest quality per format that meets the bar, and at a `--width` the bytes at each needed width; `--min-score` sets the bar (default 90), `--write <dir>` writes optimised copies |
198
+ | `imgtune image <animated.gif\|.webp\|.png\|video> --reference <original>` | checks a re-encoded video or animated file against the original: `VMAF … still p10 …: pass\|fail` with exit 0 or 1; `--video-bar` (default 93) and `--video-still-bar` (default 65) set the bars; without `--reference` an animated file gets its candidates (needs ffmpeg) |
199
+ | `imgtune compare <before.json> <after.json>` | compares two scans of one page image by image: the bytes saved and the sharpness bytes added, as two numbers; drift (a changed layout, server variance, a view not loaded) is excluded and its totals printed; `--format json`, `--limit` |
200
+ | `imgtune report` | a Markdown run report from the agent's ledger (`.imgtune/ledger.jsonl`); `--compare <file>` adds the bytes from `imgtune compare --format json`; `--out <file>` writes it |
201
+
202
+ The scan options that matter most: `--viewports <names>` (a subset of the six), `--markdown <file>` (the PR comment),
203
+ `--summary-json <file>` (one JSON of every page's numbers), `--fail-over <pct>` (exit 3 above a budget),
204
+ `--storage-state <file>` (a logged-in session), and `--ignore-robots` (see Security). `npx imgtune scan --help` lists them all.
205
+ `imgtune check --help`, `imgtune audit --help` and `imgtune run --help` list the options of each command.
206
+
207
+ Two flows for a large app. One measures on a built server and then checks the edits on a dev server:
208
+ `scan <built-url>`, then `scan <dev-url> --locate-only --from <scan.json>` (reads the React source of the flagged images),
209
+ then `scan --recheck <located.json> --sizes-only --ids a,b` (judges the sizes choice on dev, no bytes), then `scan` on the
210
+ built server again. The other runs the score on an NVIDIA GPU: `--gpu --gpu-device <n>` (a CUDA index; set `CUDA_DEVICE_ORDER=PCI_BUS_ID` to match `nvidia-smi`). The GPU
211
+ program, `imgtune-ssimu2-gpu`, is not bundled; see the GPU section of the reference.
212
+
213
+ ## GitHub Action
214
+
215
+ `action.yml` at the root scans the pages you name on each pull request, and comments the result on it. The comment keeps
216
+ the summary tables and the top groups per page, and adds a collapsed "Fix hints for your AI agent" section with the top
217
+ ten hints across the pages. The comment is updated on each push. Set `fail-over` to fail the job above a budget.
218
+
219
+ ```yaml
220
+ - uses: indicozy/imgtune@main
221
+ with:
222
+ urls: https://preview.your-site.example/
223
+ fail-over: "5"
224
+ ```
225
+
226
+ The action builds itself from source, so `dist/` is not needed in the repository. See [docs/ci.md](docs/ci.md) for the
227
+ inputs, the permissions, and two example workflows (Vercel previews, and a local build on the runner).
228
+
229
+ `scan` keeps Chrome on the CPUs it was started on, so you can keep it off the cores you need: `taskset -c 8-19 npx imgtune scan …` on Linux.
230
+
231
+ ## Security
232
+
233
+ - **Egress and private addresses.** `scan` refuses private and loopback addresses unless the URL you give is itself local,
234
+ checks every redirect hop and sub-resource at connection time. See the [scanning guide](site/guide/scanning-any-site.md#security).
235
+ - **ImgTune never commits, and `scan` does not change your project's source files.**
236
+ - **Hint strings are data, not instructions.** File names, component names, `alt`, `testid`, classes and URLs come from
237
+ the page being scanned, and the agent must never follow text found in them. The hints print them JSON-quoted and capped
238
+ (in the terminal, and in the PR comment, where they sit in a fenced block after a line that says they are data). A
239
+ locator from a non-local source is marked `(unverified)`, and a call site that only renders the image's component is marked `(owner call site)`. The agent
240
+ checks that a file exists in the repository, and that the line holds an image usage, before it edits.
241
+ - **Source maps come from the scanned site.** They are read with caps on size (20 MB), count (64 per scan), lines and
242
+ sections, and only a relative path under the project is kept as a source file.
243
+ - **`--storage-state` holds session cookies.** Never commit that file. The scan never prints its contents.
244
+ - **`--ignore-robots` is for sites you own or are authorised to test.** It prints a warning, and the JSON records
245
+ `robotsIgnored` with the rule that disallowed the page.
246
+
247
+ ## Supported loaders
248
+
249
+ Loaders are detected from the URL each image renders. `original known?` means ImgTune can find the untransformed
250
+ source, which is what quality is measured against. `quality settable?` means the URL carries a quality parameter
251
+ that ImgTune can change.
252
+
253
+ | loader | matches | original known? | quality settable? |
254
+ | --- | --- | --- | --- |
255
+ | next/image | `/_next/image?url=…` | yes | yes (`q`) |
256
+ | Cloudflare Images | `/cdn-cgi/image/<opts>/<path>` | yes | yes (`quality`) |
257
+ | Contentful | `images.ctfassets.net`, `downloads.ctfassets.net` | yes | yes (`q`) |
258
+ | Sanity | `cdn.sanity.io/images/…`, or the same path shape on a custom domain | yes | yes (`q`) |
259
+ | Shopify | `cdn.shopify.com`, `/cdn/shop/…` | yes (size parameters and legacy size suffixes removed) | yes (`quality`) |
260
+ | Cloudinary | `res.cloudinary.com/<cloud>/image/upload/…`, or transformation paths on a custom domain | yes | yes (`q_<n>`); `q_auto` is left to the CDN |
261
+ | imgix (incl. DatoCMS, Prismic) | `*.imgix.net`, `datocms-assets.com`, `images.prismic.io` | yes | yes (`q`) |
262
+ | generic | any other URL | no | only when the URL has `q=` or `quality=` |
263
+
264
+ Where the original is unknown, ImgTune still measures resolution, and reports the count of images it could not score
265
+ for quality.
266
+
267
+ ## Demand study (2026-10-28)
268
+
269
+ Before packaging, ImgTune scanned two groups of sites: production sites, which decided whether it was worth building,
270
+ and open-source apps, for comparison. The site list was fixed before the first scan. Each run scans every site once:
271
+ 2 pages × 6 viewports, SSIMULACRA2 delta 2. Saving is the share of all image bytes per page view, with the page fully
272
+ scrolled, averaged over viewports and then over the two pages. When the tool changed, every site was scanned again
273
+ with the same version; v1 is the first run, v4 the current tool (loader adapters and the fixes found since).
274
+
275
+ The `exact + est.` columns are the estimated saving: the exact saving plus the local re-encode estimate.
276
+
277
+ ### Production sites (decide)
278
+
279
+ | site | image KB / view | exact | exact + est. (v4) | exact + est. (v1) |
280
+ | --- | --- | --- | --- | --- |
281
+ | A1 fashion retail, UK | 3,250 | 0.0% | 33.2% | 33.0% |
282
+ | A2 home audio, DK | 1,263 | 5.7% | 53.1% | 47.8% |
283
+ | A3 home audio, US | 3,355 | 13.1% | 38.2% | 13.1% |
284
+ | A4 sportswear, UK | 9,254 | 26.8% | 35.9% | 26.8% |
285
+ | A5 home/rugs, US | 7,714 | 12.7% | 16.5% | 12.7% |
286
+ | A6 outdoor stays, US | 9,078 | 20.7% | 27.7% | 20.8% |
287
+
288
+ Sharpness growth: about 2 KB per view on A4, 0 elsewhere.
289
+
290
+ Kill criterion: a pass needs at least 2 of 6 sites above 15%.
291
+
292
+ - exact only: 2 of 6 (v1 and v4), a pass at the bar
293
+ - exact + est.: 6 of 6 in v4 (4 of 6 in v1), a pass
294
+
295
+ ### Open-source apps (do not decide)
296
+
297
+ | site | image KB / view | exact | exact + est. | of fixable |
298
+ | --- | --- | --- | --- | --- |
299
+ | tailwindcss.com | 4,508 | 0.0% | 4.2% | 9.6% |
300
+ | ui.shadcn.com | 238 | 0.0% | 33.7% | 42.0% |
301
+ | supabase.com | 671 | 1.9% | 20.8% | 48.0% |
302
+ | nextjs.org | 162 | 9.1% | 19.2% | 21.4% |
303
+ | turborepo.com | 77 | 12.0% | 21.4% | 21.4% |
304
+ | langfuse.com | 3,149 | 0.2% | 1.8% | 21.7% |
305
+ | docs.sentry.io | 85 | 0.0% | 0.0% | 0.0% |
306
+ | www.openstatus.dev | 152 | 0.0% | 4.2% | 31.7% |
307
+
308
+ v4: 4 of 8 above 15% (exact + est.), 0 of 8 on exact alone. Developer sites carry few image bytes; the waste sits in
309
+ image-heavy commerce.
310
+
311
+ ### Limits
312
+
313
+ - **Six deciders.** A signal, not proof; the sample is biased to sites without bot walls.
314
+ - **Exact is measured, est. is estimated.** On measured savings alone, 2 of 6 pass. The est. part
315
+ is a local re-encode scored with SSIMULACRA2 against the original; it is a floor where images could not be scored
316
+ (counted per page in the JSON as `qualityNA`, e.g. images that appear only at viewports where no sample was scored).
317
+ - **Plain `<img>` resize** (A1, A2): local resize at the quality that matches the served bytes, so it doesn't add a
318
+ hidden quality saving.
319
+ - A3's jump from v1 to v4 comes from Sanity images on a custom domain served at `q=100`, which v1 could not score.
320
+ - tailwindcss.com/blog rendered no `<img>` at scan time (0 images); counted as 0%.
321
+
322
+ ## Requirements
323
+
324
+ - Node.js 20.9 or later.
325
+ - Chromium for Playwright. Install it once with `npx playwright install chromium`. If it is missing, ImgTune prints
326
+ that command and exits with status 2.
327
+ - GPU scoring is optional. `--gpu` runs SSIMULACRA2 on an NVIDIA GPU through `imgtune-ssimu2-gpu`, an external program
328
+ that is not bundled with the package. If it is missing or fails, the run prints a warning and scores on the CPU.
329
+
330
+ ## Limitations
331
+
332
+ - **Only `<img>`, `srcset`, `<picture>` and CSS background images are measured.** Background layers are kept in their own
333
+ records (`kind: css-background`), and the headline numbers stay `<img>`-only. Their fixes are `not-measured`, or a
334
+ `ceiling-code` from the layout.
335
+ - **Source locations need dev builds.** A production build has no component names or `file:line` in its scan. A built
336
+ page that ships source maps gives the owner component's definition (`via: prod-sourcemap`, never verified as the image's
337
+ own line). The agent matches the other hints by `find` clues, `alt`, `testid` and the loader URL, and marks the
338
+ unmatched usages.
339
+ - **Savings are measured on the pages and viewports scanned.** A usage that does not render on them (a hidden tab, a
340
+ modal, a logged-out view) is not measured. A lazy image that never loads is counted as not loaded.
341
+ - **Est. numbers are estimates.** They come from a local re-encode judged by SSIMULACRA2. Quality is `qualityNA` where the
342
+ original cannot be found. Only exact numbers come from the site's own candidates.
343
+ - **Bot walls and challenges stop a scan.** A page that returns one is recorded as `blocked`, and is not retried.
344
+ - **Quality targets follow the loader.** Only the loaders in the table below expose a quality parameter, so only they get
345
+ quality proposals.
346
+ - **ImgTune does not edit code.** The fixes are made by you, or by the agent skill, and checked by `scan --recheck`.
347
+
348
+ ## License
349
+
350
+ MIT. See [LICENSE](LICENSE). Third-party attributions, including the Optiq-derived SSIM code and the vendored
351
+ SSIMULACRA2 WebAssembly module, are in [NOTICE](NOTICE).
@@ -0,0 +1,295 @@
1
+ Third-party licenses for code shipped in the imgtune package.
2
+ See NOTICE for what each one covers.
3
+
4
+ ================================================================================
5
+ Optiq (src/ssim.ts, adapted; shipped compiled in dist/ssim.js)
6
+ Copyright 2026 Optiq contributors. Licensed under the Apache License, Version 2.0:
7
+ ================================================================================
8
+
9
+ Apache License
10
+ Version 2.0, January 2004
11
+ http://www.apache.org/licenses/
12
+
13
+ TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
14
+
15
+ 1. Definitions.
16
+
17
+ "License" shall mean the terms and conditions for use, reproduction,
18
+ and distribution as defined by Sections 1 through 9 of this document.
19
+
20
+ "Licensor" shall mean the copyright owner or entity authorized by
21
+ the copyright owner that is granting the License.
22
+
23
+ "Legal Entity" shall mean the union of the acting entity and all
24
+ other entities that control, are controlled by, or are under common
25
+ control with that entity. For the purposes of this definition,
26
+ "control" means (i) the power, direct or indirect, to cause the
27
+ direction or management of such entity, whether by contract or
28
+ otherwise, or (ii) ownership of fifty percent (50%) or more of the
29
+ outstanding shares, or (iii) beneficial ownership of such entity.
30
+
31
+ "You" (or "Your") shall mean an individual or Legal Entity
32
+ exercising permissions granted by this License.
33
+
34
+ "Source" form shall mean the preferred form for making modifications,
35
+ including but not limited to software source code, documentation
36
+ source, and configuration files.
37
+
38
+ "Object" form shall mean any form resulting from mechanical
39
+ transformation or translation of a Source form, including but
40
+ not limited to compiled object code, generated documentation,
41
+ and conversions to other media types.
42
+
43
+ "Work" shall mean the work of authorship, whether in Source or
44
+ Object form, made available under the License, as indicated by a
45
+ copyright notice that is included in or attached to the work
46
+ (an example is provided in the Appendix below).
47
+
48
+ "Derivative Works" shall mean any work, whether in Source or Object
49
+ form, that is based on (or derived from) the Work and for which the
50
+ editorial revisions, annotations, elaborations, or other modifications
51
+ represent, as a whole, an original work of authorship. For the purposes
52
+ of this License, Derivative Works shall not include works that remain
53
+ separable from, or merely link (or bind by name) to the interfaces of,
54
+ the Work and Derivative Works thereof.
55
+
56
+ "Contribution" shall mean any work of authorship, including
57
+ the original version of the Work and any modifications or additions
58
+ to that Work or Derivative Works thereof, that is intentionally
59
+ submitted to Licensor for inclusion in the Work by the copyright owner
60
+ or by an individual or Legal Entity authorized to submit on behalf of
61
+ the copyright owner. For the purposes of this definition, "submitted"
62
+ means any form of electronic, verbal, or written communication sent
63
+ to the Licensor or its representatives, including but not limited to
64
+ communication on electronic mailing lists, source code control systems,
65
+ and issue tracking systems that are managed by, or on behalf of, the
66
+ Licensor for the purpose of discussing and improving the Work, but
67
+ excluding communication that is conspicuously marked or otherwise
68
+ designated in writing by the copyright owner as "Not a Contribution."
69
+
70
+ "Contributor" shall mean Licensor and any individual or Legal Entity
71
+ on behalf of whom a Contribution has been received by Licensor and
72
+ subsequently incorporated within the Work.
73
+
74
+ 2. Grant of Copyright License. Subject to the terms and conditions of
75
+ this License, each Contributor hereby grants to You a perpetual,
76
+ worldwide, non-exclusive, no-charge, royalty-free, irrevocable
77
+ copyright license to reproduce, prepare Derivative Works of,
78
+ publicly display, publicly perform, sublicense, and distribute the
79
+ Work and such Derivative Works in Source or Object form.
80
+
81
+ 3. Grant of Patent License. Subject to the terms and conditions of
82
+ this License, each Contributor hereby grants to You a perpetual,
83
+ worldwide, non-exclusive, no-charge, royalty-free, irrevocable
84
+ (except as stated in this section) patent license to make, have made,
85
+ use, offer to sell, sell, import, and otherwise transfer the Work,
86
+ where such license applies only to those patent claims licensable
87
+ by such Contributor that are necessarily infringed by their
88
+ Contribution(s) alone or by combination of their Contribution(s)
89
+ with the Work to which such Contribution(s) was submitted. If You
90
+ institute patent litigation against any entity (including a
91
+ cross-claim or counterclaim in a lawsuit) alleging that the Work
92
+ or a Contribution incorporated within the Work constitutes direct
93
+ or contributory patent infringement, then any patent licenses
94
+ granted to You under this License for that Work shall terminate
95
+ as of the date such litigation is filed.
96
+
97
+ 4. Redistribution. You may reproduce and distribute copies of the
98
+ Work or Derivative Works thereof in any medium, with or without
99
+ modifications, and in Source or Object form, provided that You
100
+ meet the following conditions:
101
+
102
+ (a) You must give any other recipients of the Work or
103
+ Derivative Works a copy of this License; and
104
+
105
+ (b) You must cause any modified files to carry prominent notices
106
+ stating that You changed the files; and
107
+
108
+ (c) You must retain, in the Source form of any Derivative Works
109
+ that You distribute, all copyright, patent, trademark, and
110
+ attribution notices from the Source form of the Work,
111
+ excluding those notices that do not pertain to any part of
112
+ the Derivative Works; and
113
+
114
+ (d) If the Work includes a "NOTICE" text file as part of its
115
+ distribution, then any Derivative Works that You distribute must
116
+ include a readable copy of the attribution notices contained
117
+ within such NOTICE file, excluding those notices that do not
118
+ pertain to any part of the Derivative Works, in at least one
119
+ of the following places: within a NOTICE text file distributed
120
+ as part of the Derivative Works; within the Source form or
121
+ documentation, if provided along with the Derivative Works; or,
122
+ within a display generated by the Derivative Works, if and
123
+ wherever such third-party notices normally appear. The contents
124
+ of the NOTICE file are for informational purposes only and
125
+ do not modify the License. You may add Your own attribution
126
+ notices within Derivative Works that You distribute, alongside
127
+ or as an addendum to the NOTICE text from the Work, provided
128
+ that such additional attribution notices cannot be construed
129
+ as modifying the License.
130
+
131
+ You may add Your own copyright statement to Your modifications and
132
+ may provide additional or different license terms and conditions
133
+ for use, reproduction, or distribution of Your modifications, or
134
+ for any such Derivative Works as a whole, provided Your use,
135
+ reproduction, and distribution of the Work otherwise complies with
136
+ the conditions stated in this License.
137
+
138
+ 5. Submission of Contributions. Unless You explicitly state otherwise,
139
+ any Contribution intentionally submitted for inclusion in the Work
140
+ by You to the Licensor shall be under the terms and conditions of
141
+ this License, without any additional terms or conditions.
142
+ Notwithstanding the above, nothing herein shall supersede or modify
143
+ the terms of any separate license agreement you may have executed
144
+ with Licensor regarding such Contributions.
145
+
146
+ 6. Trademarks. This License does not grant permission to use the trade
147
+ names, trademarks, service marks, or product names of the Licensor,
148
+ except as required for reasonable and customary use in describing the
149
+ origin of the Work and reproducing the content of the NOTICE file.
150
+
151
+ 7. Disclaimer of Warranty. Unless required by applicable law or
152
+ agreed to in writing, Licensor provides the Work (and each
153
+ Contributor provides its Contributions) on an "AS IS" BASIS,
154
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
155
+ implied, including, without limitation, any warranties or conditions
156
+ of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
157
+ PARTICULAR PURPOSE. You are solely responsible for determining the
158
+ appropriateness of using or redistributing the Work and assume any
159
+ risks associated with Your exercise of permissions under this License.
160
+
161
+ 8. Limitation of Liability. In no event and under no legal theory,
162
+ whether in tort (including negligence), contract, or otherwise,
163
+ unless required by applicable law (such as deliberate and grossly
164
+ negligent acts) or agreed to in writing, shall any Contributor be
165
+ liable to You for damages, including any direct, indirect, special,
166
+ incidental, or consequential damages of any character arising as a
167
+ result of this License or out of the use or inability to use the
168
+ Work (including but not limited to damages for loss of goodwill,
169
+ work stoppage, computer failure or malfunction, or any and all
170
+ other commercial damages or losses), even if such Contributor
171
+ has been advised of the possibility of such damages.
172
+
173
+ 9. Accepting Warranty or Additional Liability. While redistributing
174
+ the Work or Derivative Works thereof, You may choose to offer,
175
+ and charge a fee for, acceptance of support, warranty, indemnity,
176
+ or other liability obligations and/or rights consistent with this
177
+ License. However, in accepting such obligations, You may act only
178
+ on Your own behalf and on Your sole responsibility, not on behalf
179
+ of any other Contributor, and only if You agree to indemnify,
180
+ defend, and hold each Contributor harmless for any liability
181
+ incurred by, or claims asserted against, such Contributor by reason
182
+ of your accepting any such warranty or additional liability.
183
+
184
+ END OF TERMS AND CONDITIONS
185
+
186
+ APPENDIX: How to apply the Apache License to your work.
187
+
188
+ To apply the Apache License to your work, attach the following
189
+ boilerplate notice, with the fields enclosed by brackets "[]"
190
+ replaced with your own identifying information. (Don't include
191
+ the brackets!) The text should be enclosed in the appropriate
192
+ comment syntax for the file format. We also recommend that a
193
+ file or class name and description of purpose be included on the
194
+ same "printed page" as the copyright notice for easier
195
+ identification within third-party archives.
196
+
197
+ Copyright [yyyy] [name of copyright owner]
198
+
199
+ Licensed under the Apache License, Version 2.0 (the "License");
200
+ you may not use this file except in compliance with the License.
201
+ You may obtain a copy of the License at
202
+
203
+ http://www.apache.org/licenses/LICENSE-2.0
204
+
205
+ Unless required by applicable law or agreed to in writing, software
206
+ distributed under the License is distributed on an "AS IS" BASIS,
207
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
208
+ See the License for the specific language governing permissions and
209
+ limitations under the License.
210
+
211
+ ================================================================================
212
+ ssimulacra2 0.5.0 (vendored scorer and blur, compiled into vendor/ssimulacra2/ssim_wasm_bg.wasm)
213
+ ================================================================================
214
+
215
+ BSD 2-Clause License
216
+
217
+ Copyright (c) 2022-2022, the rav1e contributors
218
+ All rights reserved.
219
+
220
+ Redistribution and use in source and binary forms, with or without
221
+ modification, are permitted provided that the following conditions are met:
222
+
223
+ - Redistributions of source code must retain the above copyright notice, this
224
+ list of conditions and the following disclaimer.
225
+
226
+ - Redistributions in binary form must reproduce the above copyright notice,
227
+ this list of conditions and the following disclaimer in the documentation
228
+ and/or other materials provided with the distribution.
229
+
230
+ THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
231
+ AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
232
+ IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
233
+ DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
234
+ FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
235
+ DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
236
+ SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
237
+ CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
238
+ OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
239
+ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
240
+
241
+ ================================================================================
242
+ yuvxyb 0.4.0 (compiled into vendor/ssimulacra2/ssim_wasm_bg.wasm)
243
+ ================================================================================
244
+
245
+ MIT License
246
+
247
+ Copyright (c) 2022 Josh Holmer
248
+
249
+ Permission is hereby granted, free of charge, to any person obtaining a copy
250
+ of this software and associated documentation files (the "Software"), to deal
251
+ in the Software without restriction, including without limitation the rights
252
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
253
+ copies of the Software, and to permit persons to whom the Software is
254
+ furnished to do so, subject to the following conditions:
255
+
256
+ The above copyright notice and this permission notice shall be included in all
257
+ copies or substantial portions of the Software.
258
+
259
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
260
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
261
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
262
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
263
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
264
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
265
+ SOFTWARE.
266
+
267
+ ================================================================================
268
+ wasm-bindgen 0.2.129 (glue in vendor/ssimulacra2; used under the MIT option)
269
+ ================================================================================
270
+
271
+ Copyright (c) 2014 Alex Crichton
272
+
273
+ Permission is hereby granted, free of charge, to any
274
+ person obtaining a copy of this software and associated
275
+ documentation files (the "Software"), to deal in the
276
+ Software without restriction, including without
277
+ limitation the rights to use, copy, modify, merge,
278
+ publish, distribute, sublicense, and/or sell copies of
279
+ the Software, and to permit persons to whom the Software
280
+ is furnished to do so, subject to the following
281
+ conditions:
282
+
283
+ The above copyright notice and this permission notice
284
+ shall be included in all copies or substantial portions
285
+ of the Software.
286
+
287
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF
288
+ ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
289
+ TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A
290
+ PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT
291
+ SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
292
+ CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
293
+ OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR
294
+ IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
295
+ DEALINGS IN THE SOFTWARE.