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…
Plain text heading PNG
And this one 4924 bytes
Fancy text heading PNG

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.

Greyscale fade horizontal474 bytes

Greyscale fade vertical427 bytes

Greyscale fade box rotate1908 bytes

Greyscale fade angle2903 bytes

Example 2

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

To be continued…

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s