Do you recognise these images? There’s a good chance you’ve seen some of them before now, probably several times. Here’s a hint: They all depict the same thing.

They all look pretty similar – so why the size difference?

A quick intro to PNG

The basic PNG file is comprised of recurring chunks. Each chunk is comprised of four parts:

• Length of the data block (four bytes)
• Chunk type (four bytes)
• Data
• CRC (four bytes)

Here’s the hex content of the smallest PNG shown above – the 103 byte file:

89 50 4E 47  0D 0A 1A 0A  00 00 00 0D  49 48 44 52 | .PNG........IHDR
00 00 01 00  00 00 01 00  01 03 00 00  00 66 BC 3A | .............f¼:
25 00 00 00  03 50 4C 54  45 B5 D0 D0  63 04 16 EA | %....PLTEµÐÐc..ê
00 00 00 1F  49 44 41 54  68 81 ED C1  01 0D 00 00 | ....IDATh.íÁ....
00 C2 A0 F7  4F 6D 0E 37  A0 00 00 00  00 00 00 00 | . ÷Om.7 .......
00 BE 0D 21  00 00 01 9A  60 E1 D5 00  00 00 00 49 | .¾.!....`áÕ....I
45 4E 44 AE  42 60 82                              | END®B`.         

The IHDR section – further specification here – marks this as a 256×256 pixel image (00 00 01 00 00 00 01 00), 1 bit depth (01), with each pixel represented as an index into a palette (03). The image uses the default deflate compression (00), basic filtering (00) and no interlacing (00).

The PLTE section is mandatory for paleted images (PNG also supports true color images, where it isn’t required) – it can contain up to 256 entries, but this one only contains a single entry – B5 D0 D0 – as only a single color is needed. This is also an example of a “truncated palette” – the one-bit depth selected in the IHDR section allows 2 colors, but as only one color is used, only one is included in the palette.

The IDAT section is the actual image data. It’s 31 bytes long, compressed with the DEFLATE algorithm. If you inflate the data in this example, you get 8448 bytes of zeros. Why 8448? Well, 8192 bytes correspond to the pixels at one bit per pixel ( 256*256/8 = 8192 ) and 256 correspond to one byte for each line of the image, specifying a filter to apply. In our case, the filter byte is always 0 which corresponds to no filtering being performed.

The IEND section marks the end of the image.

Why the differences in size between the images above?

Size	Explanation
103 bytes	Palettised, 1 bit per pixel, 3 byte PLTE, 31 byte IDAT
156 bytes	Palettised, 8 bits per pixel, 3