

APNG-canvas – Display animated PNG files in the browser - X4
http://davidmz.github.io/apng-canvas/
In case you want native APNG support on Chrome, you can install this chrome addon from the same author: https:&#x2F;&#x2F;github.com&#x2F;davidmz&#x2F;apng-chrome
======
TheZenPsycho
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. :(

~~~
Dylan16807
_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.

~~~
TheZenPsycho
"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?

~~~
Dylan16807
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.

~~~
TheZenPsycho
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](https://bugzilla.mozilla.org/show_bug.cgi?id=617875)

(2010)

[https://bugzilla.mozilla.org/show_bug.cgi?id=284511](https://bugzilla.mozilla.org/show_bug.cgi?id=284511)

(2005)

[https://bugzilla.mozilla.org/show_bug.cgi?id=899861](https://bugzilla.mozilla.org/show_bug.cgi?id=899861)

(2013)

[https://bugzilla.mozilla.org/show_bug.cgi?id=211145](https://bugzilla.mozilla.org/show_bug.cgi?id=211145)

(2003)

[https://bugzilla.mozilla.org/show_bug.cgi?id=96873](https://bugzilla.mozilla.org/show_bug.cgi?id=96873)

(2001)

[https://bugzilla.mozilla.org/show_bug.cgi?id=523973](https://bugzilla.mozilla.org/show_bug.cgi?id=523973)

(2009)

[https://bugzilla.mozilla.org/show_bug.cgi?id=629819](https://bugzilla.mozilla.org/show_bug.cgi?id=629819)

(2011)

[https://bugzilla.mozilla.org/show_bug.cgi?id=619957](https://bugzilla.mozilla.org/show_bug.cgi?id=619957)

(2010)

[https://bugzilla.mozilla.org/show_bug.cgi?id=873881](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?

------
X4
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](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...](http://www.sublimetext.com/~jps/animated_gifs_the_hard_way.html)

------
devongovett
See also:
[http://devongovett.github.io/png.js/](http://devongovett.github.io/png.js/)
code:
[https://github.com/devongovett/png.js](https://github.com/devongovett/png.js)

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

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

