Designer intent: you are not “merging screenshots.” You are shipping a single raster truth—a banner, atlas strip, or full-bleed composite—where one wrong seam becomes a visible line, a profile mismatch becomes a hue shift, and a fringed alpha edge becomes a brand incident on dark UI. This playbook is for design leads who must choose a lossless PNG stitch path on macOS, document it for ops, and sign off batches on a remote Mac mini M4 with the same parameters every time.
Cross-check pixel-grid discipline with the Figma Autolayout → PNG pixel alignment checklist, color policy with the sRGB / Display P3 delivery checklist, and broader CLI trade-offs with the PSD → PNG batch matrix (sips vs ImageMagick)—then return here for tiling-specific edge cases.
Table of Contents
Material prerequisites
Stitching amplifies upstream mistakes. Before any montage or convert run, freeze these in writing—your acceptance script should be able to reject early.
- Integer geometry: Tile widths and heights are whole pixels; the summed output dimensions match the layout plan (horizontal strip:
W_total = Σ w_i; grid: rows × columns with consistent gutter rules—usually zero gutter for lossless joins). - One color story: Every input PNG is tagged for the same delivery space—typically sRGB IEC61966-2.1 embedded. Mixed P3 masters and sRGB slices will not “average out” at the seam; convert in authoring, not silently at stitch.
- Alpha semantics: Decide straight vs premultiplied for the pipeline and keep it consistent. Straight alpha is the common interchange; premultiplied assets must be unpremultiplied before lossless concat if your tool chain otherwise darkens transparent edges.
- No hidden resampling: Exports must land at 1× the stitch plan (or an integer multiple of one Retina scale you document). Avoid mixed DPI metadata that causes Preview or web loaders to reinterpret physical inches.
- Edge pixels: For “invisible” joins, adjacent tiles should carry the same RGB values where alpha is fully opaque; where alpha ramps, the ramp direction must match so the composite does not notch luminance at the boundary.
Stitching method comparison
Choose a path by who owns ICC mutation, layout complexity, and automation surface—not by which tool you used yesterday.
| Dimension | sips (macOS) | ImageMagick 7 (recommended for stitch) | Notes |
|---|---|---|---|
| Core use | Resize, rotate, assign/embed ICC, format read/write | Montage, append, color pipeline, alpha-aware composite | sips does not replace a full tiling engine; use it before/after stitch for policy steps. |
| Multi-tile layout | Manual sequences only; error-prone | montage, convert … +append, geometry control |
Encode row/column and spacing once in a script; avoid one-off GUI crops for production. |
| Lossless semantics | Preserves raster when no re-encode needed | Use -depth 8 / 16 to match sources; avoid unintended filters |
Any resize or colorspace change can invalidate “lossless”—call it out in the manifest. |
| sRGB discipline | Native ICC embed & assignment | -colorspace sRGB + profile attach when policy says so |
Prefer one authoritative conversion stage—either design export or documented CLI. |
| Alpha / edges | Limited composite control | -alpha set / on, background tests |
Validate on black and white backdrops for halos (see FAQ). |
| Throughput (M4 class) | Fast for single-file ops | Scales well for folder batches with parallel jobs | Pin magick -version and delegate build in the runbook. |
Executable sketches (adjust paths):
- Horizontal lossless row (same height):
magick convert tile_01.png tile_02.png tile_03.png +append -alpha on -colorspace sRGB stitched_h.png - Grid with fixed geometry (example 2×2, no gutters):
magick montage a.png b.png c.png d.png -tile 2x2 -geometry +0+0 -background none stitched_grid.png - Assign embedded sRGB after stitch (when policy routes ICC through sips):
sips -s profile /System/Library/ColorSync/Profiles/sRGB\ Profile.icc stitched_grid.png(verify profile path on host)
If you must interleave normalization (trim, pad, profile fix) and concatenation, document the order: normalize → verify → stitch → final ICC pass—never the reverse without a signed exception.
Remote M4 batch parameters & thresholds
A remote M4 node exists so laptops keep Figma/Sketch responsive while a stable macOS build runs the same script nightly. Treat these as default go/no-go gates—tighten per brand guideline where needed.
- Environment pins: Record
sw_vers,magick -versionImageMagick build, and whether libpng was built with the same optimisations as local CI. - Dimension gate: Output width/height equals the arithmetic sum of tiles ±0 px (no off-by-one from odd tile widths); abort if any input differs from manifest.
- Profile gate: Either every output shows embedded sRGB IEC61966-2.1 or the ticket carries an approved Display P3 exception with viewer list—no mixed profiles in one stitched file.
- Alpha gate: Sample the seam: difference of adjacent RGB at full opacity must be 0 on the seam column/row; in semi-transparent hairlines, max delta per channel ≤ 1 on 8-bit (stricter for premium SKU).
- Byte ceiling: After lossless optimization (e.g.
oxipngat agreed level), flag stitched assets > 1.5× the sum of input PNG sizes unless justified by new metadata. - Concurrency: Run N parallel jobs ≤ CPU cores − 1 to leave headroom for PNG decode spikes; write outputs to a
staging/tree, then atomicmvtorelease/.
Export acceptance
Binary checklist for PM and ops—subjective “looks fine” is not a release criterion.
- Visual A/B: Compare stitched PNG against a non-destructive reference (design tool re-export or layered PSD composite flattened once) at 100% zoom; scroll the seam at 400% on both light and dark backgrounds.
- Transparency: No visible fringe on UI black (#000000) and paper white (#FFFFFF) backdrops; if fringe appears only on one, suspect premultiplication mismatch.
- Color: Spot-check brand swatches with a color picker on seam-adjacent solid fills; ΔE to spec within your brand tolerance—often tighter at seams than elsewhere.
- Metadata: Strip or preserve EXIF per policy; never ship unexpected ICC + embedded untagged pairs.
- Traceability: Manifest includes input hashes, command line or Makefile target, stitch dimensions, and approver ID—required when audits ask “which build stitched this?”.
FAQ
Q: Why do seams glow after stitch when each tile looked fine alone?
A: Usually different gamma handling or a resize sneaking in on one tile. Ensure identical color management flags and inspect whether any tile was re-encoded through a viewer that applies monitor compensation.
Q: Can I rely on sips alone for campaign-width stitching?
A: No for serious grids—use ImageMagick (or equivalent) for layout, then use sips where macOS-native ICC assignment is your policy choke point.
Q: Is premultiplied alpha ever OK?
A: Some game and GPU pipelines prefer it, but for design PNG interchange, stay on straight unless the downstream spec is signed—premultiplied hairlines behave badly when recomposited.
Q: Remote M4 vs local MacBook for batches?
A: Same OS, pinned tools, and unmigrated thermal limits mean repeatable wall-clock times and fewer “works on my machine” stitch results.
Next steps
Ship long-image and atlas stitches from a dedicated remote Mac so your team keeps one ICC and alpha story. Open the MacPng homepage, compare pricing and packages (no login required to view), and browse Tech Insights for more design-delivery and automation playbooks.
Run lossless stitch QA on a stable M4 host
Same baseline ImageMagick/sips versions, overnight batches, and room for manifest-backed acceptance—ideal when seams and color must hold across releases.