htmlapng

How can a png move in a browser without network change and no special js code?


I tried to extract this motion sticker from steam. But there is something weird: It is animated.

How can this PNG image move? It seems there is no special JS code or CSS, not even any network change.


Solution

  • As @async pointed out: Animated PNG files do exist. As per MDN Docs:

    [APNG] extends the PNG standard to add support for animated images. Conceptually similar to the animated GIF format which has been in use for decades, APNG is more capable in that it supports a variety of color depths, whereas animated GIF supports only 8-bit indexed color.

    Essentailly it is a better gif file. The frustrating thing about it is that files of that format can end in .apng or .png. Why is that? Well as per Wikipedia:

    An application reading a PNG file is meant to ignore any chunks which it does not understand,[13] making APNG backwards compatible.

    So if you use software not supporting it, you should get a still image.