Who this is for: e-commerce designers and operations owners who ship detail long images as stacked PNGs—not one giant bitmap in the DOM. You care about slice height, predictable naming, byte volume per slice, lazy loading without layout shift, and a repeatable acceptance checklist before assets hit the CDN. Running batch export and optimization on a remote Mac (M4-class) keeps presets, fonts, and logs in one place.
What you get: a decision matrix (when to slice, how tall, which PNG mode), executable export and naming rules, max single-edge pixel guardrails, transparent-edge handling so seams stay invisible, a folder + log layout for remote batch jobs, and a short pre-launch FAQ for placeholders and Core Web Vitals.
Align byte and fringe policies with our e-commerce white-background PNG batch QA guide. For palette versus truecolor depth, use the PNG-8 palette and dithering matrix. For chained CLI validation on the same host, see OpenClaw PNG CLI chain and retry templates.
Table of Contents
Long-Image Scenarios & Performance Risks
Detail strips sell the product—but a single multi-megapixel PNG forces the browser to decode everything up front, blocks the main thread on mid-tier phones, and wrecks Largest Contentful Paint when the hero sits inside the same scroll stack. Splitting into slices lets you lazy load below the fold, cap memory per decode, and parallelize CDN fetches. The failure modes are predictable: visible seams at slice boundaries, layout shift when height reserves are wrong, oversize files from unnecessary truecolor, and naming collisions when ops uploads “final_final” slices without a manifest.
Decision matrix (ship / revise):
| Signal | Green light | Red light (fix first) |
|---|---|---|
| Decode cost | Each slice ≤ ~2–4 MP typical; above-the-fold slice count ≤ 2 for first paint | One PNG > 6 MP or > 1.5 MB after lossless pass on mobile tier |
| Scroll UX | Slices align to section breaks (spec table, colorways, legal) | Horizontal cuts through body copy or price badges |
| Transparency | Alpha only where the template needs it; matte policy documented | Accidental alpha on “white” panels causing gray wash on dark themes |
| Ops traceability | Manifest row per file: SKU, campaign, slice index, preset version | Folder-only QA with no versioned preset ID |
Slice Height & Breakpoint Matrix
Slice height is a compromise between request count, per-slice weight, and design integrity. Treat mobile first: your artboard width should match the storefront’s master detail width (often 750–1125 px for @2x from 375–375 logical layouts). Height should land near one to two viewport scrolls of content at that scale, then be nudged so cuts sit in gutters, not through glyphs.
| Reference width (CSS px) | Typical @2x artboard width | Starting slice height (px) | Notes |
|---|---|---|---|
| 375 | 750 | 1400–2000 | Shorter slices if hero + first feature must LCP separately |
| 390 | 780 | 1500–2100 | Match iPhone family; re-check safe areas for notches |
| 428+ | 856+ | 1600–2400 | Wider cards tolerate taller slices if byte caps pass |
| Desktop companion | Often 1200–1600 | Reuse mobile slices or regenerate with separate manifest | Never silently stretch mobile PNGs beyond intrinsic width |
Pair the table with a byte budget per slice (example: warn > 400 KB, fail > 800 KB for 750–900 px wide truecolor strips after oxipng). Tune to your CDN contract and PDP telemetry—not generic blog numbers.
PNG-24 vs Indexed-Color Thresholds
Long details often mix flat UI blocks with photographic inserts. Use a threshold table so designers do not hand-tune every file.
| Visual characteristic | Recommended mode | QA gate |
|---|---|---|
| Gradients, soft shadows, skin tones | PNG-24 (+ alpha if needed) | Zoom 100%: no banding; compare against master PSD |
| Flat icons, ≤ 6 colors, hard edges | Indexed PNG (≤ 256 colors) | pngquant preset locked; ΔE spot-check corners |
| Text on textured photo | PNG-24 | Subpixel clarity check on sRGB reference display |
| Repeating pattern blocks | Consider WebP/AVIF for non-SKU decorative rows; keep PNG where CMS requires it | Document exception in manifest “codec” column |
Remote Mac Batch Directories & Logs
On a remote Mac M4, isolate each campaign run so ops can diff outputs and re-queue failures without touching designers’ working folders.
Suggested tree:
~/batch/pdp-long/{campaignId}/{presetVer}/in/— source PNG or PSD exports (read-only after ingest)slice/— machine-generated slices named by manifestopt/— lossless or lossy optimized outputs ready for CDNlogs/run-{timestamp}.jsonl— one JSON object per file: path, bytes in/out, tool versions, pass/failquarantine/— files that failed dimension, alpha, or byte rules
Acceptance checklist (batch owner signs off):
- Manifest row count matches
opt/file count ± documented skips. - No slice exceeds agreed max single-edge pixel (commonly 4096 px on the long edge per file for broad mobile GPU safety; lower if your analytics show older devices).
- All slices embed the same ICC profile policy (usually sRGB) as frozen in README.
failed.jsonlempty or every line has an owner ticket.- Spot-check 0.5–1% of slices for seam alignment against the composite reference.
Pre-Launch Lazy Load & Placeholder FAQ
What placeholder strategy best pairs with lazy-loaded PNG detail slices?
Reserve space with the slice’s real width and height (HTML attributes or CSS aspect-ratio). Use a tiny LQIP, dominant-color background, or skeleton that matches section tone—avoid one blurred 40 px thumb stretched full width. Load slices with loading="lazy" (and compatible native lazy for your stack) while keeping the first one or two slices eager if they carry LCP.
How tall should each PNG slice be on mobile PDPs?
Start from the matrix above: roughly 1.2–2.0× the visible viewport height in pixels at your export scale, then adjust so cuts fall between modules. Validate against longest common devices in your analytics, not only the design team’s phones.
When is PNG-24 mandatory versus indexed PNG for long detail strips?
Default to PNG-24 whenever gradients, soft edges, or alpha against variable backgrounds appear. Indexed PNG is acceptable only after palette quantization passes your banding and fringe checks—see the threshold table and the linked PNG-8 matrix.
Why run slice export and optimization on a remote Mac M4?
It gives you a stable, always-on exporter with fast storage and unified memory for parallel jobs, keeps laptop thermals out of the critical path, and centralizes JSONL logs for audits. Your team connects via SSH/VNC, pulls opt/, and uploads to the CDN with manifest hashes.
Executable Steps: Export Parameters, Naming, Max Pixels & Transparent Edges
Export parameters (freeze in preset v202604 or your internal ID):
- Color: sRGB master, embed profile; disable “assign only” tricks that drop embedding.
- Dimensions: width = storefront master; height per slice from guide rails, even heights preferred for some encoders.
- Bit depth: 8 bpc; interlacing off for PDP assets (predictable decode).
- Post-export: lossless pass (e.g. oxipng) on all slices; optional pngquant only on rows marked “palette OK” in manifest.
Slice naming rule (regex-friendly):
{tenant}_{skuOrCampaign}_{sliceIndex3}_w{width}px_h{height}px_{sliceKind}_srgb_v{preset}.png
sliceIndex3— zero-padded (001,002) for sort stability.sliceKind—hero,spec,story,legalto help front-end map lazy thresholds.- Lowercase keys only; never rename after QA without bumping
v{preset}.
Max single-edge pixels: enforce per manifest. A practical default is 4096 px maximum on any edge per PNG; if marketing demands 5K+ masters, downscale for web slices and keep archival TIFF/PSD separate.
Transparent edge handling: do not slice through semi-transparent shadows—shift the cut line into a solid background band. If two adjacent slices both use alpha, add a 1 px overlap in the master before export or feather the seam in the design file so compression does not introduce a hairline. For “floating” products, keep the entire cutout inside one slice when possible; when unavoidable, duplicate a 2–4 px matte strip into both neighbors and verify on light and dark PDP themes.
Rent a Remote Mac M4 for Slice Export, Optimize & Manifest QA
Offload long-image slicing, PNG optimization, and JSONL-logged batch checks to a dedicated Mac mini M4—consistent sRGB exports, stable disks, and access from anywhere. Browse plans without logging in, then rent monthly and connect via SSH or VNC.