Screenshots to GIF: Looping App Demos for Site and README

Store listing screenshots are still. Product sites, GitHub READMEs, and launch posts often need a short looping demo—three to six frames you already designed, played in order—without recording the simulator again.

We shipped that workflow as Image to GIF. Add PNG/JPG/WebP frames, drag to reorder, set a shared delay or per-frame delays, choose infinite or counted loops, and export at ratios such as 9:19.5, 9:16, 1:1, or 16:9. The right-hand preview plays live; Create GIF shows the real file size before download. Encoding uses open-source gif.js in Web Workers. Images are never uploaded.

Hard boundary first: this is not an App Store app preview. Apple expects on-device footage with fixed duration and codecs. Dropping a GIF into the App Preview slot fails review. Use GIFs for websites, docs, social posts, and internal reviews.

When a GIF helps—and when it does not

Hands-on: many stills → one GIF

1. Open /en/tools/image-to-gif and drop 3–6 store-ready frames (or UI keyframes). Reorder with drag or ‹ ›.
2. Frame delay: 800–1500 ms for readable demos; 400–600 ms for snappy cuts. Per-frame mode helps when one beat needs a longer pause.
3. Loop: infinite for site autoplay; set 2–3 plays if a channel feels noisy with endless loops.
4. Size presets: portrait store art → 9:19.5 or 9:16; README banners → 16:9; square comparisons → 1:1. Mismatched ratios can letterbox with a fill color or crop-to-fill.
5. Quality: flat UI screenshots usually look sharper without dithering; photos/gradients may need dithering to reduce banding (larger files).
6. Click Create GIF and read the byte size. Above ~2–3 MB, lower width, drop frames, or use Fast quality, then encode again.
7. Embed on the site or README. For a static social card, use /en/tools/og-share.

Width, frame count, dithering

GIF allows 256 colors per frame. Heavy gradients band—flatten the stills before import when you can; that beats relying on dither alone.

Story order beats frame rate

Most weak GIFs fail because the sequence never finishes one argument:

1. Frame 1: the outcome (“export in 30s”, “works offline”)—not the settings screen.
2. Middle: one or two steps that deliver that outcome.
3. Last: a confirmation/export state that still makes sense when the loop restarts.

For longer still sets, see the five-frame storytelling template; compress to 3–6 frames for GIF and cut mood shots first. Sketch order on /en/tools/drawnix if needed, then export stills.

How it plugs into the screenshot pipeline

1. Design stills in /en/preview (or your design tool)
2. Multi-size opaque exports via /en/tools/batch-processor when needed
3. Pick 3–6 hero frames for /en/tools/image-to-gif
4. Validate stills with /en/tools/screenshot-check before store upload—never upload the GIF as a screenshot

Transparent PNGs are composited onto your chosen background before encode (avoids single-color GIF transparency fringing). For true transparent motion, use APNG or animated WebP elsewhere; this tool does not keep alpha.

Pitfalls we hit while building the tool

Encoder scripts load from /vendor/gifjs/ (gif.js, MIT). Trust the on-page byte size after encode.

GIF vs MP4 for the same frames

For this site’s scope we ship GIF because it matches “paste into README / docs” with zero player UI. If you already have a polished MP4 pipeline for ads, keep it—use this tool when you need a no-player loop from stills you already exported.

Checklist

• Are you accidentally treating the GIF as an App Preview or Play preview video?
• Does the order complete one benefit, not a random slideshow?
• If the file is heavy, did you cut width/frames before hoping compression alone helps?
• Are captions still readable after you shrink width?

Need a Play banner still? Use /en/tools/feature-graphic. Keep portrait listing shots in the screenshot editor—do not mix slots.