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.
- The file extension remains
.png. - The MIME type is still
image/png. - 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.
