QUICKUPSCALE

PRACTICAL GUIDE

Pixel-art PNGs and transparency

Trim a transparent PNG and retain its original offset

Start here

Use the PNG trimmer with Individual alpha bounds, then keep the downloaded manifest with the PNG. The supplied 16×12 image becomes 7×6 and belongs at (3,2) on its original canvas.

Expected result:

A tight PNG plus explicit original size, crop rectangle and trim offset. Putting the decoded crop back at its offset restores the visible artwork's position.

What you need

Use the original CC0 16×12 asymmetric PNG. The pack also contains a 1×1 alpha-1 input and an entirely transparent sequence frame.

Original asymmetric artwork with a larger transparent border on some sides

Tested with: Production geometry adapter in local Cloudflare/workerd, desktop Chrome 154/macOS; Node 24.22.0 references and independent Pillow 12.3.0 checks. Device and additional-engine validation remain deferred.

1. Trim the original image

Choose trim-asymmetric.png, keep Individual alpha bounds and select Trim PNG frames. Download the PNG and manifest, or keep both in the ZIP. Bounds use alpha greater than zero: alpha 1 is visible; RGB hidden under alpha 0 does not enlarge the crop.

Actual downloaded seven by six trimmed artwork
Actual browser export: 7×6. This is separate from the pack's generated reference.

2. Keep the original-space coordinates

The actual manifest records originalSize:16×12, sourceRect:(3,2,7,6) and trimOffset:(3,2). Coordinates start at the top left; rectangle right and bottom edges are excluded.

restoredCanvas = transparent 16×12
place downloaded 7×6 crop at x=3, y=2

Use the offset when drawing or importing the result. Placing every crop at (0,0) changes its position. The generic manifest is not automatically an engine-native atlas or pivot file.

3. Compare the decoded plane honestly

The actual output and reconstruction matched an independently captured Canvas-decoded source. Pure Node reference crops retain interior hidden RGB; exterior hidden RGB is intentionally discarded. Browser decoding can normalize hidden RGB and round partial-alpha colors before trimming, so this is not full original-file RGBA or PNG-byte identity.

Retain the original file when those channels matter. Compare opaque pixels, alpha, visible composition and placement separately from encoded PNG compression.

4. Test the smallest and empty inputs

one-alpha1.png remains a visible 1×1 result. sequence-03.png is entirely transparent: its geometry stays 16×12, visible bounds are null and its offset is (0,0). Empty artwork is not replaced by an invented 1×1 crop.

Static PNG only; APNG, corrupt files and selections outside the count, file or memory budgets fail without a partial download. Cancel ends the current job; retry with a valid smaller input.

5. Reproduce the separate reference

Extract the pack, enter padding-trim-workflows and use Node 24 without installing dependencies:

node --test fixture.test.mjs
node generate.mjs
node generate.mjs --check

The 26 original Node cases verify the source and software references. They do not replay the browser worker. The reference declaration and actual schema-version 3 download are distinct files.

Sources and next steps