Better PNG compression by design. Part 1

In this article I am going to discuss the affect that different design elements have on PNG compression. I will look at some good and bad things to do to get a small file size when creating or editing your image. I will not look into software that optimises the compression once the image is complete.
For example: Why is this image only 2816 bytes…

And this one 4924 bytes

How PNG works… for dummies

PNG looks for patterns running horizontally in an image. Patterns can be easily compressed, so the more patterns you have the more compression you’ll get. The patterns that the PNG algorithm finds are in the binary representation of the image. Sometimes it is not always obvious that there will be a pattern in the image from looking at it.

The examples are meant to illustrate principles. Your mileage may vary.

Example 1

A square that fades from black to white is on a white background. If the fade runs perfectly horizontally or vertically the file size is small. If the box with the fade is rotated, the file size becomes much larger. In the last example the fade is on an angle but the box is not.

474 bytes

427 bytes

1908 bytes

2903 bytes

Example 2

Different types of dither will have an impact on the file size.
Floyd-Steinburg 3202 bytes
Pattern 469 bytes

To be continued…