A character can look smooth in transparent PNG frames but develop jagged edges or speckled colour in an animated GIF. This is not necessarily a broken source image: the formats preserve different information. Check the intended delivery format before polishing individual frames.
What each format can preserve
A PNG frame can store a full alpha channel, so an edge pixel can be partly transparent. GIF uses indexed colours and a designated transparent palette index; a pixel is either transparent or not. Each colour table has at most 256 entries. An encoder may use different palettes or frame rectangles, so do not assume the entire animation necessarily shares one simple global palette. The MDN image-format guide explains the format constraints.
The practical consequence: a GIF made from soft, antialiased frames must approximate partial transparency. An encoder may use a threshold, a matte or dithering; the exact result depends on its settings. A matte chosen for a dark page can produce an edge halo on a light page.
A repeatable comparison
- Keep the original transparent PNG frames and make a separate GIF preview. Do not overwrite the source frames.
- Preview both over black, white and a representative game background. Inspect hair tips, feathers and translucent effects as well as broad body areas.
- Play the GIF at its intended size and speed. Dithering or palette changes that are unobtrusive in one frame can shimmer between frames.
- If the destination supports it, compare a lossless animated format with alpha, such as APNG, or ship the PNG frames or sprite sheet to the game instead. Confirm the target engine and browser support before choosing a format.
- Recheck timing and looping after export: the preview is a separate artifact and can behave differently from the runtime animation.
For native pixel art, preserve the intended limited palette and hard transparency; avoid smoothing or adding half-transparent pixels merely to make a preview appear larger. For painted 2D art, preserving soft edges may be more important than GIF compatibility.
MotifDeck is an AI game-art workspace where creators can inspect transparent extracted character frames and choose their timing. These format checks apply regardless of how the frames were made.
By Allen Zhao for MotifDeck, with AI assistance. The author is affiliated with MotifDeck.
Top comments (2)
Good list. Two GIF-specific things that bite animated characters and are easy to miss in a single-frame check:
Disposal method. If the encoder writes frames with "do not dispose" and only stores the changed rectangle, any pixel that becomes transparent in frame N still shows whatever frame N-1 drew there. A walking character then leaves a ghost trail. You want "restore to background" (disposal 2) for sprites that move inside the canvas, and it is worth checking in the browser, not just in the editor preview.
Frame delay. GIF delays are in hundredths of a second, and most browsers treat 0 or 1 as roughly 10 (100 ms). So a 60 fps or "as fast as possible" export plays much slower on the web than the source. 2 cs (50 fps) is about the fastest that behaves the same everywhere, and 12 fps sources round to 8 cs, which is close but not exact.
검은색·흰색 배경에서 가장자리만 보는 데서 끝내지 않고 실제 크기와 속도로 재생해 팔레트의 흔들림까지 확인하는 순서가 유용하네요. 원본 PNG와 배포용 미리보기를 별개 산출물로 두면 투명도 문제를 고치다가 원본을 잃는 일도 줄이겠습니다. 반복 재생 전환부까지 같은 비교에 넣어보면 좋겠네요.