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 .
Try it, extend it
Try out the editor for yourself. You’ll need:
- Gran Paradiso Alpha 7 (or newer). APNG Edit does not work on Firefox 2.
- The APNG Edit extension from the Mozilla Addons site.
- (Optional) Some sample scripts and images to experiment with.
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
41 Responses to “Better animations in Firefox 3”
Trackbacks
About Mozilla Labs
Laboratories are where science and creativity meet to develop, research, and explore new ideas. Mozilla Labs embraces this great tradition - a virtual lab where people come together to create, experiment, and play with new Web innovations and technologies. Read More »
Featured Project
Personas for Firefox
Personas for Firefox is a prototype extension that adds lightweight theming to your browser. Read More »
Archives
Subscribe
Feed (RSS)
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.
August 13th, 2007 at 5:17 pmThis 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… :-|
August 14th, 2007 at 1:17 amI’m interesting about this, but if the old firefox will not load it, what is necessary to do ?
August 14th, 2007 at 5:02 amI love the spinning Firefox logo. :)
August 14th, 2007 at 7:59 amWouldn´t it be great if one could pause an APNG animation using JavaScript?
August 14th, 2007 at 10:26 amOr with the stop button for that matter…
August 14th, 2007 at 8:48 pmErm … not working for me, but I’m only using the portable Alpha 7. Is this a limitation of the portable version?
August 14th, 2007 at 10:59 pmHitting escape stopped all the animations on this page for me :)
August 14th, 2007 at 11:01 pm@alex.r.: To stop the animations just press ESC. Works for both gif and apng.
August 15th, 2007 at 3:25 amI 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.
August 15th, 2007 at 6:46 amI 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!
August 15th, 2007 at 10:24 amAt 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 .)
August 15th, 2007 at 1:54 pmSo… 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!!!!!!
August 15th, 2007 at 2:28 pmAnimated 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!!
August 15th, 2007 at 2:34 pmgamer_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.)
August 15th, 2007 at 4:14 pmI 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.
August 16th, 2007 at 5:19 pmdolske++^n
August 17th, 2007 at 1:41 amSieron, 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.
August 17th, 2007 at 8:17 pmthis 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:
August 19th, 2007 at 2:20 amhttp://www.treebuilder.de/apng/dancer.png
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’
August 19th, 2007 at 8:45 amIs 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.
August 20th, 2007 at 1:46 amGrinning like an idiot. I just hope this gets picked up and gets popular.
August 20th, 2007 at 6:21 amHolger: 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…
August 20th, 2007 at 7:23 pmI 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.
August 21st, 2007 at 11:32 pmOS: 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.
August 21st, 2007 at 11:38 pmJustin:
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
August 23rd, 2007 at 8:39 amHolger
I’m not a huge Flash fan either, but they actually do have very good 3-D support now. Even physics modeling.
August 27th, 2007 at 8:10 pmI 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.
August 29th, 2007 at 2:00 pmi’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:
September 2nd, 2007 at 9:03 amhttp://www.treebuilder.de/default.asp?file=660000.xml
hope you like it
cheers
Holger
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” ;-)
September 4th, 2007 at 12:12 amnot working for me, but I’m only using the portable Alpha 7. Is this a limitation of the portable version?
September 4th, 2007 at 8:05 amSo 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.
September 11th, 2007 at 11:35 pmI am really times strained on the new version Firefox 3,0. We wait simply times starting from which there so still come at renewals.
October 9th, 2007 at 5:42 amIs 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.
October 19th, 2007 at 5:33 pmI 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
October 24th, 2007 at 2:41 amJohn: 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.
October 25th, 2007 at 3:30 pmGreat work. Super interested in the SVG extensions feed. An approach where an external SVG editor talks with yours.
October 30th, 2007 at 12:13 pmWe’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!
November 27th, 2007 at 2:31 amI 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.
November 27th, 2007 at 3:33 pmWho 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
December 7th, 2007 at 1:01 amFF Garbage: youre stupid. If you don’t like FF, don’t use it.
For me, FF is the best web browser.
December 9th, 2007 at 5:58 pm