Updates from the edge of the Web

Better animations in Firefox 3

One of the cool new features coming in Firefox 3 is support for a new animated image format. Browsers have supported animated GIFs for more than a decade, but the GIF image format has a number of limitations and is overdue for replacement. The PNG image format is now widely accepted as a superior replacement for static GIF images, but for animated GIFs there has not yet been a clear successor. The new Animated PNG format (APNG) is a simple extension to PNG, making it superior for animations too.

The problem

So, what’s wrong with GIFs? The two most apparent problems are that GIF images can only contain 256 colors, and lack support for partially-transparent pixels. This results in images which often look grainy or rough, and which do not smoothly blend into their background. A clever designer can somewhat mitigate these problems, but the tricks used don’t always work well in different situations — especially if the image is animated. Let’s look at an example of this problem…

Example: the Firefox “throbber”

In Firefox 2, the animation used to indicate that a page is still loading (affectionately known as a “throbber“) is an animated GIF. Here’s the actual image used on OS X, placed against some different backgrounds:

You can see that when used on a light gray background (OS X’s default color), the throbber looks just fine. But against any other background, it looks terrible. Why? To antialias the image, in order to make it look smooth, pixels must be blended to a fixed color (the expected background). If partial transparency was supported, the antialiased pixels could be made appropriately transparent, and the animation would look fine against any background.

Here’s the throbber, now rendered as an APNG: [If you’re viewing this page with Gran Paradiso, the development version of Firefox 3, you’ll see the images below as they, uhh, throb. If you’re not, you should just see the static first frame — APNG is backwards compatible with existing PNG viewers.]

The APNG version clearly looks better against different backgrounds. And that’s useful to have in practice, as it allows Firefox themes and extensions (like Chromatabs to change the browser’s chrome while reusing the existing throbber, and not end up with an ugly mess.

A chicken and egg…

A spiffy new animation format is nice, but without an authoring tool no one will use it. But who’s going build such a tool before anyone is using the format? Chicken, meet egg.

Luckily, here at Mozilla Labs we have the technology to build both the chicken and the egg! The Mozilla platform can encode as well as decode APNG images, runs on multiple platforms, and has familiar environment for dealing with UI/scripting/graphics. So, yadda yadda, I wrote a Firefox extension to make creating APNGs easy. It’s called “APNG Edit.” Not the most creative name, but it’ll do. Here’s what it looks like:

My goal was to create a simple editor; the primary workflow being to load up a series of images (one for each frame), adjust the various settings for each frame, and then encode and save the finished animation as an APNG file.

The red dinosaur head shown in the screenshot above is “Chompy,” who serves as an amusing interstitial while Bugzilla processes a user’s search query. Chompy looks a little rough as an animated GIF; problems similar to the GIF throbber above are visible, and it also shows some dithering artifacts.

I obtained the individual frames as PNGs from Klowner, the Mozilla community member who originally rendered Chompy, and was able to quickly load them into APNG Edit and save the resulting animation. Here’s Chompy as a high-quality APNG:

…with a side of bacon

Oh, and “one more thing”!

I quickly realized that while a simple editor to assemble frames was a good first step, a Mozilla-based editor could be a lot more powerful with some minimal effort. Why not take advantage of Javascript and <canvas>, so that animations can be dynamically created and modified? Instead of drawing each frame in Photoshop or Gimp (over and over, as you fine-tune how you want the animation to look), it’s far easier to script the drawing tools provided by <canvas> so that the animation can be generated automatically with the parameters you specify.

For example, to make the OS X throbber, I wrote a script to draw lines with the appropriate shape, color, and rotation for each frame. I was curious what a larger version might look like, so I basically just changed the X and Y size specified in my script, and ran it again:

Here’s an existing <canvas> demo, which I easily converted into a script for generating an APNG:

The first version of the clock animation resulted in a rather large file (about 450K) because each frame was a complete rendering. I wrote another script to optimize each frame by only encoding interframe differences, which knocked the size down to 79K. I could also make easy adjustments to the dimensions or frame count, by simply adjusting the script parameters and re-rendering the animation .

There are still some rough spots in the editor which need improved, and there are a lot of interesting possibilities for new features. Unfortunately I anticipate most of my time will be spent working on Firefox 3; however I would welcome patches and scripts from anyone interested. Here’s some ideas for future directions:

Add the ability to edit frames in an existing APNG or animated GIF (needs changes to imgIDecoder)

42 responses

Is there any way to make smaller files? A 3000×200 Firefox Persona image with only 3 layers needs to be less than 300K, but mine comes out at 1.8mb using the APNG editor. Actually, only a very small area changes in my animation, but I guess you must use the entire background area for each layer?

Who gives a crap about animations!!! I would like a browser that doesn’t eat all my ram and take 4 hours to start. What is with devs today? In Devs mind, “should I add pretty colors, or should make this run better” HMMMMM I think Ill add colors instead of making my software work well. Geshhh

I see these formats coming and going, and unless one of the large companies adopts it and begins growing it more, I don’t see much of a future. The idea and set up are great, don’t get me wrong. I just think these things need major support.

We’re thinking about using APNG for broadcast slide shows on digital radio – would really bring the ads to life… we will need editing tools to create the files and this is looking good… and open formats are really powerful for getting new ideas manufactured. Keep up the development!

Is APNG actually superior to MNG in any aspect other than falling back to looking like a plain PNG in older browsers?

MNG had many shortcomings, don’t get me wrong; I’m just wondering how APNG compares. Honestly the lowest point of MNG was its very low-tech toolchain, and until APNG sees broad adoption (by at least one major vendor like, say, Adobe uses it) this will be a sticking point for the APNG format as well. The next lowest point was that the file sizes weren’t all that small because it was lossless (unless you reduced color depth or something); does APNG give better file sizes?

So why didn’t you add support for mng again? Besides your ego. Also, there are lots of programs that display mng’s but there has never been many free/open source editors, this one could have been a cool one.

i’ve finally managed to write an extension to make it more simple to convert from animated svg to apng. the rendering code is derieved from apng edit. you can find the latest version here:http://www.treebuilder.de/default.asp?file=660000.xml
hope you like it
cheers
Holger

2) what i basicly do now is add a xul:iframe as a first child to the xul:stack with position:absolute and width and height set. this works fine, and i can also do visibility:hidden, so i’m happy with this.

the only thing that is strange is when i add background-color: rgba(0,0,0,0) !important or any other color the background is allways white. only if i run the extension from the chrome url ( chrome://apngedit/content/apngedit.xul ) everything works as expected ( the background is transparent ). is this a bug ?
if you would send me an email to holger at treebuilder dot de
i could send you the changed files and the script so you could test it.

OS: SWF is a vector-based animation solution and as such, there are certain limits on the technology. For instance, it’s a good solution for illustration-style animated images. Not everyone does everything vector-style.

In fact, the one demographic that pretty much never uses vector images are people who do their work in any sort of 3D software package. It’s virtually impossible to do a 3D rendering that is gonna play nice with vector. You could do all the 3D rendering and compositing outside of Flash and then bring it all in, but you lose the benefit of small file size that is a Flash user’s main talking point.

That aside, there’s also the fact that you would need a copy of Flash apart from whatever 3D suite you’re using. Rather than have another expensive software suite taking up space on your hard drive, why not just use something like an APNG editor that compiles any number of PNG images into a single, contiguous animation?

If it’s easy to use and free and open-source, I’ll take APNG over SWF any day of the week.

this is really a great extension. i tried to modify it a bit to be able to run my SMIL XSLT from script.
for that i added an html:object to the xul and a reference to it to the APNGedit Object. this works out quit well, but there are a few things that i’m not able to fix.
1. i can’t find a way to draw the contents of the object to canvas with a transparent background
2. and if i put the object in a hidden frame, the whole thing does not work.
any ideas what i could do about it ?
cheers
Holger

Sieron, are you even reading the previous comments? This is a compatible extension of the PNG format. It solves a need in the Mozilla code, regardless of whether other tools pick it up. Animated SVGs and Flash are vectors, not bitmaps (though some day animations could be SVGs that are cached at runtime as bitmaps, as in KDE4). RTFPCs!

I think I found the reason lamers with limited social sk1llz like me keep asking for MNG: the MAME arcade emulator creates MNG when you capture game video.

I don’t see this format getting popular unless it gets support from a major player in computer graphics design like Adobe (or at least a plugin for PS/IR/IL/whatever). And if it doesn’t get supported fast it will die out pretty quickly. With competition from Flash animations and probably animated SVGs in near future it won’t be easy to establish APNG as a standard.

Older software will still display an image when an APNG is used, it’s just not animated (basically, only the first frame is shown). That’s good enough for many use cases.

H. Jalonen:

The APNG spec was developed in the open, with input from many sources. You can do the Google legwork yourself.

It’s interesting to see the MNG advocates pop up whenever animations are mentioned. MNG has been around for 10 years, was pulled from Mozilla 4 years ago, and currently is still vanishingly rare to find in the real world. The marketplace has spoken, and I don’t think it’s interesting to rehash the same arguments.

iPRED:

SVG animations look interesting; though I would assume they are significantly more resource-intensive than animated bitmaps. But I think they’re competitors, any more than APNG is a competitor to video formats like MPEG… Different solutions for different problems. (It looks like SMIL support is being worked on in bug Bug 216462, but won’t be in Firefox 3.)

So… sure Animated PNGs is quite cool. But they seems quite obsolete if compare to Animated SVGs… was pretty surprised to discover that FF dosent support Animated svgs in its current state…. 2.x
Would bee so cool if Animated svg finally came to FF following the standard with .smile instead of using javascript! Until then i have to Use Opera :’-(…..

Anyways, Keep up the good work.. very nicely done, love your work!!!!!!

At least I am, and I guess that the whole Firefox community would be interested to hear what were all the reasons why, instead of inventing APNG, you didn’t implement support for MNG or any profile/version of it.
This seems weird mainly because many Mozilla coders are in favour of “open Internet” whereas APNG is more like a “Mozilla-only” solution. (MNG has had a public and ready specification since 2001 and earlier this year the PNG group officially rejected APNG as an official extension of PNG.)

Don’t get me wrong. I am not saying this is downright stupid decision or anything like that. I just think that there probably are quite strong justifications why not to implement already known and tested solution and I am extremely curious to hear those reasons.

(Some bakcground: MNG is a graphics format for animated images that is closely related to PNG. Mozilla has supported MNG but it was removed around Mozilla 1.4 .)

I LOVE this and it’s pretty exciting – but I couldn’t figure out how to get it to load an image after the second frame. It immediately began to play. I’m sure I’ve overlooked something obvious and I’ll (of course) keep playing with it and look forward to more and other’s comments.