4 ms·

APNG-canvas – Display animated PNG files in the browser

24 points by X4 13y ago

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

X4 13y ago
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.html http://www.sublimetext.com/~jps/animated_gifs_the_hard_way.h...
devongovett 13y ago
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 13y ago
  Thank you for posting that, it may be helpful, but it's ~twice larger than apng. I think that matters when served to clients.
TheZenPsycho 13y ago
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. :(
- sprokolopolis 13y ago
  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.
  - Mahn 13y ago
    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.
- Dylan16807 13y ago
  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 13y ago
    "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?

24 points by X4 13y ago

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

X4 13y ago

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.html http://www.sublimetext.com/~jps/animated_gifs_the_hard_way.h...

devongovett 13y ago

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 13y ago
Thank you for posting that, it may be helpful, but it's ~twice larger than apng. I think that matters when served to clients.

TheZenPsycho 13y ago

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. :(

sprokolopolis 13y ago
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.
- Mahn 13y ago
  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.
Dylan16807 13y ago
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 13y ago
  "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?