Slightly ajar

Another option for animation

, , ,

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.

SVG: The race to 100% complianceOpen the Web World Tour

Comments

Holger Will Sunday, September 16, 2007 5:30:44 PM

great ! APNG is just cool.
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

Excellent, good move Opera Team! cheers

Finally, I'm going to include some animated PNG in my Web projects. smile

@Holger Will: Thanks for the link.

Anonymous Sunday, September 16, 2007 8:31:02 PM

Anonymous Coward writes: I guess this means that MNG support in Opera is highly unlikely? :awww:

David Storeydstorey Sunday, September 16, 2007 10:44:19 PM

Holger Will: Any chance of a PNG2SVG converter? I wanted to do a comparison of Gif vs PNG vs SVG example, but making a SVG file of an existing PNG would take a long time to make (and I'm not an expert on SVG). Animating the example I was going to use woul be trivial, I just needed the original SVG file.


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

@David,
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

it wouldn't fallback to the first frame of the animation for none-APNG aware browsers

This is definitely sucks and will stop me from using this format until at least all major browsers will support it.

Kelson VibberKelson Monday, September 17, 2007 5:21:42 PM

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.



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

Great, so now we can expect to unwillingly download ads, avatars and other such useful animations in the megabytes range. I find upsetting the fact that there isn't any file- or MIME-level distinction between the still and animated format. It's the animated GIF nightmare again: even disabling "GIF/SVG/PNG Animation" will still make the browser transfer the file.

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:

giving APNG its own MIME type et al would mean that it wouldn't fallback to the first frame of the animation for non-APNG aware browsers.


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 really like what you do in Opera.

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

Drazick, I'd recommend asking about those things in the forums. It is kind of off-topic in a blog post about APNG...

_Grey_ Tuesday, September 18, 2007 3:00:39 PM

dantesoft: I think (as in: I am guessing) that you are preaching to the choir here. Opera only supports it because Firefox does.

Jadd Wednesday, September 19, 2007 8:25:10 PM

So what's the difference between MNG and APNG?

Øyvind ØstlundNoteMe Wednesday, September 19, 2007 9:41:42 PM

@Jadd:
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

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.

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

It doesn't work this way; "the first frame" is meaningful for all browsers, viewers, etc.

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:

Since browser can't really guess is there APNG or PNG, it will download it... that's just weird.

I agree wholeheartedly.

Øyvind ØstlundNoteMe Sunday, September 23, 2007 8:47:47 AM

It doesn't work this way; "the first frame" is meaningful for all browsers, viewers, etc.



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

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?



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

@Holger Will: Fallback should be done differently. Just look at HTML5's <audio> and <video>.

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

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 ?

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

Does anyone know command-line tools for manipulating APNG files?
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

SuezanneC Baskerville writes: 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.

Dan Alexandrudantesoft Sunday, November 11, 2007 10:39:31 AM

[BUG 296670] Animated gif images get corrupted on Windows

Anonymous Saturday, March 28, 2009 4:30:57 PM

SkyBon writes: Well, MNG is much better than APNG as it is object oriented so it could be a simple alternative to Flash.

JoeGoJoeGo Saturday, March 28, 2009 5:44:26 PM

MNG is horribly bloated. And has no sound. Or anything like that.

JoeGoJoeGo Saturday, March 28, 2009 5:45:45 PM

MNG is horribly bloated. And has no sound. Or anything like that.

Also, what's with the irrelevant offtopic comments about Kestrel builds? Doesn't seem to belong here at all.

Write a comment

You must be logged in to write a comment. If you're not a registered member, please sign up.