Another option for animation
Sunday, September 16, 2007 4:22:43 PM
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 # Sunday, September 16, 2007 5:30:44 PM
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
Steve DarkenDarken # Sunday, September 16, 2007 6:38:43 PM
Finally, I'm going to include some animated PNG in my Web projects.
@Holger Will: Thanks for the link.
Anonymous # Sunday, September 16, 2007 8:31:02 PM
David Storeydstorey # Sunday, September 16, 2007 10:44:19 PM
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.
Øyvind ØstlundNoteMe # Monday, September 17, 2007 7:43:24 AM
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 # Monday, September 17, 2007 3:24:58 PM
Kelson VibberKelson # Monday, September 17, 2007 5:21:42 PM
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.
Dan Alexandrudantesoft # Tuesday, September 18, 2007 4:28:58 AM
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!
RoyiDrazick # Tuesday, September 18, 2007 7:42:51 AM
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.
Haavardhaavard # Tuesday, September 18, 2007 8:27:44 AM
_Grey_ # Tuesday, September 18, 2007 3:00:39 PM
Jadd # Wednesday, September 19, 2007 8:25:10 PM
Øyvind ØstlundNoteMe # Wednesday, September 19, 2007 9:41:42 PM
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.
- ØØ -
Tenno Seremeltenno-seremel # Saturday, September 22, 2007 8:35:08 PM
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.
Dan Alexandrudantesoft # Sunday, September 23, 2007 7:12:09 AM
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.Øyvind ØstlundNoteMe # Sunday, September 23, 2007 8:47:47 AM
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 # Sunday, September 23, 2007 5:20:15 PM
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_ # Sunday, September 23, 2007 10:08:10 PM
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...
Tenno Seremeltenno-seremel # Monday, September 24, 2007 1:16:23 AM
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 # Monday, October 1, 2007 7:39:28 PM
I'd like to be able to create APNGs or split them into PNGs without overhead of launching heavy applications like Firefox.
Anonymous # Sunday, November 11, 2007 2:28:15 AM
Dan Alexandrudantesoft # Sunday, November 11, 2007 10:39:31 AM
Anonymous # Saturday, March 28, 2009 4:30:57 PM
JoeGoJoeGo # Saturday, March 28, 2009 5:44:26 PM
JoeGoJoeGo # Saturday, March 28, 2009 5:45:45 PM
Also, what's with the irrelevant offtopic comments about Kestrel builds? Doesn't seem to belong here at all.