APNG is coming to town

Hello everyone, today I want to share with you a really cool feature. It calls "APNG"!

What is this?

To understand what APNG is. Let us remember what PNG is – a raster graphics that supports lossless data compression and transparency. So APNG is the same PNG but with animation, that work similarly to animated GIF files, while supporting 24-bit images and 8-bit transparency.

It means that you can create a little animated raster graphics and use them anywhere in web and apps.

What about APNG support?

On the one hand APNG become more and more popular nowadays. For example according to www.caniuse.com the most popular web browsers support APNG format natively.

On the other hand you must use special libraries to add APNG support in iOS and Android apps and should keep an eye on them. Moreover you can't create APNG file as easy as PNG of JPG, you should use different apps and services for that.

But I hope in future the situation must changed...

How I can create APNG?

Ok, let's make some design magic.

1 Step

As we learned earlier first of all APNG is "animated" that's why we must use any graphic animation software you like. The main thing we need is frames sequence of your animation. I personally love to use Apple Motion 5 to create any animation for my projects.

Let's create a little bouncing ball animation there. We have one ball layer on transparent artboard 80x80 px.

Next thing we're going to do is export our animation as image sequence by clicking "Share button" and select "Export Image Sequence" menu.

If you did everything correctly, you must get a folder with every frame as a separate PNG with transparent background. I have 30 PNG's because my animation is 1 second long with 30 fps.

2 Step

As we've got a folder full of PNG's we should merge them together and create APNG! To do that I use Animated PNG Maker it is fast, free and easy to use web service. Just click "Select images", select all PNGs in folder and click "Upload", then in the bottom of the list click "Animate it!" and here you go, your APNG is ready.

NOTE: Change default delay time to "0" (zero)

As addition you can add loop count if you want to stop animation after count of replays, like a GIF.

UPDATE

A few days ago I found an app for in Mac App Store to build APNGs. Special thanks to ICS.MEDIA

3 Step

And the last step is compressing, you should reduce the size of your APNG using www.tinypng.com. It makes our file 2x times smaller, only 10kb!

So here we go. Our cute bouncing ball is ready.