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.
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.
Different types of dither will have an impact on the file size.
Floyd-Steinburg 3202 bytes
Pattern 469 bytes
To be continued…