Another option for animation
Sunday, 16. September 2007, 16:22:43
Traditionally if we've wanted to use animated images we've been stuck with one option - the animated gif. There has also been Flash (or movie formats for that matter) if you can get away with using a plug-in. A gif has certainly been the only option if one wants to add a decorative image in CSS. Since the latest weekly of Opera Kestrel, another option has been added - APNG. This was first proposed and implemented by Mozilla and should be available in Firefox 3.
I've got some mixed feelings about this, as the PNG group rejected APNG and it apparently breaks the original intent of the PNG spec. However it does give web developers more options, where gif files are not the best choice or give the best quality, and giving APNg its own MIME type et al would mean that it wouldn't fallback to the first frame of the animation for none-APNG aware browsers.
SVG will eventually be a third option for animation, for suitable vector style images. No browsers currently support animation in CSS, as while Opera is the only browser to support animated SVG and SVG in CSS, it doesn't currently support both combined. It would be nice to get this support in the future, so we can do animated roll overs for example. It does support animated SVG in the img element though.
Check out these demos to see APNG in action. At the time of writing you need Opera Kestrel or Mozilla Minefield.

Holger Will # 16. September 2007, 17:30
even more cool as i'm currently writing an svg2png extension for firefox, to turn animated svgs to apngs.
http://www.treebuilder.de/default.asp?file=660000.xml
it would be nice if there was a way for widgets to get a handle to an apng encoder, so i could turn this extension into an Opera widget.
anyways, this is really cool
thanks
Holger
p.s.: here are some more apng examples to look at
http://treebuilder.de/default.asp?file=89031.xml
Darken # 16. September 2007, 18:38
Finally, I'm going to include some animated PNG in my Web projects.
@Holger Will: Thanks for the link.
Anonymous # 16. September 2007, 20:31
I guess this means that MNG support in Opera is highly unlikely? :awww:
dstorey # 16. September 2007, 22:44
Mr Coward: If there is enough demand i.e web sites start using MNG then I'm sure support would be added. As no other browser supports them and Firefox removed support, I guess that will be unlikely any time soon. APNG are not widely used yet, but it is fairly trivial to add support when PNGs are already supported. I'm no expert on image formats, but I've read that support MNG is a significant amount of work.
NoteMe # 17. September 2007, 07:43
AFAIK, inkscape already does that. Both by importing a PNG as well as on the command line (if I am not wrong). The problem will be busy pictures where the SVG file size will grow way beyond anything usefull.
- ØØ -
FataL # 17. September 2007, 15:24
Kelson # 17. September 2007, 17:21
It's always been a chicken-and-egg problem. Perhaps if MNG had still been in Gecko at the time Firefox became popular, more people would have done demo pages (as when Opera and Firefox added various levels of SVG support), and there would have been more demand to keep it.
dantesoft # 18. September 2007, 04:28
I'm guessing nobody else (Opera, Firefox, Safari, as opposed to Netscape and Konqueror for example) wants to implement native support for the complicated MNG standard. Anne suggests that increased resources are the main problem, to which both Opera and Firefox are very sensitive. Now APNG gets rejected again for
hacksnon-standard uses of PNG chunks and impersonation.Originally posted by dstorey:
I think Firefox and Opera are in a great position to simplify things, as the first implementators. Why not use .APNG and video/x-apng?
With what exactly does APNG need to be backward compatible now? Surely not PNG!
Drazick # 18. September 2007, 07:42
I wish more sites would support it (and develop by standards).
I have a question, I've heard that the rendering engine of Opera has IE imitation mode or something like that.
BTW, filling forms with RTL language is broken in Opera.
haavard # 18. September 2007, 08:27
_Grey_ # 18. September 2007, 15:00
Jadd # 19. September 2007, 20:25
NoteMe # 19. September 2007, 21:41
I am no expert on this, but let me give it a try. MNG was meant to be animated PNGs, but they tried to solve all the worlds problems in one go, and it got a bit over complex.
aPNG on the other hand, just tried to do to PNG, what animated GIFs had done to GIFs. But the PNG group didn't really like the "hacks" done to make it work. Neither would they totally rule out multiple PNGs in one file as the initial documentation said.
All that said, I guess it will be the preferred file format for animated PNGs now since both Fx and O has implemented it. But as David said, it will be interesting to see what happens to the MIME type problem.
- ØØ -
Haruka aka Seremel # 22. September 2007, 20:35
It seems, that if you can get the full meaning from the 1st frame of the animated image, you don't need said "animation" in the first place. And if you can't get anything meaningful from the 1st frame what's the purpose to download the whole APNG for a browser that do not support it? Since browser can't really guess is there APNG or PNG, it will download it... that's just weird.
dantesoft # 23. September 2007, 07:12
The APNG is a PNG (containing the image from the first frame) with the rest of the frames hidden in other (normally discardable) chunks of the PNG, plus metadata for APNG-aware browsers (whether to show that first frame, what timing to use for the animation, etc)
Originally posted by Haruka aka Seremel:
I agree wholeheartedly.NoteMe # 23. September 2007, 08:47
Yes, but it won't know that if the MIME type is video/...of course unless it sniffs the file type, which again beats the purpose of a MIME type.
- ØØ -
Holger Will # 23. September 2007, 17:20
lets say you have an asyncron xmlhttprequest, you would display a simple string like "please wait..."
for browsers that do not support apngs and an animated progressbar for browsers that support apng, skipping the first frame.
true the meaning of the first frame is the same as of the animation, but the animation is much more appealing.
by the way if meaning is everything, whats the purpose of css then ?
cheers
Holger
_Grey_ # 23. September 2007, 22:08
Letting a browser download a file that is perhaps 100 times the size of the "fallback" content is not what I call intelligent.
As a user, I'm just pissed that there will be no distinction, that PNG will be another GIF nightmare. We wouldn't even be talking about this if IE had shown any sign of implementing anything that newer browsers got. A new MIME-type is not the end of the world...
Haruka aka Seremel # 24. September 2007, 01:16
That is true, however requiring the user to download x5 (or more...) as much K/Mb isn't that good. The progress bar thing will probably not have much KB in it, yes, (there will be some element for progress bar in HTML 5 also), but it would be abused by ads... and that's just scary.
Graceful degradation (by itself) is a very good thing, however if that means we need to plug more and more hacks into the future of internet... and, btw, SVG has no fallback at all, and still we are pushing it (and it's a good thing). Not much of a difference here.
porneL # 1. October 2007, 19:39
I'd like to be able to create APNGs or split them into PNGs without overhead of launching heavy applications like Firefox.
Anonymous # 11. November 2007, 02:28
I've noticed with the latest Kestrel build that animated gif files are messed up - there are streaks in them, at least in the ones showing on forums.secondlife.com. Never seen this before. I wonder if there's a connection.
dantesoft # 11. November 2007, 10:39
Anonymous # 28. March 2009, 16:30
Well, MNG is much better than APNG as it is object oriented so it could be a simple alternative to Flash.
GoJoeGo # 28. March 2009, 17:44
GoJoeGo # 28. March 2009, 17:45
Also, what's with the irrelevant offtopic comments about Kestrel builds? Doesn't seem to belong here at all.