Starting from Chrome 59, APNG is supported, with the exception of IE browser.
To create APNG, you can try using "screenToGif", which allows you to record screen and convert it to GIF, video, and APNG. It is very powerful.
1. Introduction#
APNG, short for "Animated Portable Network Graphics", is a bitmap animation extension of PNG that can achieve dynamic image effects in the PNG format. However, my father PNG has never recognized me and thinks I am a bastard. Sigh, the past is a long story. Back in the day, my father PNG personally raised a child named MNG, hoping it could become the standard and mainstream for PNG animation. Unfortunately, MNG was not ambitious and wasted too many social resources, to the point where my father didn't even bother with it.
Fortunately, Mozilla didn't despise me and has been nurturing me, hoping that one day I can replace GIF and become the standard for the next generation of dynamic images. By the way, I am 10 years old this year, born in 2004. Because no one (many browsers) supports me, especially my father PNG who refuses to acknowledge me as his own, and still clings to that useless MNG, I have been growing up silently. However, recently something happened that caught everyone's attention.
Although Chrome and other Blink/webkit-based browsers are busy pampering their child webP and ignoring APNG, with the support of iOS, APNG seems to have seen the dawn of dominating the industry!
2. Stay calm and introduce the basic features#
Since there are many APNG examples below, if you want to see the real animation effects, it is recommended to use the FireFox browser or Safari 8 browser, or install the APNG decoding plugin from here.
Why do different browsers display APNG differently? This is the amazing feature of APNG, it is naturally downward compatible. To understand the reason, let's talk about the composition principle of APNG! First of all, APNG is a PNG animation, just like a GIF animation, it is composed of many frames. Among them, the first frame is a standard PNG image, and the subsequent frames not only contain PNG images, but also contain animation and frame speed data. So, if the browser doesn't recognize the animation data behind APNG, it's okay because the first frame is standard and can be displayed without any problem. If it supports APNG, then the subsequent frames will be played and the animation effect will be displayed!
Taking the beautiful APNG avatar as an example, the avatar is a 2-frame APNG image. The first frame is a standard PNG image that says "Your browser does not support APNG", and the second frame is an image that says "Your browser supports APNG" along with frame playback interval time, playback count, and other data. Therefore, the Chrome browser displays frame 1 (because it doesn't recognize APNG), and FireFox displays frame 2 (the animation plays only once). An article on pingwest
Some specific terms are not necessary to be concerned about (if interested, you can check here), mainly focus on the three arrows in the SVG graphics (yes, it's SVG, IE7/IE8 bypass). You can see that the first frame IDAT is still IDAT (PNG that all browsers recognize), but the subsequent second and third frames change to fdAT, and some other things are mixed in (not standard PNG anymore).
After talking so much, I haven't promoted the advantages of APNG compared to GIF yet. The obvious difference is in image quality. GIF supports a maximum of 256 colors and does not support alpha transparency channel. These two issues often result in poor quality for GIF in these two types of graphic animations:
-
Images with rich colors, such as video GIF screenshots (insufficient colors);
-
Images with semi-transparent effects (either fully transparent or solid color). You can see the comparison image below (from the official APNG parent, Mozilla) to feel it, so as not to say that APNG is inferior - everyone praises it.
The delicate effect sacrifices the size of the image, but this only applies to images with rich colors and alpha transparency (if the colors are not rich, you can save them as png8 Alpha transparent using FireWork, with the same size or even smaller than GIF).
Speaking of comparison, we have to mention APNG's competitor, webP. It can also achieve high-quality image animations. Its browser support dominates Chrome and Android. Every father has his own selfishness, APNG's father ignores webP, and webP's father ignores me. Sigh, who will have the upper hand between APNG and webP in the future, it's really hard to say. Currently, APNG is supported by FF/Sarari and iOS, while webP is supported by Chrome/Opera and Android. They both have their own territories. It's hard to say who will win.
3. Unity is strength#
The support of APNG by iOS8 is of great significance, indicating that high-quality dynamic images can now start to dominate the mobile side (PC side is hindered by IE's lack of support, haha). As a result, there are new technical options for handling functions that were previously difficult.
OK, let's take an example. The international version of QQ used to have a splash animation that was complex, delicate, and dynamic. Due to the poor image quality of GIF animation, it was abandoned and replaced with a video embedded in the client to achieve the desired effect. However, now that iOS8 supports APNG, there is a new technical solution for high-quality animation effects. Designers can directly create APNG animation images for developers, and a simple embedded page can have animations that can be updated at any time (such as for holidays), with excellent effects. As for Android, webP can be used.
For ordinary web app pages, we can also combine APNG and webP to achieve the desired delicate animation effects by determining and displaying different animation formats. Isn't that great?
4. APNG creation, fire, fire, fire (this is exciting because no one read the above)#
Regarding APNG resources, you only need to go to this place: http://littlesvr.ca/apng/. It has almost all APNG creation software (currently 9), as well as APNG to GIF conversion, GIF to APNG conversion, and APNG decompilation software (located at the bottom of the page).
I used the following software to create mine: APNG Anime Maker. Download it from this page (the last one). The software is small and can be opened directly without installation. The steps are as follows:
Open the software, click "open", select the sequence of images, adjust the interval time between each image (default is 100 milliseconds), and other information such as total playback count. Adjust it to 1000 milliseconds, click the button indicated by the arrow to apply it to all images. Loop 0 means infinite loop. Click "save" to save the images.
As a result, we have the following APNG animations:
