Why create an animated png over a gif?
The gif format has many uses and is still widely used but it does have some limitations. The apng or animated png format improves on those areas, offering smaller file sizes, better colour depth, 24-bit transparency and support from all modern browsers with a static first frame fallback for those that don’t support it. You can see a list of browsers that support apng here.
Apart from file size, the main reason you would likely be forced to use apng is because of the jagged edges a transparent gif produces, in most cases these are unusable. These are a limitation in the gif format but apng offers much improved quality for transparency.
How to make apng files with transparent backgrounds
You can create your apng animation in Photoshop using the animation panel as you would a gif, but you will notice there is no option for apng export (this is available in Adobe Animate for those who use it). So instead we need to export the frames individually.
Export animation frames with Photoshop
To do this, go to file > export > render video and choose ‘image sequence’ and set the alpha channel to ’Straight Unmatted’. Then you need to select your frame rate, you may need to tweak this to export the desired amount of frames. Before rendering the files be sure to create a folder to save them in to because there will be a lot of files.
Export animation frames with After Effects
In After Effects you can add your animation to the render queue as normal and under the output module settings you can select ‘png sequence’. Then select ‘RGB + Alpha’ under the channels menu.
Turning an image sequence in to an apng (animated png)
Then to create an animated png (apng) file from the image sequence I used the ezgif free online tool but other options are available. I liked the ezgif tool because it offers features like retiming delay on the frames, selecting the loop count, crossfading frames and even stacking them.
Should I use apng instead of gif?
There is definitely not a one case fits all for these two formats but for interactive web elements I would certainly say that going forward, apng will be my format of choice. The saving on file size have a positive impact on page load, the broader colour depth is perfect for anything involving photos and the cleaner edges for transparency are a game changer for how I work with animated images.
The workflow is a bit more fiddly at the moment but it won’t be long until export tools are made available in other programs and the extra effort is really noticeable and worthwhile in the final output (no so much in this example). So in short I would say if you want transparency layers, smaller file size and a broader colour palette I would recommend you create an animated png over a gif file. Remember to always be careful with file sizes for anything being delivered online, use them sparingly as overuse will create long load times.
Supporting all browsers
If you want to support all browsers with something like this, then you need to consider using the WebP format, then falling back to APNG for Safari/iOS users and finally having a static image fallback for browsers like Internet Explorer. This will require you to use the picture tag to serve up multiple images formats. This is a lot more overhead but you will make a huge file size saving using WebP on those browsers that support it, so it is worth considering. You can make WebP images in the same online tool here so it is worth seeing the different between the two. You can see the browser support for WebP here.
My Example Animated PNG
Below is what my test animated png looked like, ironically the preview is a gif. A monstrosity I know and not the cleanest background removal but it was a fun test to play around with the animated png format. The frame rates for animated pngs can be a lot smoother than my example, it was just a quick test consisting of 5 frames. I combined CSS animations with my Animated png and that allowed me to separate the circle behind and animate the image on top independently. You can see the page it is being used on here.