Menu

1 / 3

APNG vs GIF for Small Web Animations: Transparency, Loops and File Size

DEV Community: frontend·Zippic·about 17 hours ago
#Iu4A9s46
#devtofrontend#devto#dev#apng#frame
Reading 0:00
15s threshold

Spinners, success checkmarks, a waving mascot on an empty state, chat stickers: small looping animations still get exported as GIF by default, mostly out of habit. GIF works everywhere, but it was designed in 1987, and its limits show up quickly once the animation has soft edges or sits on a dark background.

APNG (Animated PNG) is the other format that every major browser plays natively without JavaScript. Here is when it beats GIF, when it doesn't, and a few practical details about loops, timing and file size.

TL;DR: use APNG when the animation has soft edges or translucency, set num_plays to 1 for one-shot animations, keep frame delays in multiples of 10 ms, and trim frames before you compress.

What GIF can and can't store

From MDN's image format guide:

Each GIF pixel is an 8-bit index into a palette of 24-bit colors, and the palette has at most 256 entries.…

Continue reading — create a free account

Join HashtagPLUS to read full articles, follow hashtags, vote, and join the conversation.