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.

Hujiang Design Center
Hujiang Design Center
Hujiang Design Center
Avoid Common Pitfalls When Creating iMessage Stickers

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.”

iOSAPNGGIFiMessagestickers
Hujiang Design Center
Written by

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.

0 followers
Reader feedback

How this landed with the community

Sign in to like

Rate this article

Was this worth your time?

Sign in to rate
Discussion

0 Comments

Thoughtful readers leave field notes, pushback, and hard-won operational detail here.