Animated PNG - A tutorial for lossless comparisons (Death to the GIF!)

alr1ght

bish gets all the credit :)
#1
These will only work in Firefox, some versions of Opera, Chrome with an addon
  • Go here to check compatibility with your browser
I mainly made this tutorial for lossless comparison pics, but you can use it for motion if you wish. Regular old gifs aren't going anywhere for normal use.

This should prove useful in the coming weeks and years to come

GUI based version is available here
  • Set delay to 3000 msec
  • Untick lossy

Tools Needed:
1. Photo Editing program (Irfanview, Photoshop, etc.)
2. APNG Assembler
3. High quality/not overly compressed screen captures (Gamersyde, Digital Foundry (sometimes), etc.)
  • If you're sourcing images from imgur, they're likely compressed to hell and not of much use.

Step 1: Download screens
  • You can figure this out.

Step 2: Convert screens to PNG format
  • Start Batch Conversion (if you wish, you can do it one by one by selecting File>Save As>PNG)

  • Add desired screens, and save as PNG

  • Click Start Batch

Step 3: Animate!
  • Extract apngasm.zip to your desktop
  • Create a new text file

  • Rename the file to apng.bat (yes, extension as well)
  • You should now have this:

  • Right click on apng.bat > Edit
  • Paste the following (this will switch between images at a 3 second interval)
    apngasm output.png screen*.png 30 10
  • Save the file. Close it.
  • Click on apng.bat
  • Tada!
  • Upload to minus.com (chrome plugin apparently has issues with other hosts)

Results (no dithered 256 color gif comparisons any more!)




tldr: save screens as .PNG, run .bat file.
 
#14
Top stuff. And at least no one is going to get all snarky when pings becomes a common phrase.

Edit: Also this gives a new lease of life to the old recursive acronym - PNGs Not GIF.
 
#16
mhh. i have the addon enabled for neogaf, as the plugin status says, but nothing moves.. or are these actually all png onlys? i like the concept of apngs and don´t get, why google still does not implement them

edit. ookay me stupid.. sry
 
#18
this is great, but if we're going to start having more animated pngs posted, can we have the ability to block them on a mobile, like we can with animated gifs?
 
#38
Ok, answering my own question, seems no ios browser support apng at this time. there is, however, a tool on app store called APNG that can show APNG in full screen if you feed it a link to the picture.

Unfortunately it seems to stretch everything to the 4:3 ratio of ipad, so the screens in OP looks weird. Probably better on iphone.