Slashdot Mirror


Presenting APNG: Like MNG, Only Better

An anonymous reader writes "It's fair to say that most people love PNG images (or at least hate GIFs). However, the one advantage GIFs have over PNGs is that they can be animated. There is, of course, an animated version of PNG, MNG, but few programs can view these images (mainly because the MNG decoder is so large that the likes of Mozilla refuse to include it). But there may be an answer coming: Vladimir Vukicevic and Stuart 'Pavlov' Parmenter (of Mozilla fame) have put together a specification for APNG (Animated Portable Network Graphics)." (Read more below.)

"Unlike MNG, APNG is not a separate file format, but rather an extension to PNG. Thus, APNG images are just normal PNG images (with the .png extension) but can be animated. The system is fully backwards-compatable, so any program that can open a PNG image will be able to open an APNG image (though non-APNG viewers will only show the first frame). Vitally, the decoder just adds an extra few kilobytes onto a standard PNG decoder. APNG support is in the process of being checked into Mozilla. Hopefully, other programs will follow suit."

34 of 424 comments (clear)

  1. WIP by Mekabyte · · Score: 5, Informative

    Discussion can be found here: http://bugzilla.mozilla.org/show_bug.cgi?id=257263

  2. Re:Don't hate it by Anonymous Coward · · Score: 4, Informative

    Why not? They're generally bigger than PNG, don't support 24-bit color, 8-bit transparency, etc.

  3. Re:MNG is being checked out of Firefox by CRCulver · · Score: 4, Informative

    MNG is being discontinued, as are a lot of features including the Javascript Console. "Bloat", they calls it.

    Not to worry, though. Nearly everything that is taken out of the Firefox core can be reimplemented as an extension. I know I've been loving my Mozilla Calendar, and Web Developer extensions. There's no reason that the Javascript Console can't just become a plugin.

  4. Re:Stupid Question by carambola5 · · Score: 4, Informative

    Weather radar loops. Rather than have the client dl multiple jpegs and sequence them with javascript (eww, javascript), the client need only download a single apng.

    For an example, check out weather.com's "map in motion" for your locale. Then, check the source of the page. Much cleaner to simply have an <img> tag.

    --
    IWARS.
    People, in general, disappoint me. Politicians even more so.
  5. Re:Don't hate it by Anonymous Coward · · Score: 1, Informative

    Not true. Photoshop and other programs may created bloated PNGs, but PNGOUT can slim them right down. The only time GIFs are smaller are very small images (a few pixels) due to the overhead of the headers.

  6. Re:Don't hate it by bofkentucky · · Score: 4, Informative

    Can someone mod the parent down, PNG and Gif are both lossless (If you are talking about a 256 color (8 bit) palette.

    --
    09f911029d74e35bd84156c5635688c0
  7. Two Uses of Flash by GeekDork · · Score: 4, Informative

    There are only two valid reasons to include Flash in a web document: sound (for which there should be a global setting in the Flash plugin) and stick fights (SVG anyone?). Everything else does nothing but reduce useability and accessibility. The absolute kicker are flash intros with the skip button embedded instead of a normal link.

    And: what do you need flash or MNG/APNG for if all you want is a red/green-annoyance? To make really good fakes of Luna GUI elements?

    --

    Fight hunger. Filet a politician and send him to a 3rd world country of your choice.

  8. Re:Stupid Question by stienman · · Score: 3, Informative

    It's great for simple process visualizations.

    Check out uncommon or odd designs for engines, which would be very difficult to imagine from a text description with a few small pictures.

    There are others - google search animated gif "subject" to find useful illustrations for any process.

    -Adam

  9. Re:Need help by gujo-odori · · Score: 2, Informative

    You're probably trolling, but just in case you're really that stupid...

    Read the first half of what you wrote: 1 kg = 2.2 lbs.

    Now, quick, what is 1 x 2.2? Could it... 2.2?

    I hope this isn't too complicated, but let's go on to a more advanced example.

    If 1 kg = 2.2 pounds, then 2 kg (and you can verify this with a scale if you can't do simple arithmetic) must weigh 4.4 pounds. And by some odd coincidence, 2 x 2.2 = 4.4.

    Now, if you were to divide 1 by 2.2, you would get app. 0.45, which doesn't fit very well into the idea that to convert kilograms to pounds, you divide the kilogram figure by 2.2, since 1 kg most certainly does not equally app. 0.45 lbs.

    What, indeed, is the world coming to when people (pick one):

    A) Really can't do simple arithmetic anymore;
    B) Can't troll any better than claiming you divide kilograms by 2.2 to get pounds.

  10. Header size by maxence · · Score: 4, Informative
    the one advantage GIFs have over PNGs is that they can be animated

    Another advantage GIF has over PNG is its smaller header size which makes small images lighter. A typical 16x16 GIF icon weighing about 100 bytes will translate into a PNG of 200 bytes or more.

    That may sound like nitpicking but it can still matter, for example when transferring images to mobile phones.

    1. Re:Header size by Anonymous Coward · · Score: 5, Informative
      You're exaggerating a little, I think.

      Experiment #1: 1x1 white pixel. Results: GIF 35 bytes; PNG 67 bytes.

      Experiment #2: typical Slashdot icon resized to 16x16. Results: GIF 282 bytes; PNG 277 bytes.

      I don't see the header size making a huge difference. What does make a moderate difference is that PNG is not bound to 256 colours. You can use a 16-colour palette, in which case pixels are packed in 4 bits each. You can use a 4-colour palette, in which case pixels are packed in 2 bits each. Pixels can be of many different depths between 1 bit and 48 bits. GIF does not have this flexibility.

      This is important because icons very rarely use more than 16 colours. PNG gives a win in these cases.

    2. Re:Header size by Anonymous Coward · · Score: 3, Informative
      What does make a moderate difference is that PNG is not bound to 256 colours. You can use a 16-colour palette, in which case pixels are packed in 4 bits each. You can use a 4-colour palette, in which case pixels are packed in 2 bits each. Pixels can be of many different depths between 1 bit and 48 bits. GIF does not have this flexibility.

      Just FYI, GIFs can have 4-color or 16-color palettes.

  11. Re:Why I don't use PNG by typhoonius · · Score: 4, Informative

    * MSIE support sucks. It is getting better, but it still sucks (yes, I know this is a Microsoft issue not a PNG issue, but I'm not trying to place blame here.)

    The only PNG features IE doesn't support are 8-bit transparency and animation.

    Obviously, GIFs don't give you a full alpha channel either, so the first feature is moot. IE supports 1-bit transparency in PNGs, which puts them on par with GIFs.

    PNG animation is a mess (when Mozilla leaves MNG support out because it's too bloated, you know something's wrong), but that a problem APNG hopes to solve. Remember that IE is being worked on again, so who knows? It has a chance of being implemented (certainly moreso than MNG does, anyway).

    * Gamma value variation. Look at a PNG on one browser, and the blue value will match #0000CC, but look in another browser on another OS, and IT WON'T! Talk about maddening... this is one situation where the extra control by having the ability to specify a gamma value is a curse, not a blessing.

    PNGCrush and PNGOut both get rid of the gamma value. You should run all your PNGs through one of those programs anyway to get the smallest file size, so it's a minor issue. Otherwise, get rid of it manually with TweakPNG.

    It sounds like a lot of work to process a single image, but spending time shrinking download time is something web designers have been doing for over a decade (although I know a lot of people are lazy in the broadband age; it really isn't much more work, though, once you get into the habit of doing it and write some scripts to automate most of it, and it's worth it for the smaller file sizes and the 24-bit color).

  12. Re:Give me animated JPEG, its easy as piss to code by Anonymous Coward · · Score: 1, Informative

    The standard is called motion JPEG.

    There are also versions for the lossless
    variations of JPEG: JEPG-LOSSLESS and
    JPEG-LS

  13. Both your reasons suck by UnConeD · · Score: 3, Informative

    Your two problems are easy to get around.

    1) IE does support transparent PNG, you just need a CSS hack for it. There are tons of scripts around the web to include the hack automatically, one of which is the 'IE7' DHTML behaviour which fixes a lot more than just PNG transparency, and which anyone who wants to do modern webdesign (semantic and tableless) should consider.

    2) If you simply omit the gAMA chunk from your PNGs (pngcrush can do this easily, plus you get tiny PNGs to boot), then the gamma issues will be gone for 99.99% of the browsers. The only ones that will mess up are an outdated version of Opera, a pre-1.0 mozilla on Mac OS, and (unfortunately) Safari on Mac OS X. But Safari is still under development. You can assume that people who use it are keeping it up to date.

    You don't include any gamma information with the rest of your colors (CSS), so it makes sense not to have any in your PNGs either.

  14. Re:Don't hate it by mgv · · Score: 5, Informative

    16,777,216 != infinity :-)

    Actually, there is no point getting an infinite number of colours because:

    1) Most displays cannot show that many colour
    2) Even with a display that does 16 777 216 colours, the human eye cannot distinguish between that many shades (particularly in the blue region) which is why 16 bit colour (which has 5 + 6 + 5 bits to divide amongst the red, green & blue) puts the extra information into the green (I think, could also be red, but its never the blue)

    3) Most RGB displays, while they have gradations finer than the eye can distinguish, cannot show the full spectrum in width (from 400nm to 700nm wavelengths). You can put as many bits as you want on to any consumer display, there are colours it simply cannot do.

    4) Humans vary in their ability to see colour, making alot of the finer gradations imprecise. 8% of males have altered colour vision - as do a small percentage of women and those bits are really wasted on them. On the other hand, if you have had cataract surgery, the implantable lens will let in low end ultraviolet (which your retina can see) that our natural lens does not allow through. Not that I'm suggesting that it is good to see into the UV range :)

    My 2c worth

    Michael

    --
    There is no cryptographic solution to the problem where the intended receiver and the attacker are the same entity.
  15. Re:Stupid Question by iabervon · · Score: 4, Informative

    Go to about:config, find image.animation_mode, and set it to "no". I actually set mine to "once", which means that I see animated images if I'm actually watching; I generally iconify the browser and do something else while pages load, so I miss all the ads, but I can actually watch a weather image if I want. As far as I can tell, there's no documentation for this anywhere.

  16. Re:MNG as a format by sppavlov · · Score: 2, Informative

    We were only aiming to replace animated GIFs. MNG does have some interesting properties which may make it more useful for things like this, however it has been my experiance talking to web developers that the thing they really want is a small fast easy to use animated GIF replacement.

  17. On talking about the format by inflex · · Score: 3, Informative

    I just took a look at the 'specification' and I think it's a great one.

    It's not overly complex, it's backwards compatible and it's easy to implement.

    It probably will lack some features which would be nice but at the moment I don't see them being spoken about in the specification (ie, what mode of application for the next frame, OR/AND/XOR/INVERT etc).

    I think with it being as simple as it is to create an APNG from existing PNG's, we could see this format take off a lot faster than MNG. Now it's simply a matter of waiting for Firefox/Mozilla/Opera to pick up their end and make use of the APNG format.

    PLD.

    1. Re:On talking about the format by sppavlov · · Score: 3, Informative

      Vlad and I are currently looking at adding composite operators as well as disposal methods such as those in GIF. They should be in the spec by 1.0.

  18. Re:Give me animated JPEG, its easy as piss to code by sppavlov · · Score: 2, Informative

    The standard way to animated JPEGs in the past has always been using server push (multipart/x-mixed-replace). Mozilla does support this. A lot of webcam sites use this.

  19. Re:Why wasn't animation included in the first plac by sppavlov · · Score: 5, Informative

    APNG files _are_ PNG files. We didn't create a whole new format (since that would be silly) so APNG files will still be .PNG files. The first frame in an APNG file looks to current PNG decoders to just be a regular PNG. The APNG spec specifies some additional chunks that if found tell an APNG aware decoder how to find the rest of the frames.

  20. Re:Too bad we can't use it by josh3736 · · Score: 3, Informative
    Much like regular PNGs as it is.

    I hate the fact that when IE loads my PNGs with alpha it gives it an ugly solid bluish background. You have to hack it just to get my damned images to display correctly in IE. As a result, no one uses regular PNGs.

  21. Re:Why wasn't animation included in the first plac by argent · · Score: 2, Informative

    Several people tried to get animation in the original PNG standard, but they were rebuffed because it would take too long. Most of the energy that could have gone to getting a simple animation mechanism out was spent on generating really cool interlacing so that when you downloaded PNGs over your 9600 baud dial-up they'd fade in nicely.

    I admit that I thought the interlacing was kind of cool myself: I had a 9600 baud dial-up at the time.

    I lost interest in the process and left the PNG list after the MNG group was split off. I wanted a format that just let you place PNG images over the background at a given X, Y, and T, and re-use tagged images to make cartoony animations easier. It wasn't nearly as simple as APNG but I don't think it was excessively complex.

  22. Re:Too bad we can't use it by Ark42 · · Score: 4, Informative



    If you don't want to use the ugly IE5.5+ hack for alpha PNGs, you can at least set the background color setting in the PNG, which IE will use to blend into. I think you can set the background color tag from a pngcrush command line parameter if your software doesn't support that feature.

    For example alpha-msg.png should show a message written in magenta (the background color) if your browser blends using the background color of the PNG instead of the background color of the page. If your background color is white, you won't see any message if you are using Mozilla/Firefox/Opera. If you put that image in a div with a white background and use a IE5.5+ alpha hack of some sort, the image's message actually makes sense too.

  23. summary by Anonymous Coward · · Score: 2, Informative
    http://bugzilla.mozilla.org/show_bug.cgi?id=18574: (emphasis added by me)

    ------- Additional Comment #474 From Mike Connor 2004-07-04 09:25 PDT [reply] -------

    reasons why this isn't going to block aviary 1.0 (again, posting to prevent more advocacy posting. If you want to debate this with me, feel free to email)

    a) the code isn't ready, per the owner of the bug and the person responsible for getting things to a point where it can be added back into CVS. We're on way too short of a timeline to take major last minute code.

    b) no one working on Firefox/Thunderbird really wants this at this point (speaking as one of the people heavily involved in Firefox). Thunderbird stopped building with MNG before CVS removal took place. Firebird was probably going to do the same, but CVS removal came first. Its not something that'll likely change going forward, unless MNG support is really low cost (i.e. not 200-300k). At 50-80k the case becomes stronger, of course. The "if you support it, they will come" argument is weak, since we did support this for three years and the content didn't come.

    c) Content that 90% of the web doesn't support isn't going to get created in any substantive way. MNG has the advantage of being more ideologically pure than Flash etc, but if people aren't using it, its cruft, and that's the reality. Given the choice, we'd be much better off bundling Flash with Firefox based on the "size vs. usability boost" equation. I realize lots of people don't like Flash for a myriad of reasons, but users don't care.

  24. Re:An unfortunate hack by vukicevic · · Score: 3, Informative

    It doesn't break such code -- if that code is expecting png datastreams one after the other, then it won't find a PNG header after the first one. The "bunch of user chunks" after the IEND are simply an entire PNG, minus the 8-byte PNG header, hardly random chunks. Finally, EOF is mentioned nowhere -- the number of frames that are expected to follow is clearly specified as part of the anIm chunk; EOF before this would be an error/incomplete data condition, and nothing more.

  25. Rather Pointless... by evilviper · · Score: 2, Informative

    I was quite interested in using MNG... Not for web images, but actually as a rather good lossless video codec. MNG would make a great codec, and it's already supported by Ogg... You can mux a MNG image into an ogg file (with audio) using oggmerge, available via cvs...err...I mean svn.

    Unfortunately, it seems that there is almost no MNG software available that supports delta encoding (eg. storing only the difference between sequential images), so if you take (10) 100K PNGs, you get a 1,000K MNG. No space savings, no point really. That is where MNG really falls behind GIF.

    It seems mostly pointless, to me, to introduce a new, very similar spec. Backwards compatibily is nice, but not all that necessary, as evidenced by PNG in the first place. In any case, APNG certainly can work where MNG failed, if only good software comes out for it. It's more likely that MNG will get properly advanced software first, but you never can tell.

    As for MNG not being in Mozilla, well that is a strange issue... libMNG supports PNG rendering, so if there were more than a nominal number of MNGs on the web, you might have seen libPNG removed instead. However, since you don't see many MNGs, there wasn't much point to keeping it.

    --
    Slashdot gets worse every day... Pipedot: News for nerds, without the corporate slant
  26. Re:Don't hate it by dustman · · Score: 2, Informative

    I was talking about the GIF format being lossy at >256 colors

    And, by talking this way, you are using the term "lossy" in a way that nobody else uses. Hence the confusion. Hence the request to use the word "lossy" to describe the actual compression of data, rather than the quantization of the image.

    If you compress a 256 color image using JPEG, what comes out isn't what you put in. That's why JPEG is called a lossy format. GIF is lossless.

  27. Animated JPEGs? by Air-conditioned+cowh · · Score: 2, Informative

    Anyone thought of this? Often animated gifs are used to animate photos. This is probably not the best way to do it and APNG won't help unless it supports some kind of lossy compression.

    Is it possible to implement little motion-JPEGs in a browser without it adding too much code?

    Just asking.

  28. Re:Don't hate it by Anonymous Coward · · Score: 1, Informative

    http://dean.edwards.name/ie7 has an _easy_ procedure to fix this and other IE standard compatibility bugs

  29. Re:An unfortunate hack by sppavlov · · Score: 4, Informative

    We are changing the format of APNG so that all the frames live inside of a single IHDR/END. This should resolve any problems you might have. v0.3 of the spec (should be out tomorrow) will have these changes.

  30. Re:Too bad we can't use it by dastrike · · Score: 2, Informative

    See for yourselves.

    IE supports the 1-bit transparency in 8-bit indexed PNGs. The problem with this transparency method is that it is the same way GIF uses transparency, which results in ugly jaggies in most cases.

    IE does not support the alpha-channel transparency in 32-bit RGBA PNGs without using the fugly proprietary CSS mess that invokes some DirectX stuff to make the transparency work.

    --
    while true; do eject; eject -t; done
  31. Re:Stupid Question by FyRE666 · · Score: 2, Informative

    [x-mixed-replace]
    This isn't commonly done anymore...

    Probably the biggest reason being that IE on Windows doesn't support it (surprise, surprise)...