PNG rules the web! Oh, did I say that too loud? I don’t think so. According to the growing popularity of PNG images in web design, we can really say that it rules the world of web graphics.

If you are a web/graphics designer you probably understand what I am talking about.

Remember how it used to be? We had JPEG for static and GIF for animated images. Later, the almighty Flash came out, providing vast opportunities for creating complex animations with smoother transitions than GIF and even applications (that we also see today and will see until the end of time, no doubt).

Then, the PNG came out and almost replaced GIF when it came to web graphics (icons, buttons, static banners, etc.). But it didn’t support animation… Later on, I post an article on GIF vs JPEG vs PNG and receive a comment from Figure.10 saying that “a PNG can be animated” (that’s why I decided to write this one). I checked around and came up with a solution for all you guys interested in animated PNG.

What’s APNG?

The Animated Portable Network Graphics (APNG) file format is an unofficial extension to the Portable Network Graphics (PNG) specification. It allows for animated PNG files that work similarly to animated GIF files, while supporting 24-bit images and 8-bit transparency not available for GIFs. It also retains backward compatibility with non-animated PNG files. (Wiki)

GIF or APNG?

Well, it’s up to you:

• GIF is supported by all popular web browsers while APNG is not (Firefox 3 +, Opera 9.5 + only).
• APNG supports more colors than GIF and has a larger filesize.

Application support

Image processing software:

• APNG Anime Maker
• Gamani GIF Movie Gear
• GIMP (requires a plug-in, which you can download here http://registry.gimp.org/node/24394)
• ImageJ
• Imagine
• Konvertor
• KSquirrel
• Paint.NET
• XnView (read-only)

Web Browsers:

• Mozilla Firefox
• SeaMonkey
• Opera

How to create an animated PNG?

I think the easiest and best software is APNG Anime Maker.

I will show you how to create an animated PNG file with this free software. Just a brief tell-a-friend.

Download it here (direct link) it’s free!

Unzip it somewhere.

Run the program:

Click Open and choose your images that you want in the final animation. I have prepared three consequent images that will be the frames for my animation:

Now you should have all your files listed:

You are almost done, even without touching the settings. Just click Save and open the saved file with a software which supports APNG.

The result:

Note: the most important setting is Delay:

Set time between the frames in milliseconds or frames-per-second (it’s 100 msec by default).

Conclusion

Screw it. I am not gonna use APNG (IMHO). The lame animation I’ve created for this post is 67KB!!! Nothing for a broadband but still, come on, it’s way too “heavy” for this!

by Azamat "Bohed" E.

TrueKolor.net Owner. Professional Graphic Designer.

• Web
|
• More Posts (152)