APNG
Encyclopedia
The Animated Portable Network Graphics (APNG) file format
is an unofficial extension to the Portable Network Graphics (PNG) specification. It allows for animated
PNG files that work similarly to animated GIF files, while supporting 24-bit images and 8-bit transparency not available for GIFs. It also retains backward compatibility
with non-animated PNG files.
The first frame
of an APNG file is stored as a normal PNG stream, so most old PNG decoders are able to display the first frame of an APNG file. The frame speed data and extra animation frames are stored in extra chunks (as provided for by the original PNG specification).
APNG competes with Multiple-image Network Graphics (MNG), a comprehensive format for bitmapped animations created by the same team as PNG. APNG's advantage is the smaller library size and compatibility with older PNG implementations.
of the Mozilla Corporation
to allow for storing the animations needed for interfaces such as throbber
s. Mozilla had scrapped support for MNG
animations, which provides a superset of APNG functionality, citing concerns about the large file size required for the expansive MNG decoder library; the APNG decoder, built on the back of the PNG decoder, was a much smaller component.
Among users and maintainers of the PNG and MNG formats, APNG was not well received. In particular, PNG was conceived to be a single-image format. APNG hides the subsequent frames in PNG ancillary chunks in such a way that APNG-unaware applications would ignore them, but there are otherwise no changes to the format to allow software to distinguish between animated and non-animated images. Some of the main concerns arising from this were the inability of applications to negotiate for PNG and APNG, or distinguish between PNG and APNG once received, or for legacy software to even inform users that there are additional frames. In effect this was a repeat of some of the same mistakes made in the GIF format 10 years earlier. Glenn Randers-Pehrson spearheaded efforts to reconcile the PNG purists' position with that of APNG proponents by recommending changes to APNG's format and proposing the use of a unique MIME type
(e.g. video/png), but Mozilla rejected these proposals in favour of full backward compatibility.
The PNG group officially rejected APNG as an official extension on April 20, 2007. There have been several subsequent proposals for a simple animated graphics format based on PNG using several different approaches.
Mozilla Firefox
added support for APNG in version 3
trunk builds on March 23, 2007. However, because libpng is the PNG Group's reference implementation of the official specification, APNG support can never be supported in the main libpng distribution so long as it remains unratified by the Group. Iceweasel 3 now supports APNG by using Mozilla's unofficial variant of libpng.
In 2008 WorldDMB
adopted APNG as a backward compatible extension to enable animation as part of the MOT SlideShow user application for Digital Radio. "APNG 1.0 Specification - Animated Portable Network Graphics" is included as normative Annex A in the ETSI
standard TS 101 499 V2.2.1 (2008-07).
In 2010 Commercial Radio Broadcasters in Sydney began to include APNG animations in DAB+ digital radio broadcasts. These APNG animations are carried by the "MOT slideshow" application which accompanies the audio services. It is expected that other cities in Australia will follow in early 2011.
Mozilla's role in extending the PNG format to APNG echoes Netscape
's much earlier role in popularizing animated GIFs.
A server-side library exists that allows web browsers that support the canvas tag, but do not support APNG, to display APNGs. Examples of such browsers include Google Chrome, Internet Explorer 9, and Apple Safari.
There are about 20 different chunk types, but for a minimal PNG, only 3 are required: The IHDR (image header) chunk, one or more IDAT (image data) chunks and the IEND (image end) chunk.
The next graphic shows the contents of such a minimal PNG file, representing just one red pixel. The PNG signature bytes and the individual chunks are marked with colors. On the left side, the byte values are shown in hex format
, on the right side as their equivalent characters from ISO-8859-1 with unrecognized and control characters replaced with periods. This dual display is common for hex editor
s. Note that the chunks are easy to identify because of their human readable 4-byte type names (in this example IHDR, IDAT & IEND).
The APNG specification introduces three new chunks: The animation control chunk (acTL), the frame control chunk (fcTL) and the frame data chunk (fdAT). The animation control chunk is a kind of "marker" chunk, telling the parser that this is an animated png. It contains information about how many frames the animation consists of and how many times the animation should play before coming to rest. The frame control chunk contains several bits of information, the most important of which is the display time of the following frame. The frame data chunks have the same structure as the IDAT chunks, except preceded by a sequence number. Sequence numbers apply to both frame control and frame data chunks, which together follow a common sequence, thus enabling the order and timing of frames to be recovered should an APNG-unaware PNG editor re-order them as allowed by PNG chunk ordering rules.
A program wanting to assemble several individual PNG files to an animated PNG could proceed as follows:
The next diagram illustrates this process.
The PNG specification was designed with future extensions in mind. An application reading a PNG file is supposed to simply ignore any chunks which it does not understand. This is the reason why APNG is "backwards compatible". Existing applications just recognize the first frame and ignore the additional animation chunks.
support.
The GIF file format has better application and browser support than APNG, but it is limited to 256 colors per frame and supports only 1 bit alpha transparency
, by mapping one of the palette colors to transparent.
SVG
combined with scripting or SMIL
can animate vector graphics and can incorporate raster graphics. (See SVG animation
.)
Dynamic graphics created with HTML 5
canvas Object can also be animated.
An alternative method for animations in web pages is to use conventional static images and animate them using JavaScript
, Adobe Flash
, Microsoft Silverlight
, Java
or other plugin based technologies.
File format
A file format is a particular way that information is encoded for storage in a computer file.Since a disk drive, or indeed any computer storage, can store only bits, the computer must have some way of converting information to 0s and 1s and vice-versa. There are different kinds of formats for...
is an unofficial extension to the Portable Network Graphics (PNG) specification. It allows for animated
Computer animation
Computer animation is the process used for generating animated images by using computer graphics. The more general term computer generated imagery encompasses both static scenes and dynamic images, while computer animation only refers to moving images....
PNG files that work similarly to animated GIF files, while supporting 24-bit images and 8-bit transparency not available for GIFs. It also retains backward compatibility
Backward compatibility
In the context of telecommunications and computing, a device or technology is said to be backward or downward compatible if it can work with input generated by an older device...
with non-animated PNG files.
The first frame
Film frame
In filmmaking, video production, animation, and related fields, a film frame or video frame is one of the many still images which compose the complete moving picture...
of an APNG file is stored as a normal PNG stream, so most old PNG decoders are able to display the first frame of an APNG file. The frame speed data and extra animation frames are stored in extra chunks (as provided for by the original PNG specification).
APNG competes with Multiple-image Network Graphics (MNG), a comprehensive format for bitmapped animations created by the same team as PNG. APNG's advantage is the smaller library size and compatibility with older PNG implementations.
History
The APNG specification was created in 2004 by Stuart Parmenter and Vladimir VukićevićVladimir Vukićević
Vladimir Vukićević, born April 29, 1979, is an American-Serbian software engineer who has worked on many open source projects. He is known mostly for his work on open source graphics libraries, including those used in the Mozilla project....
of the Mozilla Corporation
Mozilla Corporation
The Mozilla Corporation is a wholly owned subsidiary of the Mozilla Foundation that coordinates and integrates the development of Internet-related applications such as the Mozilla Firefox and SeaMonkey Navigator web browsers and the Mozilla Thunderbird email client by a growing global community of...
to allow for storing the animations needed for interfaces such as throbber
Throbber
A throbber is a graphic found in a graphical user interface of a computer program that animates to show the user that the program is performing an action .-Typical characteristics:...
s. Mozilla had scrapped support for MNG
MNG
Multiple-image Network Graphics is a public graphics file format for animated images.MNG is closely related to the PNG image format. When PNG development started in early 1995, developers decided not to incorporate support for animation, not least because this feature of GIF was seldom used at the...
animations, which provides a superset of APNG functionality, citing concerns about the large file size required for the expansive MNG decoder library; the APNG decoder, built on the back of the PNG decoder, was a much smaller component.
Among users and maintainers of the PNG and MNG formats, APNG was not well received. In particular, PNG was conceived to be a single-image format. APNG hides the subsequent frames in PNG ancillary chunks in such a way that APNG-unaware applications would ignore them, but there are otherwise no changes to the format to allow software to distinguish between animated and non-animated images. Some of the main concerns arising from this were the inability of applications to negotiate for PNG and APNG, or distinguish between PNG and APNG once received, or for legacy software to even inform users that there are additional frames. In effect this was a repeat of some of the same mistakes made in the GIF format 10 years earlier. Glenn Randers-Pehrson spearheaded efforts to reconcile the PNG purists' position with that of APNG proponents by recommending changes to APNG's format and proposing the use of a unique MIME type
Internet media type
An Internet media type, originally called a MIME type after MIME and sometimes a Content-type after the name of a header in several protocols whose value is such a type, is a two-part identifier for file formats on the Internet.The identifiers were originally defined in RFC 2046 for use in email...
(e.g. video/png), but Mozilla rejected these proposals in favour of full backward compatibility.
The PNG group officially rejected APNG as an official extension on April 20, 2007. There have been several subsequent proposals for a simple animated graphics format based on PNG using several different approaches.
Mozilla Firefox
Mozilla Firefox
Mozilla Firefox is a free and open source web browser descended from the Mozilla Application Suite and managed by Mozilla Corporation. , Firefox is the second most widely used browser, with approximately 25% of worldwide usage share of web browsers...
added support for APNG in version 3
Mozilla Firefox 3
Mozilla Firefox 3.0 is a version of the Firefox web browser released on June 17, 2008 by the Mozilla Corporation.Firefox 3.0 uses version 1.9 of the Gecko layout engine for displaying web pages. This version fixes many bugs, improves standard compliance, and implements many new web APIs compared to...
trunk builds on March 23, 2007. However, because libpng is the PNG Group's reference implementation of the official specification, APNG support can never be supported in the main libpng distribution so long as it remains unratified by the Group. Iceweasel 3 now supports APNG by using Mozilla's unofficial variant of libpng.
In 2008 WorldDMB
WorldDMB
The WorldDMB Forum is responsible for defining the standards of the Eureka-147 family which includes DAB and DAB+ for digital radio and DMB for radio and mobile TV....
adopted APNG as a backward compatible extension to enable animation as part of the MOT SlideShow user application for Digital Radio. "APNG 1.0 Specification - Animated Portable Network Graphics" is included as normative Annex A in the ETSI
European Telecommunications Standards Institute
The European Telecommunications Standards Institute is an independent, non-profit, standardization organization in the telecommunications industry in Europe, with worldwide projection...
standard TS 101 499 V2.2.1 (2008-07).
In 2010 Commercial Radio Broadcasters in Sydney began to include APNG animations in DAB+ digital radio broadcasts. These APNG animations are carried by the "MOT slideshow" application which accompanies the audio services. It is expected that other cities in Australia will follow in early 2011.
Mozilla's role in extending the PNG format to APNG echoes Netscape
Netscape
Netscape Communications is a US computer services company, best known for Netscape Navigator, its web browser. When it was an independent company, its headquarters were in Mountain View, California...
's much earlier role in popularizing animated GIFs.
Application support
| Type | | Application | Support | |
|---|---|---|---|
| Image processing Image processing In electrical engineering and computer science, image processing is any form of signal processing for which the input is an image, such as a photograph or video frame; the output of image processing may be either an image or, a set of characteristics or parameters related to the image... applications |
Adobe Photoshop Adobe Photoshop Adobe Photoshop is a graphics editing program developed and published by Adobe Systems Incorporated.Adobe's 2003 "Creative Suite" rebranding led to Adobe Photoshop 8's renaming to Adobe Photoshop CS. Thus, Adobe Photoshop CS5 is the 12th major release of Adobe Photoshop... |
||
| cphktool APNG Anime Maker | |||
| Gamani GIF Movie Gear | |||
| GIMP GIMP GIMP is a free software raster graphics editor. It is primarily employed as an image retouching and editing tool and is freely available in versions tailored for most popular operating systems including Microsoft Windows, Apple Mac OS X, and Linux.In addition to detailed image retouching and... |
|||
| ImageJ ImageJ ImageJ is a public domain, Java-based image processing program developed at the National Institutes of Health. ImageJ was designed with an open architecture that provides extensibility via Java plugins and recordable macros. Custom acquisition, analysis and processing plugins can be developed using... |
|||
| Imagine Imagine (graphics software) Imagine is an image and animation viewer developed by Chun Sejin for Microsoft Windows, capable of viewing numerous image formats, including ANI, ANM , BMP, CorelDRAW, CDT, PAT, CMX, CUR, DCX, DDS, EMF, GIF, ICL, ICO, JPE, JPEG, MacPaint, MNG, PBM, PCD, PCX, PGM, PIC, CEL, PNG, PPM, PSD, PSP , RAS,... |
|||
| ImageMagick ImageMagick ImageMagick is an open source software suite for displaying, converting, and editing raster image files. It can read and write over 100 image file formats. ImageMagick is licensed under the Apache 2.0 license.- Features and capabilities:... |
|||
| Konvertor | |||
| KSquirrel KSquirrel KSquirrel is an image viewer for the KDE desktop environment with a disk navigator, file tree, thumbnails, extended thumbnails, dynamic format support, DCOP interface, KEXIF and KIPI plugins support. The current version is 0.8.0 . It supports , including PNG, JPEG, PSD, APNG, GIF, WMF, OpenEXR and... |
|||
| Paint.NET Paint.NET Paint.NET is a proprietary freeware raster graphics editor program for Microsoft Windows, developed on the .NET Framework. Originally created by Rick Brewster as a Washington State University student project, Paint.NET has evolved from a simple replacement for the Microsoft Paint program, which is... |
|||
| XnView XnView XnView is a cross-platform image viewer used for viewing, converting, organising and editing graphical & video files. It is free of charge for private, educational and non-profit organisations... |
|||
| Web browser Web browser A web browser is a software application for retrieving, presenting, and traversing information resources on the World Wide Web. An information resource is identified by a Uniform Resource Identifier and may be a web page, image, video, or other piece of content... s |
Gecko Gecko (layout engine) Gecko is a free and open source layout engine used in many applications developed by Mozilla Foundation and the Mozilla Corporation , as well as in many other open source software projects.... -based |
Mozilla Firefox Mozilla Firefox Mozilla Firefox is a free and open source web browser descended from the Mozilla Application Suite and managed by Mozilla Corporation. , Firefox is the second most widely used browser, with approximately 25% of worldwide usage share of web browsers... |
|
| SeaMonkey SeaMonkey SeaMonkey is a free and open source cross-platform Internet suite. It is the continuation of the former Mozilla Application Suite, based on the same source code... |
|||
| Iceweasel and other rebranded Mozilla products by the Debian project | |||
| Opera Opera (web browser) Opera is a web browser and Internet suite developed by Opera Software with over 200 million users worldwide. The browser handles common Internet-related tasks such as displaying web sites, sending and receiving e-mail messages, managing contacts, chatting on IRC, downloading files via BitTorrent,... |
|||
| Internet Explorer Internet Explorer Windows Internet Explorer is a series of graphical web browsers developed by Microsoft and included as part of the Microsoft Windows line of operating systems, starting in 1995. It was first released as part of the add-on package Plus! for Windows 95 that year... |
|||
| WebKit WebKit WebKit is a layout engine designed to allow web browsers to render web pages. WebKit powers Google Chrome and Apple Safari and by October 2011 held over 33% of the browser market share between them. It is also used as the basis for the experimental browser included with the Amazon Kindle ebook... -based |
Safari Safari (web browser) Safari is a web browser developed by Apple Inc. and included with the Mac OS X and iOS operating systems. First released as a public beta on January 7, 2003 on the company's Mac OS X operating system, it became Apple's default browser beginning with Mac OS X v10.3 "Panther". Safari is also the... |
||
| Google Chrome Google Chrome Google Chrome is a web browser developed by Google that uses the WebKit layout engine. It was first released as a beta version for Microsoft Windows on September 2, 2008, and the public stable release was on December 11, 2008. The name is derived from the graphical user interface frame, or... /Chromium Chromium (web browser) Chromium is the open source web browser project from which Google Chrome draws its source code. The project's hourly Chromium snapshots appear essentially similar to the latest builds of Google Chrome aside from the omission of certain Google additions, most noticeable among them: Google's... |
|||
| Mobile Mobile computing Mobile computing is a form of human–computer interaction by which a computer is expected to be transported during normal usage. Mobile computing has three aspects: mobile communication, mobile hardware, and mobile software... |
iPhone/iOS | ||
| Android | |||
| Opera Mobile | Windows Mobile | ||
A server-side library exists that allows web browsers that support the canvas tag, but do not support APNG, to display APNGs. Examples of such browsers include Google Chrome, Internet Explorer 9, and Apple Safari.
Technical details
A PNG file consists of the PNG Signature (8 special bytes), followed by a series of chunks. A chunk consists of four parts: Length (4 bytes), Chunk type (4 bytes), Chunk data (length bytes) and CRC (Cyclic Redundancy Code / Checksum, 4 bytes).| Length (4 bytes) |
Chunk type (4 bytes) |
Chunk data (length bytes) |
CRC (4 bytes) |
There are about 20 different chunk types, but for a minimal PNG, only 3 are required: The IHDR (image header) chunk, one or more IDAT (image data) chunks and the IEND (image end) chunk.
89 50 4E 47 0D 0A 1A 0APNG signature |
IHDRImage header |
IDATImage data |
IENDImage end |
The next graphic shows the contents of such a minimal PNG file, representing just one red pixel. The PNG signature bytes and the individual chunks are marked with colors. On the left side, the byte values are shown in hex format
Hexadecimal
In mathematics and computer science, hexadecimal is a positional numeral system with a radix, or base, of 16. It uses sixteen distinct symbols, most often the symbols 0–9 to represent values zero to nine, and A, B, C, D, E, F to represent values ten to fifteen...
, on the right side as their equivalent characters from ISO-8859-1 with unrecognized and control characters replaced with periods. This dual display is common for hex editor
Hex editor
A hex editor is a type of computer program that allows a user to manipulate the fundamental binary data that makes up computer files. Note that computer files can be very small to very large...
s. Note that the chunks are easy to identify because of their human readable 4-byte type names (in this example IHDR, IDAT & IEND).
| Hex | ISO-8859-1 |
|---|---|
|
|
The APNG specification introduces three new chunks: The animation control chunk (acTL), the frame control chunk (fcTL) and the frame data chunk (fdAT). The animation control chunk is a kind of "marker" chunk, telling the parser that this is an animated png. It contains information about how many frames the animation consists of and how many times the animation should play before coming to rest. The frame control chunk contains several bits of information, the most important of which is the display time of the following frame. The frame data chunks have the same structure as the IDAT chunks, except preceded by a sequence number. Sequence numbers apply to both frame control and frame data chunks, which together follow a common sequence, thus enabling the order and timing of frames to be recovered should an APNG-unaware PNG editor re-order them as allowed by PNG chunk ordering rules.
A program wanting to assemble several individual PNG files to an animated PNG could proceed as follows:
- Take all chunks of the first PNG file as a building basis.
- Insert an animation control chunk (acTL) after the image header chunk (IHDR).
- If the first PNG is to be part of the animation, insert a frame control chunk (fcTL) before the image data chunk (IDAT).
- For each of the remaining frames, add a frame control chunk (fcTL) and a frame data chunk (fdAT) before the image end chunk (IEND). The content for the frame data chunks (fdAT) is taken from the image data chunks (IDAT) of their respective source images.
The next diagram illustrates this process.
Alternatives
The MNG file format is a more powerful alternative to APNG, although it's a more complex format and has less web browserWeb browser
A web browser is a software application for retrieving, presenting, and traversing information resources on the World Wide Web. An information resource is identified by a Uniform Resource Identifier and may be a web page, image, video, or other piece of content...
support.
The GIF file format has better application and browser support than APNG, but it is limited to 256 colors per frame and supports only 1 bit alpha transparency
Transparency (graphic)
Transparency is possible in a number of graphics file formats. The term transparency is used in various ways by different people, but at its simplest there is "full transparency" i.e. something that is completely invisible. Of course, only part of a graphic should be fully transparent, or there...
, by mapping one of the palette colors to transparent.
SVG
Scalable Vector Graphics
Scalable Vector Graphics is a family of specifications of an XML-based file format for describing two-dimensional vector graphics, both static and dynamic . The SVG specification is an open standard that has been under development by the World Wide Web Consortium since 1999.SVG images and their...
combined with scripting or SMIL
Synchronized Multimedia Integration Language
SMIL , the Synchronized Multimedia Integration Language, is a W3C recommended XML markup language for describing multimedia presentations. It defines markup for timing, layout, animations, visual transitions, and media embedding, among other things...
can animate vector graphics and can incorporate raster graphics. (See SVG animation
SVG animation
Animation of Scalable Vector Graphics, an open XML-based standard vector graphics format, is possible through various means:*Scripting: ECMAScript is a primary means of creating animations and interactive user interfaces within SVG....
.)
Dynamic graphics created with HTML 5
HTML 5
HTML5 is a language for structuring and presenting content for the World Wide Web, and is a core technology of the Internet originally proposed by Opera Software. It is the fifth revision of the HTML standard and is still under development...
canvas Object can also be animated.
An alternative method for animations in web pages is to use conventional static images and animate them using JavaScript
JavaScript
JavaScript is a prototype-based scripting language that is dynamic, weakly typed and has first-class functions. It is a multi-paradigm language, supporting object-oriented, imperative, and functional programming styles....
, Adobe Flash
Adobe Flash
Adobe Flash is a multimedia platform used to add animation, video, and interactivity to web pages. Flash is frequently used for advertisements, games and flash animations for broadcast...
, Microsoft Silverlight
Microsoft Silverlight
Microsoft Silverlight is an application framework for writing and running rich Internet applications, with features and purposes similar to those of Adobe Flash. The run-time environment for Silverlight is available as a plug-in for web browsers running under Microsoft Windows and Mac OS X...
, Java
Java (programming language)
Java is a programming language originally developed by James Gosling at Sun Microsystems and released in 1995 as a core component of Sun Microsystems' Java platform. The language derives much of its syntax from C and C++ but has a simpler object model and fewer low-level facilities...
or other plugin based technologies.
External links
- The APNG specification at mozilla.orgMozilla FoundationThe Mozilla Foundation is a non-profit organization that exists to support and provide leadership for the open source Mozilla project. The organization sets the policies that govern development, operates key infrastructure and controls trademarks and other intellectual property...
’s WikiWikiA wiki is a website that allows the creation and editing of any number of interlinked web pages via a web browser using a simplified markup language or a WYSIWYG text editor. Wikis are typically powered by wiki software and are often used collaboratively by multiple users. Examples include... - Mozilla's APNG Demo Site
- Implementation work
- APNG tests for browsers supporting APNG 1.0
- APNGs.com, an online APNG creation tool with an APNG gallery
- APNG extension for Google Chrome
- APNG viewer utility for iOS