PNG features:

  • for png color depth can range from 1 to 64 bits per pixel
  • All PNG images contain a single static image
  • 1-, 2-, 4- and 8-bit palette support (like GIF)
  • 1-, 2-, 4-, 8- and 16-bit grayscale support
  • 8- and 16-bit-per-sample (that is, 24- and 48-bit) truecolor support
  • full alpha transparency in 8- and 16-bit modes
  • "palette-alpha" mode, effectively transforming normal RGB palette into RGBA
  • gamma correction for cross-platform "brightness" control



png file versions

edit

PNGN = PNG N bit_per_color ( = nr_of_channels * bits_per_channel)

  • PNG8 has 2^8 = 256 shades of gray or 256 indexed-color with 8-bit samples, usually means opaque or with GIF-like, binary transparency, but sometimes includes translucency[1]
  • PNG16
    • gray:
      • Such images are typically used only in science, medicine, and the film industry
      • It splits the color space evenly to   shades of grey[2]
      • Note that it may be converted down to 8-bit for display, when display devices don't support 16 bits. Any values greater than 256 will simply be clipped to 255.[3]
  • PNG24 has a color depth of 8 x 3 channels ( RGB) which is 24 bits per pixel color =   total colours and 2^8 = 256 shades of gray = Truecolor
  • PNG32 has a color depth of 8 x 4 channels ( RGBA) which is 32 bits per pixel color =   colors = Truecolor and alpha
  • PNG48
    • RGBA: has a color depth of 12 x 4 channels ( RGBA) which is 48 bits per pixel color =   colors = Truecolor and alpha
    • RGB:
  • PNG64 has a color depth of 16 x 4 channels ( RGBA) which is 64 bits per pixel color =   colors

Key words

edit
  • sample = intersection of a channel and a pixel in an image.
  • sample depth = number of bits used to represent a sample value. In an indexed-colour PNG image, samples are stored in the palette and thus the sample depth is always 8 by definition of the palette. In other types of PNG image it is the same as the bit depth
  • An tagged image is an image that is explicitly assigned a color profile, as defined by the image format. This is usually done by including an International Color Consortium (ICC) profile [ICC].[4]

File format

edit
  • A PNG file starts with an 8-byte signature ( file header)
  • After the header, comes a series of chunks


A chunk consists of four parts:

  • length (4 bytes,[5] big-endian),
  • chunk type/name (4 bytes[6])
  • chunk data (length bytes)
  • CRC (cyclic redundancy code/checksum; 4 bytes[5]). The CRC is a network-byte-order CRC-32 computed over the chunk type and chunk data, but not the length.
Length Chunk type Chunk data CRC
4 bytes 4 bytes Length bytes 4 bytes


file header

edit
 
The PNG image   viewed with a hex editor application for Ubuntu.

The first eight bytes of a PNG file is an 8-byte signature[7] ( a magic signature) with the following (decimal) values"

  DEC: 137 80 78 71 13 10 26 10
  HEX:  89 50 4E 47 0D 0A 1A 0A 
  ASC:  NA  P  N  G \r \n NA \n 
Values (hex) Purpose
89 Has the high bit set to detect transmission systems that do not support 8-bit data and to reduce the chance that a text file is mistakenly interpreted as a PNG, or vice versa.
50 4E 47 In ASCII, the letters PNG, allowing a person to identify the format easily if it is viewed in a text editor.
0D 0A A DOS-style line ending (CRLF) to detect DOS-Unix line ending conversion of the data.
1A A byte that stops display of the file under DOS when the command type has been used—the end-of-file character.
0A A Unix-style line ending (LF) to detect Unix-DOS line ending conversion.

Critical chunks

edit
  • IHDR must be the first chunk; it contains (in this order) the image's
    • width (4 bytes)
    • height (4 bytes)
    • bit depth (1 byte) Bit depth is a single-byte integer giving the number of bits per sample or per palette index (not per pixel). Valid values are 1, 2, 4, 8, and 16, although not all values are allowed for all colour types. See the table below[8]
    • color type (1 byte, values 0, 2, 3, 4, or 6)
    • compression method (1 byte, value 0)
    • filter method (1 byte, value 0)
    • interlace method (1 byte, values 0 "no interlace" or 1 "Adam7 interlace") (13 data bytes total).[9]
  • PLTE contains the palette: a list of colors.
  • IDAT contains the image, which may be split among multiple IDAT chunks. Such splitting increases filesize slightly, but makes it possible to generate a PNG in a streaming manner. The IDAT chunk contains the actual image data, which is the output stream of the compression algorithm.[10]
  • IEND marks the image end; the data field of the IEND chunk has 0 bytes/is empty.[11]


PNG color types
Color
type
Name Binary Masks decimal value binary value
  A C P
0 Grayscale 0 0 0 0 0 0002
2 Truecolor 0 0 1 0 color 2 0102
3 Indexed 0 0 1 1 color, palette 3 0112
4 Grayscale and alpha 0 1 0 0 alpha 4 1002
6 Truecolor and alpha 0 1 1 0 alpha, color 6 1102



Allowed combinations of colour type and bit depth[9]
Color type Channels Allowed bits per channel
1 2 4 8 16
Indexed 1 1 2 4 8
Grayscale 1 1 2 4 8 16
Grayscale and alpha 2 16 32
Truecolor 3 24 48
Truecolor and alpha 4 32 64

Ancillary chunks

edit
  • bKGD gives the default background color. It is intended for use when there is no better choice available, such as in standalone image viewers (but not web browsers; see below for more details).
  • cHRM gives the chromaticity coordinates of the display primaries and white point.
  • dSIG is for storing digital signatures.[12]
  • eXIf stores Exif metadata.[13]
  • gAMA specifies gamma. The gAMA chunk contains only 4 bytes, and its value represents the gamma value multiplied by 100,000; for example, the gamma value 1/3.4 calculates to 29411.7647059 ((1/3.4)*(100,000)) and is converted to an integer (29412) for storage.[14]
  • hIST can store the histogram, or total amount of each color in the image.
  • iCCP is an ICC color profile[15]
  • iTXt contains a keyword and UTF-8 text, with encodings for possible compression and translations marked with language tag. The Extensible Metadata Platform (XMP) uses this chunk with a keyword 'XML:com.adobe.xmp'
  • pHYs holds the intended pixel size (or pixel aspect ratio); the pHYs contains "Pixels per unit, X axis" (4 bytes), "Pixels per unit, Y axis" (4 bytes), and "Unit specifier" (1 byte) for a total of 9 bytes.[16]
  • sBIT (significant bits) indicates the color-accuracy of the source data; this chunk contains a total of between 1 and 5 bytes, depending on the color type.[17][18][19]
  • sPLT suggests a palette to use if the full range of colors is unavailable.
  • sRGB indicates that the standard sRGB color space is used; the sRGB chunk contains only 1 byte, which is used for "rendering intent" (4 values—0, 1, 2, and 3—are defined for rendering intent).[20]
  • sTER stereo-image indicator chunk for stereoscopic images.[21]
  • tEXt can store text that can be represented in ISO/IEC 8859-1, with one key-value pair for each chunk. The "key" must be between 1 and 79 characters long. Separator is a null character. The "value" can be any length, including zero up to the maximum permissible chunk size minus the length of the keyword and separator. Neither "key" nor "value" can contain null character. Leading or trailing spaces are also disallowed.
  • tIME stores the time that the image was last changed.
  • tRNS contains transparency information. For indexed images, it stores alpha channel values for one or more palette entries. For truecolor and grayscale images, it stores a single pixel value that is to be regarded as fully transparent.
  • zTXt contains compressed text (and a compression method marker) with the same limits as tEXt.


Rendering intent values (Value Name Description)

  • 0 = Perceptual for images preferring good adaptation to the output device gamut at the expense of colorimetric accuracy, such as photographs.
  • 1 = Relative colorimetric for images requiring colour appearance matching (relative to the output device white point), such as logos.
  • 2 = Saturation for images preferring preservation of saturation at the expense of hue and lightness, such as charts and graphs.
  • 3 = Absolute colorimetric for images requiring preservation of absolute colorimetry, such as previews of images destined for a different output device (proofs).

Examples

edit


Structure of a very simple PNG file
89 50 4E 47 0D 0A 1A 0A
PNG signature
IHDR
Image header
IDAT
Image data
IEND
Image end
Contents of a minimal PNG file representing one red pixel
Hex As characters

89 50 4E 47 0D 0A 1A 0A 00 00 00 0D 49 48 44 52
00 00 00 01 00 00 00 01 08 02 00 00 00 90 77 53
DE 00 00 00 10 49 44 41 54 08 D7 63 F8 CF C0 00
00 03 01 01 00 18 DD 8D B0 00 00 00 00 49 45 4E
44 AE 42 60 82

.PNG........IHDR
..............wS
.....IDAT..c....
.............IEN
D.B`.

IHDR Chunk
Offset into chunk Hex Value Decimal Value Text Meaning
0 0x0D 13 IHDR chunk has 13 bytes of content
4 0x49484452 IHDR Identifies a Header chunk
8 0x01 1 Image is 1 pixel wide
12 0x01 1 Image is 1 pixel high
16 0x08 8 8 bits per pixel (per channel)
17 0x02 2 Color type 2 (RGB/truecolor)
18 0x00 0 Compression method 0 (only accepted value)
19 0x00 0 Filter method 0 (only accepted value)
20 0x00 0 Not interlaced
21 0x907753DE CRC of chunk's type and content (but not length)
IDAT Chunk
Offset into chunk Hex Value Meaning
0 0x10 IDAT chunk has 16 bytes of content
4 0x49444154 Identifies a Data chunk
8 0x08 DEFLATE compression method using a 256-byte window[22]
9 0xD7 ZLIB FCHECK value, no dictionary used, maximum compression algorithm[22]
10 0x63F8CFC00000 A compressed DEFLATE block using the static Huffman code that decodes to 0x00 0xFF 0x00 0x00[23]
16 0x03010100 The ZLIB check value: the Adler32 checksum of the uncompressed data[22]
20 0x18DD8DB0 CRC of chunk's type and content (but not length)

Displayed in the fashion of hex editors, with on the left side byte values shown in hex format, and on the right side their equivalent characters from w:ISO-8859-1 with unrecognized and control characters replaced with periods. Additionally the PNG signature and individual chunks are marked with colors. Note they are easy to identify because of their human readable type names (in this example PNG, IHDR, IDAT, and IEND).


  PNG Signature(8 bytes): 89 50 4E 47 0D 0A 1A 0A
    =======Chunk start=======
    IHDR Chunk:
        IHDR chunk length(4 bytes): 00 00 00 0D
        IHDR chunk type(Identifies chunk type to be IHDR): 49 48 44 52
        Image width in pixels(variable 4): xx xx xx xx
        Image height in pixels(variable 4): xx xx xx xx
        Flags in the chunk(variable 5 bytes): xx xx xx xx xx
        CRC checksum(variable 4 bytes): xx xx xx xx 
    =======Chunk end=======
    
 

read png

edit

Read png with od program

od -c test.png | head -4

Example output:

0000000 211   P   N   G  \r  \n 032  \n  \0  \0  \0 004   C   g   B   I
0000020   P  \0     002   + 325 263 177  \0  \0  \0  \r   I   H   D   R
0000040  \0  \0  \0   `  \0  \0  \0   `  \b 006  \0  \0  \0 342 230   w
0000060   8  \0  \0  \0       c   H   R   M  \0  \0   z   %  \0  \0 200

Programs:

  • pngcheck a command-line program by Greg Roelofs
pngcheck -c *.png
pngcheck -cvt *.png

code

edit

octave

edit

Octave code that creates array ( memory image) and saves it to the file[24]

# octave m-file based on the m-file by Chris King
# http://www.dhushara.com/DarkHeart/Viewers/source/siegel.m
# an MyImage here is a matrix for 24 bit (3 byte) colors

# load packages
pkg load image; # imwrite
pkg load miscellaneous; # waitbar

# constan values 
nx = 480;
ny = 480;
MyImage = zeros(ny,nx,3); # 2D matrix filled with zeros
magc=0.65;
dSide=1/magc;
Zxmin = -dSide;
Zxmax = dSide;
Zymin = -dSide;
Zymax = dSide;

stepy = (Zymax - Zymin)/(ny - 1);
stepx = (Zxmax - Zxmin)/(nx - 1);

# computations 
waitbar(0,'Please wait...'); # info 
for iy = 1:ny
  Zy = Zymax - iy*stepy; # invert y axis
  for ix= 1:nx
    Zx = Zxmin + ix*stepx;
    if(Zy>0 && Zx>0)  # first quadrant should be in upper right position
    MyImage(iy,ix,2)=255-MyImage(iy,ix,2);
    endif;
  end # for ix
  waitbar(iy/ny);
end # for iy
# 
image(MyImage); # display image 
imwrite(MyImage,'s.png' ); # save image to the file

collection of images

edit


Creating png files

edit


Checking png files

edit
file p.png


ICC embaded profile

Editing png files

edit
  • hex editors:
    • editing of pixel data in a hex editor is pretty much impossible because of of the compression algorithm[25]
    • one can edit header,
  • use an online crc calculator to calculate the checksum for the png
  • use TS/JS[26]
  • pngcheck


Hexdump

hexdump --canonical p.png 


To show the output of the PNG header as described by the official libpng spec[27]

  • to process the PNG file in 8-byte chunks
  • the PNG spec is documented in decimal, which is represented by %d according to the hexdump documentation
  • make the output perfect by adding a blank space after each integer
hexdump -n8 -e'8/1 "%d ""\n"' p.png


ICC profile tasks[28]

  • Extract ICC profile from the file
  • To remove an ICC profile
  • To embed an ICC prolile


Extract ICC profile from the file:

exiftool -icc_profile -b -w icc somefile.png

To remove an ICC profile

pngcrush -rem iCCP foo.png result.png

See also

edit

References

edit
  1. stackoverflow question : what-is-difference-between-png8-and-png24 ?
  2. Bit-Depth by Michael Reichmann December 2, 2011
  3. stackoverflow question: 16-bit-grayscale-png
  4. csswg : css-color-4 terminology
  5. a b Laphroaig, Manul (31 October 2017). PoC or GTFO. ISBN 9781593278984. Each chunk consists of four parts: Length, a Chunk Type, the Chunk Data, and a 32-bit CRC. The Length is a 32-bit unsigned integer indicating the size of only the Chunk Data field
  6. Laphroaig, Manul (31 October 2017). - PoC or GTFO. ISBN 9781593278984. Chunk Type is a 32-bit FourCC code such as IHDR, IDAT, or IEND. {{cite book}}: Check |url= value (help)
  7. W3C 2003, 5.2 PNG signature.
  8. Portable Network Graphics (PNG) Specification (Third Edition) W3C First Public Working Draft 25 October 2022
  9. a b W3C 2003, 11.2.2 IHDR Image header
  10. W3C 2003, 11.2.4 IDAT Image data.
  11. W3C 2003, 11.2.5 IEND Image trailer.
  12. Thomas Kopp (17 April 2008). "PNG Digital Signatures: Extension Specification".
  13. "Extensions to the PNG 1.2 Specification, version 1.5.0". ftp-osl.osuosl.org.
  14. W3C 2003, 11.3.3.2 gAMA Image gamma.
  15. w3.org png specyfication iCCP
  16. W3C 2003, 11.3.5.3 pHYs Physical pixel dimensions.
  17. W3C 2003, 11.3.3.4 sBIT Significant bits.
  18. "PNG (Portable Network Graphics) Specification \ Version 1.0". w3.org. Retrieved 30 May 2022. 4.2.6. sBIT Significant bits, 13 bytes total - color type 2 and 3 totaled 6 bytes
  19. Roelofs 2003, Significant Bits (sBIT).
  20. "PNG Specification: Chunk Specifications".
  21. "PNG News from 2006". Libpng.org.
  22. a b c Deutsch, L. Peter; Gailly, Jean-Loup (May 1996). "rfc1950". datatracker.ietf.org. Retrieved 2021-08-18.
  23. Deutsch, L. Peter (May 1996). "rfc1951". datatracker.ietf.org. Retrieved 2021-08-18.
  24. Sigel disc in Matlab by Chris King
  25. Hacking Image Files – With a Hex Editor psychocod3r April 15, 2019
  26. Mathilde E. Sep 8, 2020 : Understanding and decoding PNGs With an example in TypeScript
  27. How Hexdump works. Hexdump helps you investigate the contents of binary files. Learn how hexdump works. By Seth Kenlon (Team, Red Hat) August 12, 2019
  28. PNG-ICC-tests