Project Nayuki


PNG file chunk inspector

PNG file format overview

Portable Network Graphics (PNG) is a ubiquitous file format for conveying still images. It is used on the web and in various document systems, and it has a decent level of lossless compression.

A PNG file is composed of an 8-byte signature header, followed by any number of chunks that contain control data / metadata / image data. Each chunk contains three standard fields – 4-byte length, 4-byte type code, 4-byte CRC – and various internal fields that depend on the chunk type.

The JavaScript tool on this page reads a user-given PNG file and dissects it deeply, showing the list of chunks and fields as well as any errors that violate the format specification.

Program

Input file:

Start offset Raw bytes Chunk outside Chunk inside Errors

Notes

  • The PNG file format starts off with a magic signature, and is followed by any number of blocks all with a uniform syntax. This design is similar to other popular multimedia file formats, like: BMP, TIFF, WAV, AVI, general RIFF.

  • A PNG file can contain multiple IDAT chunks to hold the compressed image data. This is semantically equivalent to concatenating the data bytes of all IDAT chunks; it is not equivalent to having multiple (sub)images. Having multiple IDATs costs a bit more space in block headers and footers, and it serves no benefit to the decoder. The main reason to have multiple IDATs is if the encoder software wants to keep memory usage low and not need to buffer the entire IDAT, which is required just to know the final length of the chunk before starting to write the chunk. A far rarer reason for many IDATs is if the payload data after compression exceeds 2 GiB; in this case it is mandatory.

  • The source TypeScript code and compiled JavaScript code are available for viewing.

More info