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 |