Better animations in Firefox 3

Chris Beard

42

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:

.demoimg1 { padding: 1em; background-color: #404040;} .demoimg2 { padding: 1em; background-color: #ebebeb;} .demoimg3 { padding: 1em; background-color: #40ff40;} .demoimg4 { padding: 1em; background-color: #dd0041;} .demoimg5 { padding: 1em; background-image: url(http://people.mozilla.com/~dolske/apng/checker.png);}

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 .

Try it, extend it

Try out the editor for yourself. You’ll need:

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)
  • Reorder frames by drag’n’drop
  • Save APNGs as color mapped 8-, 4-, or 2-bit images (for decreased file size)
  • Scripts to perform more kinds of frame manipulations.
  • Sandboxing of scripts to prevent malicious code
  • Cropping frames
  • Scaling frames
  • Animated text with the new <canvas> drawString() API
  • SVG-based frame rendering
  • Gratuitous spinning logo

    42 responses

    1. BrianZ wrote on :

      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?

    2. FF gold wrote on :

      FF Garbage: youre stupid. If you don’t like FF, don’t use it.

      For me, FF is the best web browser.

    3. FF Garbage wrote on :

      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

    4. Hawaii wrote on ::

      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.

    5. Lindsay wrote on :

      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!

    6. //arcio wrote on ::

      Great work. Super interested in the SVG extensions feed. An approach where an external SVG editor talks with yours.

    7. Justin Dolske wrote on ::

      John: PNG is an open format that can be extended by anyone. It’s unfortunate that the PNG group chose not to make APNG an official extension, but that doesn’t make it wrong to use.

    8. John wrote on :

      I loved the idea!!! Really… but since it was “rejected as an official extension”, doesn’t that makes the format “unauthorized” to be published?

      in other words: doesn’t that makes it impossible to be used?

      and also (since I’m a web developer and i do believe in W3C standards) this makes it impossible for the extension ever be recommended as a Standard from W3C, right?

      Anyway… You have my full support! I do love the .apng idea!

      Thanks

    9. Anonymous Guy wrote on :

      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?

      This spam filter is annoying, take 3 here.

    10. Tapeten wrote on ::

      I am really times strained on the new version Firefox 3,0. We wait simply times starting from which there so still come at renewals.

    11. Aaron wrote on :

      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.

    12. 译佰翻译 wrote on :

      not working for me, but I’m only using the portable Alpha 7. Is this a limitation of the portable version?

    13. 上海翻译 wrote on ::

      I think it won´t be very popular, beacause Microsoft’s Internet Explorer won´t support the apng-format. But it is an very nice successor for the “Too cool for IE” ;-)

    14. Holger Will wrote on ::

      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

    15. Hawaiian Guy wrote on ::

      I really prefer .swf, but I think this could grow on me. It’s nice to see different solutions arise. Keep blasting out the Lab work! Thanks.

    16. Walter wrote on ::

      I’m not a huge Flash fan either, but they actually do have very good 3-D support now. Even physics modeling.

    17. Holger Will wrote on ::

      Justin:
      thanks for your response.

      1) this is exactly what i do

      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.

      cheers
      Holger

    18. Sean Brown wrote on :

      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.

    19. Sweet wrote on ::

      I would try seeing if you could get paint .NET to intergrate it into there software if so bang that would increase its use by a ton.

    20. Justin Dolske wrote on ::

      Holger: Wow, awesome!

      1) I haven’t tried it, but some quick googling turns up this.

      2) Are you making your iframe like the canvas iframe that’s in apngedit.xul? I had a similar problem at one point…

    21. Lindsay wrote on :

      Grinning like an idiot. I just hope this gets picked up and gets popular.

    22. OS wrote on :

      Is there any reason not to use current widely supported file formats like SWF with transparent background? You can then use a wide variety of tools to do this and you get tiny files.

    23. Edward D. wrote on ::

      Hi!
      I think it won´t be very popular, beacause Microsoft’s Internet Explorer won´t support the apng-format. But it is an very nice successor for the “Too cool for IE” ;-)

      cYa KJ’

    24. Holger Will wrote on ::

      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

      p.s.: apropos animated SVG, here is an animated SVG turned into an APNG with your extension and my little hack:
      http://www.treebuilder.de/apng/dancer.png

    25. skierpage wrote on :

      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.

    26. Stephen Donner wrote on ::

      dolske++^n

    27. Tom Sieron wrote on ::

      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.

    28. Justin Dolske wrote on ::

      gamer_boy:

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

    29. iPRED wrote on :

      Animated SVGs is the future. SVG:s with .SMIL, could i be any sexier? Bummer that FF dosn’t support that in the current stable versions. Good work.. love the work you’ve done!!

    30. iPRED wrote on :

      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!!!!!!

    31. H. Jalonen wrote on :

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

    32. Gaabi wrote on ::

      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.

      Thank you, this is very cool!

    33. Havvy wrote on :

      I think APNGs are going to be an excellent replacement for Gifs.

      I don’t think a stop button would be really useful for APNGs in the standard FF 3.0 build, but maybe an extension could do that Alex.

    34. Gusar wrote on :

      @alex.r.: To stop the animations just press ESC. Works for both gif and apng.

    35. Collin wrote on ::

      Hitting escape stopped all the animations on this page for me :)

    36. Markus wrote on :

      Erm … not working for me, but I’m only using the portable Alpha 7. Is this a limitation of the portable version?

    37. alex.r. wrote on :

      Or with the stop button for that matter…

    38. Steffen wrote on :

      Wouldn´t it be great if one could pause an APNG animation using JavaScript?

    39. Daniel Holbert wrote on :

      I love the spinning Firefox logo. :)

    40. gamer_boy wrote on :

      I’m interesting about this, but if the old firefox will not load it, what is necessary to do ?

    41. Gerv wrote on ::

      This is great, except for the fact that chompy and that struck-out text while buglists are loading on b.m.o. are really, really beginning to get on my nerves… :-|

    42. Jakub Steiner wrote on ::

      Reimplementing a subset of MNG again would have avoided the lack of tools. I’m not sure more projects will embrace APNG, even though animated RGBA images are needed.