Animated PNGs

While using Tencent Docs today, I noticed this VIP badge image. The URL ends with .png, yet it’s animated. I always thought PNGs were static, so I dug around and learned that PNGs can, in fact, be animated. Here’s a quick summary to fill that knowledge gap.

Animated PNGs

The proper term is APNG.

1. The file extension remains .png.
2. The MIME type is still image/png.
3. PNG supports a transparent channel.

In other words, you can’t distinguish static PNGs from animated ones just by looking at the file metadata.

PNG vs. WebP

Besides PNG, we often use WebP for animated images. WebP files tend to be smaller, so if the browser supports it, WebP is usually the better choice.

Example

Let’s compare the Tencent Docs VIP badge in both formats.

WebP

PNG

Note: Tencent Docs auto-negotiates the best format. So even though the URL ends in .png, modern browsers receive WebP data behind the scenes.

Final Thoughts

That’s a quick primer on animated PNGs.