Avoid Common Pitfalls When Creating iMessage Stickers
This guide walks you through iMessage sticker creation, covering Apple’s specifications, size and animation frame limits, format choices between GIF and APNG, compression techniques, and practical tools, all illustrated with real‑world examples and user feedback.
iMessage, Apple’s built‑in messaging app, was once considered limited because it only supported text and video, lacking rich stickers. With iOS 10, Apple introduced new features such as doodles, message effects, and a sticker store, allowing developers with an Apple account to upload custom stickers.
Below is a detailed account of the challenges faced while creating stickers for the "Hujiang San Chong" series and the solutions discovered.
Official Specifications
Apple requires sticker images to be PNG, APNG, GIF, or JPEG, each under 500 KB. Recommended dimensions are between 100 × 100 points and 206 × 206 points, with three size categories:
Small: 100 × 100 points @3× (300 × 300 px)
Medium: 136 × 136 points @3× (408 × 408 px)
Large: 206 × 206 points @3× (618 × 618 px)
Practical Experience – Pitfall Log
Pitfall 1 – Sticker Size
Testing showed that sending Medium or Large animated stickers caused screen‑freezing on most devices, so Small (100 × 100 points) was chosen.
Pitfall 2 – Animation Frame Count
Although the spec limits each file to 500 KB, files larger than ~200 KB caused noticeable lag when multiple stickers were sent together. Keeping each file below 126 KB and reducing frames from 38 to 20 preserved smooth animation while avoiding freezes.
Pitfall 3 – File Format
Apple allows PNG, APNG, GIF, or JPEG. GIF, introduced in 1987, uses an 8‑bit palette (256 colors) and offers limited transparency, often resulting in jagged edges. APNG, released in 2004, extends PNG with lossless compression, supports full alpha channels, and stores animation data in three chunks: acTL (control), fcTL (frame control), and fdAT (frame data).
Concept Introduction
GIF’s 8‑bit color and binary transparency lead to poor visual quality, especially on dark backgrounds. APNG retains PNG’s lossless compression, supports indexed, grayscale, and RGB color models with alpha, delivering superior appearance.
While GIF can handle transparency, it cannot blend semi‑transparent pixels, causing visible jaggies. APNG’s ability to share unchanged pixels between frames and optionally apply lossy compression to differing regions greatly reduces file size.
Therefore, APNG was selected for the final stickers.
Note: APNG’s browser support is limited (Firefox and Safari), whereas GIF works everywhere, but modern HTML5 frameworks can provide APNG fallback.
Export Method
To produce APNG stickers:
Export the animation as a PNG sequence using tools like Photoshop or After Effects.
Combine the PNG sequence into an APNG file with plugins or dedicated tools such as iSparta’s image conversion utility, which works on Windows and macOS and can batch‑process files with compression.
User Feedback
The project yielded three sticker packs, totaling 108 stickers, which received positive responses from Hujiang users after launch in November.
Although this summary arrives late, the shared experiences aim to help others avoid the same “old pitfalls.”
Hujiang Design Center
Hujiang's user experience design team, the core design group responsible for UX design and research of Hujiang's online school, portal, community, tools, and other web products, dedicated to delivering elegant and efficient service experiences for users.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.
