Skip navigation.

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 16. September 2007, 17:30

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

Darken 16. September 2007, 18:38

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 16. September 2007, 20:31

Anonymous Coward writes:

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

dstorey 16. September 2007, 22:44

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.

NoteMe 17. September 2007, 07:43

@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 17. September 2007, 15:24

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 17. September 2007, 17:21

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.

dantesoft 18. September 2007, 04:28

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!

Drazick 18. September 2007, 07:42

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.

haavard 18. September 2007, 08:27

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

_Grey_ 18. September 2007, 15:00

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

Jadd 19. September 2007, 20:25

So what's the difference between MNG and APNG?

NoteMe 19. September 2007, 21:41

@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.


- ØØ -

Haruka aka Seremel 22. September 2007, 20:35

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.

dantesoft 23. September 2007, 07:12

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.

NoteMe 23. September 2007, 08:47

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 23. September 2007, 17:20

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_ 23. September 2007, 22:08

@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...

Haruka aka Seremel 24. September 2007, 01:16

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 1. October 2007, 19:39

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 11. November 2007, 02:28

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.

dantesoft 11. November 2007, 10:39

[BUG 296670] Animated gif images get corrupted on Windows

Anonymous 28. March 2009, 16:30

SkyBon writes:

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

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

GoJoeGo 28. March 2009, 17:45

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.

How to use Quote function:

  1. Select some text
  2. Click on the Quote link

Write a comment

Comment
(BBcode and HTML is turned off for anonymous user comments.)

Type the two words displayed in the image below:


Smilies