Introduction
This report summarizes the implementation status of PNG, Third Edition at the time of publication: in browsers, image authoring tools, image viewers and other image utilities.
The substantive changes in PNG Third Edition, compared to the Second Edition are divided into new (or newly-standardized) features, and substantive changes to existing features.
1. Animated PNG (APNG)
Although
proposed in 2007
and widely implemented in browsers between 2009 and 2017,
APNG had not been adopted by the ad-hoc group
which produced the early PNG specifications.
PNG Third Edition retrospectively standardizes this useful extension.
APNG has a distinct Internet Media type (MIME type) registered and standardized in PNG Third Edition.
APNG is directly supported at the OS level in iOS 9.0+, macOS 10.11+ and tvOS 9.0+. APNG is used for animated stickers in iMessage.
Implemented in Blink-based browsers (Google Chrome, Microsoft Edge, Samsung Internet, etc), in Mozilla Firefox, and in WebKit-based browsers (where it relies on the macOS or iOS platform support for APNG).
Implemented in APNG Assembler for converting a static sequence of images into APNG, and decompiling APNG to a set of static PNG images. Includes automatic inter-frame optimization.
Implemented in Bandisoft Bandiview, which also has HDR support, although not yet for HDR PNG.
![screenshot of BandiView displaying an animated PNG](./img/BandiView.png)
Implemented in RealWorld Paint 2013.1+ for creating and editing APNG.
Implemented in XnSoft XnView MP
Various low-level and utility tools support APNG:
- Paint.net with the animated image APNG plugin
- VirtualDub APNG Mod
- GIF Movie Gear, v4.2+
- APNG Optimizer
- TweakPNG
In terms of libraries, APNG is supported by:
- libspng with patch
- libpng with the unofficial APNG patch, which has a tutorial.
- APNGKit.
- Qt image library with QtApng
Animation control tests
Live Results | Chrome 128 | Edge 127 | Firefox 126 | Safari TP 196 |
---|---|---|---|---|
acTL-plays-one.html | ||||
acTL-plays-two.html |
Manual tests | Chrome 128 | Edge 127 | Firefox 126 | Safari TP 196 |
---|---|---|---|---|
acTL-plays-one-manual.html | ||||
acTL-plays-two-manual.html | ||||
acTL-plays-zero-manual.html |
Frame control tests
Live Results | Chrome 128 | Edge 127 | Firefox 126 | Safari TP 196 |
---|---|---|---|---|
fcTL-acTL-ordering.html | ||||
fcTL-blend-over-repeatedly.html | ||||
fcTL-blend-over-solid.html | ||||
fcTL-blend-source-nearly-transparent.html | ||||
fcTL-blend-source-solid.html | ||||
fcTL-blend-source-transparent.html | ||||
fcTL-dispose-background-final.html | ||||
fcTL-dispose-background.html | ||||
fcTL-dispose-before-region-background.html | ||||
fcTL-dispose-in-region-background.html | ||||
fcTL-dispose-in-region-none.html | ||||
fcTL-dispose-in-region-previous.html | ||||
fcTL-dispose-none.html | ||||
fcTL-dispose-previous-final.html | ||||
fcTL-dispose-previous-first.html | ||||
fcTL-dispose-previous.html |
Manual tests | Chrome 128 | Edge 127 | Firefox 126 | Safari TP 196 |
---|---|---|---|---|
fcTL-delay-16bit-manual.html | ||||
fcTL-delay-basic-manual.html | ||||
fcTL-delay-rounding-manual.html | ||||
fcTL-delay-zero-denom-manual.html | ||||
fcTL-delay-zero-num-manual.html |
Frame data tests
Live Results | Chrome 128 | Edge 127 | Firefox 126 | Safari TP 196 |
---|---|---|---|---|
fdAT-16bit.html | ||||
fdAT-1bit-PLTE-tRNS.html | ||||
fdAT-1bit-PLTE.html | ||||
fdAT-2bit-PLTE-tRNS.html | ||||
fdAT-8bit-gray-alpha.html | ||||
fdAT-8bit-gray.html | ||||
fDAT-inherits-cICP.html | ||||
fdAT-split-basic.html | ||||
fdAT-split-zero-length.html |
General APNG tests
Live Results | Chrome 128 | Edge 127 | Firefox 126 | Safari TP 196 |
---|---|---|---|---|
first-frame-IDAT.html | ||||
first-frame-not-IDAT.html |
APNG timeout test
Live Results | Chrome 128 | Edge 127 | Firefox 126 | Safari TP 196 |
---|---|---|---|---|
animated-png-timeout.html |
APNG Media Type test
Live Results | Chrome 128 | Edge 127 | Firefox 126 | Safari TP 196 |
---|---|---|---|---|
supported-in-source-type.html |
2. Coding Independent Code Points (CICP) from ITU-R H.273
Originally developed for color space signalling in video workflows, CICP is also used in image formats such as HEIF, AVIF and JPEG-XL. CICP is more compact, and designed to signal the use of specific mathematically represented color primaries, transfer functions, matrix coefficients, and signal quantizations vs ICC profiles, which were originally created to match color between different mediums (display, print, scan). PNG Third Edition adds support for CICP metadata.
Implemented in Blink-based browsers (Google Chrome, Microsoft Edge, Samsung Internet, etc), and in WebKit-based browsers where it uses the macOS or iOS platform to implement CICP.
Mozilla Firefox does not yet implement CICP in PNG; they do however implement CICP for AVIF images, and have stated they will implement it in PNG as well.
Implemented in FFMPEG-dev for reading and writing PNG:
Implemented in Affinity Photo 2
Implemented in Avid Media Composer
![what's new in Affinity apps](./img/Affinity-23bit-HDR-PNG.png)
Implemented in MediaInfo from MediaArea
![what's new in MediaInfo](./img/MediaInfo.png)
Implemented in Pixelmator Pro 3.5 and Photomator 3.3 image editors.
Implemented in Adobe Photoshop, Lightroom and Camera Raw, MacOS ProApps, Compressor, Final Cut Pro
Implemented in libavif for export of AVIF to PNG and import from PNG into AVIF:
CICP tests
Live Results | Chrome 128 | Edge 127 | Firefox 126 | Safari TP 196 |
---|---|---|---|---|
cicp-chunk.html | ||||
cICP-wins.html |
CICP in APNG tests
Live Results | Chrome 128 | Edge 127 | Firefox 126 | Safari TP 196 |
---|---|---|---|---|
fDAT-inherits-cICP.html |
3. Priority of color space information
In the case where more than one source of color space information is provided, PNG Third Edition now defines the priority order.
cICP wins over iCCP
Live Results | Chrome 128 | Edge 127 | Firefox 126 | Safari TP 196 |
---|---|---|---|---|
cICP-wins.html |
iCCP wins over sRGB
Live Results | Chrome 128 | Edge 127 | Firefox 126 | Safari TP 196 |
---|---|---|---|---|
tagged-images-004.html |
4. Mastering Display Color Volume
This metadata, which is commonly found with HDR content in the BT.2100-PQ colorspace, describes the color characteristics of the monitor used to create the content.
PNG Third Edition adds the mDCv chunk for this purpose.
Implemented in Blink-based browsers (Google Chrome, Microsoft Edge, Samsung Internet, etc):
Implemented in FFMPEG v2 for reading and writing PNG:
Implemented in a JavaScript PNG file chunk inspector:
![screenshot showing an mDCv chunk](./img/inspector-mDCv.png)
Tone-mapping to the consumer display can benefit from knowing this metadata; it is also required for HDR10 compatibility. Currently there is no mandated tone mapping operator and thus the results of tone-mapping cannot be verified in an automatic test.
MediaInfo (see cICP section) also parses the mDCv chunk.
5. Content Light Level Information
This metadata, which is commonly found with HDR content in the BT.2100-PQ colorspace, describes the maximum value of the frame average light level (MaxFALL) and the Maximum Content Light Level (MaxCLL). Knowing this information up-front is required for consistent and timely tone mapping, particularly for long animation sequences, where computing it for all frames in real time is impractical.
PNG Third Edition adds the cLLI chunk for this purpose.
Implemented in Blink-based browsers (Google Chrome, Microsoft Edge, Samsung Internet, etc):
Implemented in FFMPEG v2 for reading and writing PNG:
Implemented in a JavaScript PNG file chunk inspector:
![screenshot showing a cLLi chunk](./img/inspector-cLLi.png)
Tone-mapping to the consumer display can benefit from knowing this metadata; it is also required for HDR10 compatibility. Currently there is no mandated tone mapping operator and thus the results of tone-mapping cannot be verified in an automatic test.
MediaInfo (see cICP section) also parses the cLLi chunk.
6. ICC profile version
PNG Second Edition only referenced the then-current v2 of International Color Consortium (ICC) profiles, although it had since become industry practice to also use higher versions such as 4.3.
PNG Third Edition clarified that the iCCP chunk, which contains the ICC profile, can contain profiles conforming to any version of the ICC.1 specification.
(There is also a newer ICC.2 specification, known as ICCMax; this is not currently supported in browsers, and PNG does not currently provide a way to embed ICC.2 profiles).
Baseline tests
Manual tests (Archived results) | Chrome 128 | Edge 127 | Firefox 126 | Safari TP 196 |
---|---|---|---|---|
'sRGB' chunk, relative colorimetric intent | ||||
untagged image, must be treated as sRGB |
ICC v2 profiles
Manual tests (Archived results) | Chrome 128 | Edge 127 | Firefox 126 | Safari TP 196 |
---|---|---|---|---|
sRGB with red and green colorants swapped | ||||
CIE RGB, L* TRC | ||||
ProPhoto RGB, gamma 1.8 |
ICC v4 profiles
Manual tests (Archived results) | Chrome 128 | Edge 127 | Firefox 126 | Safari TP 196 |
---|---|---|---|---|
CIE RGB, L* TRC | ||||
ProPhoto RGB, gamma 1.8 | ||||
Display P3 |
7. Exchangeable Image File (Exif)
Widely used in other image formats such as JPEG/JFIF,
EXIF metadata is also available in PNG.
PNG Third Edition moves the eXIf
chunk,
which was already in the PNG Extensions document,
into the main specification.
Exif mostly contains metadata (copyright, lens focal length) which does not affect the display of the image.
The Web Platform places a constraint on Exif image metadata that affects layout, such as image orientation: it is required to be placed before the image data. PNG Third Edition enforces that constraint, for Exif in PNG.
Respecting Exif image orientation for PNG images in CSS is implemented in WebKit-based browsers.
Respecting Exif image orientation for PNG images in Canvas 2D is implemented in WebKit-based browsers and Blink-based browsers.
Blink-based browsers (Google Chrome, Microsoft Edge, Samsung Internet, etc), and Mozilla Firefox implement Exif orientation in CSS for JPEG/JFIF images, and are expected to implement it for PNG as well. (Chrome bug and Firefox bug).
Exif in Canvas 2D tests (PNG)
Live Results | Chrome 128 | Edge 127 | Firefox 126 | Safari TP 196 |
---|---|---|---|---|
exif-chunk.html |
Exif in CSS tests (JPEG)
Live Results | Chrome 128 | Edge 127 | Firefox 126 | Safari TP 196 |
---|---|---|---|---|
image-orientation-from-image.html |
Live Results | Chrome 128 | Edge 127 | Firefox 126 | Safari TP 196 |
---|---|---|---|---|
image-orientation-from-image-embedded-content.html |
Exif in CSS tests (PNG)
Live Results | Chrome 128 | Edge 127 | Firefox 126 | Safari TP 196 |
---|---|---|---|---|
image-orientation-exif-png.html | ||||
image-orientation-exif-png-2.html | ||||
image-orientation-exif-png-3.html [1] |
Note that CSS Images 3 makes this hard to test for the CSS `image-orientation` property.
8. Invalid Palette Indexes
PNG supports palette images, where each pixel contains an index into a palette (a table of colors) rather than holding an RGB value directly. The handling of an invalid palette index (for example, index 20 when there are only 16 colors) was previously undefined.
PNG Third Edition has standardized a common error recovery method, where pixels with undefined indexes are rendered as opaque black. This gives improved interoperability.
Invalid tRNS handling
Live Results | Chrome 128 | Edge 127 | Firefox 126 | Safari TP 196 | Servo 0 |
---|---|---|---|---|---|
trns-chunk.html |
9. Unknown, Invalid Ancillary Chunks
PNG Third Edition has clarified that encountering an unknown ancillary chunk is never an error. This includes invalid ancillary chunks. This error recovery gives improved interoperability.
Invalid Ancillary
Live Results | Chrome 128 | Edge 127 | Firefox 126 | Safari TP 196 | Servo 0 |
---|---|---|---|---|---|
unknown-ancillary-error-recovery.html | |||||
unknown-ancillary-error-recovery-2.html |