Full-sequence GIF to APNG: keep every delay and alpha layer, but watch mobile decode memory and LCP before hero animations tank the page
`animated-gif-apng` moves long UI demos, micro-interactions, or tutorial GIFs to truecolor APNG; risk spikes when frame counts grow because decode buffers and main-thread paint cost can exceed equivalent short GIFs. Multiple APNGs on one view can stutter budget phones. Set hard budgets for “keep every frame” vs size/perf: cap longest edge, factor static backgrounds into a single base frame, or downsample transitional frames. Validate with performance overlays and memory traces, not only eyeballing on lab Wi‑Fi.
Long GIF→APNG: lock the frame table and duration, optimize regions/background reuse, then sample jank on low-end hardware
- Export a frame manifest—index, delay, and whether each update is full-frame—match it to the design spec; mark duplicate holds and unnecessary full-canvas `fdAT` blobs for removal.
- Soak-test ten minutes on a mid iPhone and a three-year-old Android, watching thermal throttling; log file size and TTFB so LCP budgets are not blown by a fat first response.
- If still over budget, ship tiers (`hero` full quality vs `feed` downscaled) with CMS fields so ops cannot drop a 4K-class APNG into a list card by mistake; version filenames aggressively.
Full-sequence FAQ: frame counts, memory, tiering, multiple instances
GIF had dozens of frames; APNG is multiples larger—is truecolor always the culprit, or are we wasting bytes on redundant full frames?
Truecolor can hurt, but waste often comes from repeating full frames or huge transparent regions. Check per-frame compressed sizes, hoist static backgrounds, merge identical delays. Trim the largest few frames first—global bitrate cuts alone rarely fix structural bloat.
Three small APNG icons stutter the page—too much parallel decode or a dispose chain that over-composites?
Profile a single file in isolation: if one file pegs CPU, resolution or blend chains are too heavy. With multiple instances, pause off-screen animations via `IntersectionObserver`, avoid stacking translucent APNGs in scrollers, and fall back one slot to CSS or Lottie when needed.
Product demands “no pixel lost” but perf fails—how do we justify merging transitional frames with evidence?
Run perceptual diff or short flicker clips on merge candidates, pair with before/after byte and timeline tables, and define acceptable thresholds in writing. Data beats subjective “looks fine” debates in review.
A couple frames drift in color vs the GIF—gamma issue or browser color management divergence?
Rule out mismatched ICC in sources first, then side-by-side captures on the same calibrated display. If Safari and Chrome disagree, inspect color matching paths. Avoid signing off on uncalibrated laptops.
Accessibility needs reduced motion—what companion asset should ship beside APNG?
Honor `prefers-reduced-motion` with a single-frame PNG or a low-frame variant; expose a `poster` and swap `src` under media queries. Do not rely on OS defaults without supplying an alternate URL—reviewers still flag it.