Create your own animated PNGs
Posted by Percy Cabello on March 27th, 2007 • Tags:
ShareThis

GIF Movie Gear has become the first editor to support the new animated PNG (APNG) format. As announced recently, APNG makes the open PNG format a complete superset of previously patent protected but widely used GIF format now that it supports animation while offering better color resolution and transparency.

The format gained native support in Firefox 3 Alpha3, released last week. However since the format is evolving rapidly, the sample APNGs available which follow the most recent specification were not displayed but in the most recent nightlies.

GIF Movie GearGIF Movie Gear, as its name suggests is a tool for web designers to create animated GIF files. Its author however recently released an experimental version that supports APNGs. I am not an image expert but so far it looks pretty well and I was able to create a simple animated PNG featuring Kit. The experimental version is available as a 30 days trial in zip format.

If you are using a current (as of today) Firefox 3 nightly (Minefield) you can see an animated button below. Otherwise you will only see the first frame of the animation.

Animated PNG button

You can see the same results in good old GIF format.

Animated GIF button

Via Vladimir Vukicevic’s blog

Comments
Jonas said on March 30, 2007, 7:02 pm:

Am I the only one who notices that the APNG is about 3 times the size of the GIF?

How on earth does that happen? I would have expected APNG to be superior, or at least not significantly worse than GIF in all cases.

Percy Cabello said on March 30, 2007, 9:34 pm:

Jonas, good point. I didn’t notice that in my trivial test, but in fact the PNG is 16KB while the GIF is just 6KB. Since the APNG and GIF Movie Gear are both in development versions, I guess this will hopefully improve. I don’t see a successful future if the gap remains so wide, even with PNG advantages.

Al Fox said on April 11, 2007, 12:55 pm:

*clicks “Announced Recently”*… Ah, so that’s what happened to MNG. I never quite figured that out, though I kinda suspected as much. I guess this APNG idea is pretty smart then.

As for the larger filesize, I wonder, is the APNG indexed like the GIF file (because obviously a 24-bit PNG is much bigger than an 8-bit one)? Photoshop seems to say it isn’t, but then again it can’t detect its layers either.

Rafaelinux said on February 19, 2008, 1:04 am:

Yep.. I was about to say the same.. and I will… the APNG is 15kB’s long… too bad against a 5kB gif… But.. anyways!
I always loved the possibility of having MNG used by the masses.. but.. that didn’t go very well. So.. here we are, my little APNGie… T_T ^^

[...] Aprovechando que Firefox 3 soportará PNGs animados (formato APNG), recientemente fue publicada GIF Movie Gear, una aplicación para crear animaciones en ese formato, como se explicaba en marzo en Mozilla Links. [...]

Stimul8d said on September 11, 2008, 12:15 pm:

Sure APNG is larger than GIF in this case but is the graphic vector or raster based?

I’d be surprised if a vector PNG was that much larger than GIF. This has always been the trade off between the two which is why GIF is still a valid option for some graphics.

Don’t forget the advantages of PNG (24-bit) though,..do we REALLY want all those jaggies? Think how much fun there is to be had with APNG and Jscript.

steve said on January 5, 2009, 4:49 pm:

Are you guys high on something? APNG is 24 bit whiles GIF only stores 256 colours. APNG will be great for high quality animations. Neither are vector.

meh said on March 16, 2009, 11:12 pm:

reply to: Stimul8d

“I’d be surprised if a vector PNG was that much larger than GIF. This has always been the trade off between the two which”

“a vector PNG”

You sir, are an idiot PNG = Raster image

Chaz said on March 27, 2009, 10:14 pm:

Well think about it, an animated GIF supports up to 256 with a custom palette to choose which colors for 256 spaces of colors. 256 possible colors is 1 byte per pixel, that’s significantly alot less bits in a picture than it’s PNG equivalent. PNGs support full color and alpha transparency so that’s 3 channels of colors, 24 bits and a channel of alpha of 8 bits. That totals to 4 bytes! That quadruples the file size, not to mention APNG file format stores a single PNG image in each frame so it gets more and more insane. But this is large step that has to be made to accommodate increasingly fast and powerful hardware.

Chaz said on March 27, 2009, 10:15 pm:

Forgot to mention PNG compression x_x

eric said on May 18, 2009, 3:57 pm:

Which one looks like crap. *Hint it’s the GIF

Mitsukaru said on January 6, 2010, 3:05 am:

if the apng version was indexed-color like the gif was so that it’s identical, the png would have been smaller than the gif because png has better compression than gif. if you notice, there is banding in the gif image and not in the png image, because the apng is truecolor whereas the gif is indexed. if the apng was indexed as well it would be smaller.

ChazZeromus said on January 8, 2010, 12:10 am:

True, color indexing of a set pallet is great, too bad there aren’t any wide formats that use ful alpha index or at least full alpha with indexing. Let’s not forget how versatile GIF really is in that need of reducing size and utilizing more procedural elements than rasterized.

Okami said on November 10, 2010, 2:08 pm:

The problem i see is not the size, because is not tooooo large, but no one notice these apng only work in firefox? i want to use it but in opera don´t respect the speed of the frames, safari chrome and IE8 don´t make any animation, so… Like a web designer i can´t use apng i will like to but…

NOTE: I create my apng using animat png editor for firefox.
if anyone knows a better way to create apng and work in chrome, safari, etc. tell me!!!