Hacker Newsnew | past | comments | ask | show | jobs | submitlogin
APNG-canvas – Display animated PNG files in the browser (davidmz.github.io)
24 points by X4 on Aug 4, 2013 | hide | past | favorite | 12 comments


I've been wondering about the point of APNG lately.

1. The gif patents are expired. So that whole drama is done.

2. If you want more colors, couldn't you just do a doublesize dithered gif, display at half size and let the browser pixel averaging algorithm take care of the rest?

3. Would the above result in much larger files than APNG? i don't know, maybe that's the clincher.

4. APNG does not provide any additional API advantage over GIF. I still can't control when it plays, how fast it plays, or easily provide the ability to replay it (without going round the long, glitchy looking way by forcing a reload of it)

Incidentally, you know what does provide a pretty good and well supported javascript api? This is going to sound weird, but you can make just a plain PNG image strip, wrap an img tag in a marquee tag, and get full control over how it works, with universal browser support[1] : Play, pause, stop, rewind, speed, looping, etc. etc.

[1]:Except for bloody webkit, in which recent versions have changed the behaviour of the marquee tag with relation to other browsers for some fucking reason. :(


The main advantage is that PNG compression allows for 8-bit transparency, rather than 1-bit transparency in the GIF format. This means that you can have partial or gradated transparency that looks nice when placed on top of other backgrounds. Even opaque objects with curved edges have nice anti-aliasing to prevent jagged edges.


This is why I'd like to see APNGs catch up. There's a huge difference between 1-bit and 8-bit transparency, dithering and resizing would not come anywhere close to simulate this.


2. If you want more colors, couldn't you just do a doublesize dithered gif, display at half size and let the browser pixel averaging algorithm take care of the rest?

Browsers are often horrible at resizing files; it would not look good at all.

4. APNG does not provide any additional API advantage over GIF. I still can't control when it plays, how fast it plays, or easily provide the ability to replay it (without going round the long, glitchy looking way by forcing a reload of it)

If you want to mess with speed, save it. If you want a way to trigger replay in your browser, file a bug report.

APNG does everything GIF does but better, and it is a small attack surface compared to MNG or video formats. It's also efficient compared to handling video embeds.


"Browsers are often horrible at resizing files; it would not look good at all."

What's with the weasel words? You can name names if you want. Which browsers? what do they do that makes them look horrible? The only browsers left I know of that use nearest neighbour resampling are ie7 and ie8.

"If you want to mess with speed, save it."

You're joking, right?

"If you want a way to trigger replay in your browser, file a bug report."

you definitely are joking. You think I'm the first person to ever want that?


I'm not joking when I say right click should have a repeat option. Why does a suggestion to file a bug report sound dismissive to you? It's not like I told you to code it yourself.

I'm not joking about changing speed; how often do you want to play a video in slow motion? It's not really the browser's job to do that.

I used weasel words because I didn't want to go testing. In addition to me remembering additional issues on my phone, Opera and IE10 do bad resampling, and chrome does a weird thing where it shows bad resampling for a couple seconds before replacing it with good resampling. Specifically, when I say 'bad' here, it's not nearest neighbor but it's not using a proper method either. Small details, such as lines 3-4 pixels wide, disappear entirely in spots when I zoom out. They're using algorithms that only sample a couple of points, which breaks down terribly on sizes like 33%.

Edit: I found a mozilla bug report claiming that high-quality resizing is turned off if an image is on a page multiple times. Ech.


The suggestion to file a bug report doesn't sound dismissive. It sounds naive. It assumes that I wouldn't go to the bugzilla and just see, already there, these: https://bugzilla.mozilla.org/show_bug.cgi?id=617875

(2010)

https://bugzilla.mozilla.org/show_bug.cgi?id=284511

(2005)

https://bugzilla.mozilla.org/show_bug.cgi?id=899861

(2013)

https://bugzilla.mozilla.org/show_bug.cgi?id=211145

(2003)

https://bugzilla.mozilla.org/show_bug.cgi?id=96873

(2001)

https://bugzilla.mozilla.org/show_bug.cgi?id=523973

(2009)

https://bugzilla.mozilla.org/show_bug.cgi?id=629819

(2011)

https://bugzilla.mozilla.org/show_bug.cgi?id=619957

(2010)

https://bugzilla.mozilla.org/show_bug.cgi?id=873881

(2013)

Need I go on? I laughed because the problem with gifs is so obvious and painful I couldn't imagine there wouldn't be a pile of really old bugs there already. Gifs on page don't really work right. They're not consistent, predictable, and none of the many inconsistent ways they do behave in is what anyone expects. But this is all well known by anyone but the browser developers, it seems. Filing a duplicate is a waste of everyone's time.

"I'm not joking about changing speed; how often do you want to play a video in slow motion? It's not really the browser's job to do that."

I mean changing speed for design effects. We're not talking about video here. Remember? We're talking about gifs/pngs. Totally different thing. Totally different use cases. Admittedly it's not often I'd need to do that. Really adding play/rewind/pause/seek, in that order, is more important.

"Small details, such as lines 3-4 pixels wide, disappear entirely in spots when I zoom out. They're using algorithms that only sample a couple of points, which breaks down terribly on sizes like 33%."

Fascinating. Maybe I should do some tests. Do you have example images where you'd expect problems to happen?


> APNG does not provide any additional API advantage over GIF. I still can't control ...

That is more of a feature than a bug. There's many situations where you may want simple animations without the overhead of a 'player'.

Animated GIF is a well-established feature of the WWW. But it's silly that we're still stuck with GIF's limitations due to lack of browser support for something better.


What actual overhead (other than developer resources) is there for simply providing DOM hooks?


In case you want native APNG support on Chrome, you can install this open-source Chrome Add-On from the same author: https://github.com/davidmz/apng-chrome

One could say that this is a pendant to: "Animated gifs the easy way" to http://www.sublimetext.com/~jps/animated_gifs_the_hard_way.h...


See also: http://devongovett.github.io/png.js/ code: https://github.com/devongovett/png.js

also works in Node (png-js on npm) if you want raw pixel values there.


Thank you for posting that, it may be helpful, but it's ~twice larger than apng. I think that matters when served to clients.




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: