Skip to main content

4 free tools to create Animated PNG (APNG)

The Animated Portable Network Graphics (APNG) is an unofficial extension to the Portable Network Graphics (PNG) file format that supports animation. PNG does not support animation natively, but APNG brings animation to PNG files that work similarly to animated GIF files. APNG supports 24-bit images while retaining 8-bit transparency which is not available in GIFs. It also retains backward compatibility with non-animated PNG files. APNG is a new technology which is still not adopted by most browsers; Firefox 3 and Opera 9.5 are the only browsers that support APNG.

Animated_PNG_example 

Example animated PNG.

Why APNG is better than GIF?

From Mozilla Labs:

The two most apparent problems are that GIF images can only contain 256 colors, and lack support for partially-transparent pixels. This results in images which often look grainy or rough, and which do not smoothly blend into their background.

Let’s take the following example:

apng-animation-gif apng-animation-gif

Both show the same GIF animation. Against white it looks great but it's not so nice against the colored background.

But with animated PNGs, a single animation works against any background because APNG supports transparency that provides better resolution and color. See how the following animated PNG looks equally good against both backgrounds. You will require Firefox 3 and Opera 9.5 or higher to view it. (Animated images credit: GIF Movie Gear)

apng-animation-png apng-animation-png

APNG is still not ready for the web due to it’s limited support. But within a few years as browsers start embracing the new format, APNG will start getting wider acceptance among web designers and web users.

How to create animated PNG?

Even though APNG is still some way off, we can get ourselves acquainted with some of the tools required to create them. So here are 4 free tools to create animated PNGs.

1. APNG Editor is a simple Firefox addon for creating animated PNGs inside Firefox. It can create animation by assembling individual images, or by running a user-created script to render each frame in a Canvas tag. It’s still beta but functional and includes several features such as:

  • Load each frame from any PNG file
  • Set loop control (play forever, once, X times)
  • Optionally set the first frame (displayed in older browsers) to be hidden in newer browsers.
  • Set the offset of each frame from the top-left corner of the animation
  • Set the time to display each frame
  • Set disposal options (clear image, keep image, revert frame)

 apng-editor

2. APNG Anime Maker is a standalone animated PNG maker. It too enables you to load individual frames, set delay and frame offset. It includes a number of disposal methods (keep background, keep previous image, clear image) and blending methods (overwrite the current contents of the frame's output buffer region; compose frame onto the output buffer based on its alpha). Additionally it allows optimization of the images and adjusting of compression levels.

apng-anime-maker

3. JapngEditor is a Java based APNG editor that requires Java 6. Features includes frame delays, disposal methods, blending methods and frame offsets.

japang

4. APNG Assembler is an online application that allows you to create an
Animated PNG from a set of static PNG files. The sequence of PNG files should have the same size, color depth, transparency, color pallete etc and ordered alphabetically or numerically. This set of PNGs should then be archived in the ZIP format and upload online. The online tool then creates an animated PNG from the uploaded files with a time delay set by the user.

Comments

  1. 5. VirtualDub APNG Mod

    https://sourceforge.net/projects/vdubapngmod/

    ReplyDelete
  2. http://animatedpngs.com
    Free Browser Based APNG Editor. Creates an APNG from any PNG, JPG, and GIF files. Features Animation Preview, the option to stretch frames to fit that have different dimensions, and control over the default image shown to non-apng capable browsers, including the option to embed a warning message to non-apng supporting browsers.

    ReplyDelete
  3. Great tip! Nice info and presentation. It depends however on your desired outcome. There are more software or program like WeGIF - http://www.wegif.com - that are dedicated to GIFs in which they are easier to create animation with. But if you really need to use PNG to your project, then its time you create animation in a PNG format.

    ReplyDelete
  4. APNG Assembler 2.0

    http://littlesvr.ca/apng/assembler-2.0/assembler2.php

    ReplyDelete
  5. DO NOT DOWNLOAD THIS! It gave me a virus that instantly crashes Firefox when opening it, I'm using Google Chrome right now.

    ReplyDelete
  6. No virus, retard. I checked them all. It's your computer. I hate it that whenever something goes wrong the noobs immediately blame viruses instead of the 10,000,000,000 other things that could possibly go wrong.

    ReplyDelete
  7. Let me recommend free online service.
    Creating GIF animations
    http://toolson.net/GifAnimation

    Resizing GIF without losing animation
    http://toolson.net/GifResizer

    Creating animation from WEBcam
    http://toolson.net/WebcamAvatar

    ReplyDelete
  8. finally, there is a jquery plugin to create transparent png animations its called AnimatedPNG http://animatedpng.info/

    ReplyDelete
  9. well thanks mate, but how to use VirtualDub APNG Mod?

    ReplyDelete
  10. I use virtual dub apng mod All the time it rocks!
    http://sourceforge.net/projects/vdubapngmod/

    BEST APP 2 USE!

    Check out my apngs on DeviantArt
    http://mandelscape.deviantart.com/

    ReplyDelete
  11. Some are really retard....They don't care about giving info, it's those ignorant that always post " FAKE, VIRUS, CRAp etc..." but spend most of there time playing game, watching porn, drinking beer. They think they're smart, but they don't EDUCATE them self, so for them that they only way to prove that they're not USELESS.

    THX ANYWAY FOR THE INFO GUY !

    ReplyDelete
  12. Which of these programs is avalieble in Spanish?
    Thanks!

    ReplyDelete
  13. RealWorld Paint can create and edit APNG files (and is available in Spanish and other languages BTW) http://www.rw-designer.com/image-editor

    ReplyDelete

Post a Comment

Popular posts from this blog

How to Record CPU and Memory Usage Over Time in Windows?

Whenever the computer is lagging or some application is taking too long to respond, we usually fire up task manager and look under the Performance tab or under Processes to check on processor utilization or the amount of free memory available. The task manager is ideal for real-time analysis of CPU and memory utilization. It even displays a short history of CPU utilization in the form of a graph. You get a small time-window, about 30 seconds or so, depending on how large the viewing area is.

How to Schedule Changes to Your Facebook Page Cover Photo

Facebook’s current layout, the so called Timeline, features a prominent, large cover photo that some people are using in a lot of different creative ways. Timeline is also available for Facebook Pages that people can use to promote their website or business or event. Although you can change the cover photo as often as you like, it’s meant to be static – something which you design and leave it for at least a few weeks or months like a redesigned website. However, there are times when you may want to change the cover photo frequently and periodically to match event dates or some special promotion that you are running or plan to run. So, here is how you can do that.

Diagram 101: Different Types of Diagrams and When To Use Them

Diagrams are a great way to visualize information and convey meaning. The problem is that there’s too many different types of diagrams, so it can be hard to know which ones you should use in any given situation. To help you out, we’ve created this diagram that lays out the 7 most common types of diagrams and when they’re best used: