Skip to content

Commit 47b9ed7

Browse files
tinchox5claude
tinchox5
and
claude
committed
feat(compress): downsample oversized images below visible resolution (0.6 factor)
Oversized rasters are already shown far smaller than their natural size, so targeting a fraction below the visible resolution (RES_FACTOR, applied only after the oversize guard) shaves extra decode/raster work at an imperceptible cost on the common heavy-image case. ~-44% toCanvas / -96% SVG output on the image gallery, mean pixel diff < 1/255. Applies via the shared downsampleDataURL core, so <img>, CSS backgrounds and SVG <image> all benefit. README wording updated to 'imperceptible in practice'. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
1 parent 6666f59 commit 47b9ed7

4 files changed

Lines changed: 23 additions & 5 deletions

File tree

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -370,7 +370,7 @@ await snapdom.toPng(el, { debug: true });
370370
371371
### compress
372372
373-
Inlined raster images are embedded at their full natural resolution even when shown in a small box — pixels the output can never display, which only bloat the payload and slow rasterization. With `compress` (on by default) SnapDOM downsamples each `<img>` to the resolution actually visible (`display box × scale × dpr`), preserving aspect ratio and never upscaling. The source codec is kept, so PNGs stay lossless and fidelity is preserved.
373+
Inlined raster images are embedded at their full natural resolution even when shown in a small box — pixels the output can never display, which only bloat the payload and slow rasterization. With `compress` (on by default) SnapDOM downsamples each oversized raster to (a touch below) the resolution actually visible (`display box × scale × dpr`), preserving aspect ratio and never upscaling. The source codec is kept (PNGs stay lossless), and because the image was already shown far smaller than its natural size the quality loss is imperceptible in practice. Images already at or below their visible size are left untouched. Covers `<img>` (incl. cloned canvas/video), non-repeating CSS `background-image`, and SVG `<image>`.
374374
375375
The benefit depends on the export:
376376

‎README_CN.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -372,7 +372,7 @@ await snapdom.toPng(el, { debug: true });
372372
373373
### compress
374374
375-
即使图片显示在很小的区域内，内嵌的位图也会以其完整的原始分辨率嵌入——这些像素在输出中根本无法显示，只会增大体积并拖慢光栅化。启用 `compress`（默认开启）后，SnapDOM 会将每个 `<img>` 缩减到实际可见的分辨率（`显示尺寸 × scale × dpr`），保持宽高比且绝不放大。源编码格式保持不变，因此 PNG 仍然无损，保真度不受影响。
375+
即使图片显示在很小的区域内，内嵌的位图也会以其完整的原始分辨率嵌入——这些像素在输出中根本无法显示，只会增大体积并拖慢光栅化。启用 `compress`（默认开启）后，SnapDOM 会将每个过大的位图缩减到（略低于）实际可见的分辨率（`显示尺寸 × scale × dpr`），保持宽高比且绝不放大。源编码格式保持不变（PNG 仍然无损）；由于图片本来就以远小于原始尺寸显示，实际中质量损失不可感知。已经处于或小于可见尺寸的图片不会被处理。覆盖 `<img>`（含克隆的 canvas/video）、非重复的 CSS `background-image` 以及 SVG `<image>`。
376376
377377
收益取决于导出格式：
378378

‎__tests__/compress.test.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,16 @@ describe('downsampleDataURL', () => {
7474
const out = await downsampleDataURL(src, 160, 120)
7575
expect(out.startsWith('data:image/png')).toBe(true)
7676
})
77+
78+
it('targets below the visible resolution (aggression factor) for oversized images', async () => {
79+
// 1000² shown at 500² → plain cover would be 500px; the aggression factor trims further.
80+
const src = bigPhoto(1000, 1000, 14)
81+
const out = await downsampleDataURL(src, 500, 500)
82+
const { w, h } = await imageSize(out)
83+
expect(w).toBeLessThan(500) // strictly below the plain visible target → aggression applied
84+
expect(w).toBeGreaterThan(150) // but still sane
85+
expect(Math.abs(w - h)).toBeLessThanOrEqual(2)
86+
})
7787
})
7888

7989
describe('compressClonedImages', () => {

‎src/modules/compress.js‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,12 @@ import { cache } from '../core/cache.js'
2424
// ignores it. High enough that the re-encode is imperceptible on top of the downscale.
2525
const LOSSY_QUALITY = 0.92
2626

27+
// Aggression: oversized images are downsampled to BELOW their visible resolution. Heavily-oversized
28+
// images (the common case — big photos shown small) lose nothing perceptible; the loss only starts
29+
// to show on barely-oversized sharp content. Only applied to images that pass the oversize guard —
30+
// never to images already at/below their visible size. Lower = smaller/faster, more aggressive.
31+
const RES_FACTOR = 0.6
32+
2733
// Prefer decode() over onload: onload can fire before the pixels are decodable, so drawing in the
2834
// same tick may produce a blank/partial canvas for large images. decode() guarantees drawable pixels.
2935
async function loadImage(src) {
@@ -65,9 +71,11 @@ export async function downsampleDataURL(dataURL, targetW, targetH) {
6571
if (!nw || !nh) return null
6672

6773
// Scale factor that still covers the visible box, capped at 1 (no upscaling). The 0.95 guard
68-
// band avoids re-encoding for a negligible pixel saving.
69-
const factor = Math.min(1, Math.max(targetW / nw, targetH / nh))
70-
if (!(factor > 0) || factor >= 0.95) return null
74+
// band avoids re-encoding for a negligible pixel saving — gauged on the visible target, before
75+
// the aggression trim.
76+
const raw = Math.min(1, Math.max(targetW / nw, targetH / nh))
77+
if (!(raw > 0) || raw >= 0.95) return null
78+
const factor = raw * RES_FACTOR
7179

7280
const ow = Math.max(1, Math.round(nw * factor))
7381
const oh = Math.max(1, Math.round(nh * factor))

0 commit comments

Comments
 (0)