Animated Portable Network Graphics: Tutorial

Anyone who wants to add funny animations to their website, to singapore based animation company, social media articles or chat messages is usually looking for GIFs. Whether your own website, Facebook, Twitter or WhatsApp – the short image sequences and clips in the GIF format of the same name (Graphics Interchange Format) form a large part of the animated image content on the web and are used by numerous users.

This ultimately makes them a popular tool for marketers. GIF is not the only format with which several images can be combined in a single file: For example, the developers of APNG (Animated Portable Network Graphics) promise not only similar animation options, but even better quality of the sequences created.

What is behind APNG (Animated Portable Network Graphics)?

Already in 2004, Mozilla developers Stuart Parmenter and Vladimir Vukicevic released a first specification of the APNG format to allow the storage of animated website elements such as a throbber (a graphic that shows the execution of an action).

Previously, Mozilla had discontinued support for MNG (Multiple-Image Network Graphics) animations that had been used for such components, but they were tied to too large a decoder library. APNG’s decoder (which was largely taken from the model PNG format) is much smaller by comparison. Although animated PNGs are often used as well, APNG 2007 was rejected as an official extension – especially because the majority of those responsible saw PNG as a pure single format.

How is the APNG format structured?

Although APNG does not count as an official PNG extension, it is backwards compatible with the basic format. So an application program that supports PNG (but not APNG) is still able to play an APNG file, but in such a case only a single image and never the complete animation can be seen.

Technically, the APNG data stream corresponds largely to the standard PNG data stream, the structure of which can be found in the official specification of the image format. However, the Animated Portable Network Graphics format includes three additional types of chunks that describe the animation and provide additional frame data:

Animation Control Chunk (acTL)

This block informs the parser that it is an animated PNG. It shows the number of frames that make up the animation and also describes how often the animation should be played before it stops.

Frame Control Chunk (fcTL)

The Frame Control Chunk precedes each frame contained in the APNG animation. It contains a number of pieces of information, the most important of which is the display time of each frame.

Frame Data Chunk (fdAT)

Frame data chunks are structurally similar to standard PNG image data blocks (IDAT), but are additionally marked with a sequence number. The respective number is also automatically assigned to the preceding fcTL block, so that the different frames can be brought back into the correct sequence at any time.

APNG vs. GIF: The benefits of Animated Portable Network Graphics

The fact that APNG is a serious alternative to the established GIF is illustrated by a look at the properties of the Mozilla format: APNG supports a color depth of up to 24 bits and thus over 16 million colors. The GIF format with its 8-bit support is limited to just 256 colors. Of course, it is important to keep in mind that a higher quality of the animated images always leads to a growing file size. Since APNG tends to have a smaller file size and also has a better compression behavior than GIF, the quality advantage can be used in any case.

A further advantage: Animated PNG supports not only complete, but also partial (graded) transparency, which makes a natural integration of the animations into the existing web layout possible. GIF animations only provide support for simple transparency, which can create unattractive edges around the graphic (where it hits the background).

Create APNG – this is how it works

In order to create your own APNGs, you first need suitable software. This software must either be able to merge several PNG files into a single APNG file or convert foreign file formats into PNG and animated PNG. As far as these functions are concerned, as so often, you have the choice between classic desktop programs and web applications. In the following, we present APNG Assembler and the Animated PNG Maker from as examples of a solution of both types.

APNG Assembler: How to create APNG animations with the Open Source Tool

You can use the MIT- and zlib-licensed command line tool APNG Assembler on all common platforms. As a Windows user, you even have a graphical user interface that you can download free of charge from the official project page. If you make use of this possibility, start the tool by double-clicking on the file “apngasm_gui”.

In order to create your own APNGs, you will need suitable image material in PNG format: the software does not offer functions for converting images, animations or even videos in other formats such as JPEG, GIF or MPEG. Once you have the desired images ready, simply drag and drop them into the “Input files” field.

You Might Also Like

Leave a Reply