Create very compressibles images

This article will show you how to create very compressible images, by decreasing significantly the number of colors in the RGB area, but with some modification to keep the image integrity.

Optimize screen captures

On most website talking about image optimization, you will see the common trick consisting to convert your image to PNG8, or to reduce colors in a PNG8 file.

32,3 KB (33 128 Bytes) - TrueColor: 1977 Colors

This is a screenshot of FireWorks. Here, the image has 1977 distincts colors, and is a very high size. Image gets a good compression, but with this encoding mode, you will not be able to get a significant smallest file.

Convert it to PNG8

19,6 KB (20 116 Bytes) - Paletted: 256 Colors

The sample is converted to PNG8 with ScriptCQ. In this sample, you can win a lot of bytes without getting a significant image quality reduction.

Reduce the number of Colors

10,1 KB (10 370 Bytes) - Paletted: 11 Colors

The precedent PNG8 sample is converted with 11 colors in the RGB area. Results is significant for size, but image quality is very deteriored.

Graphics Optimization

8,91 KB (9 128 Bytes) - Paletted: 14 Colors

Here, graphics area are modified to be more optimized. It consists to delete a maximum of image artifacts around a graphic icon, or to maximize solid color area.

Graphics and Text Optimization

6,42 KB (6 578 Bytes) - Paletted: 11 Colors

A very cleaned image, base on the same principe but with modified text (no font smoothing). To get that result, you have to control every pixel in the image.

Original - Zoom 800%	Optimized - Zoom 800%

Think about Filtering

When you have to create gradients, think filtering. The filtering step is the main step in the PNG Compression result. Do not always reduce colors to have a better size.

44806 Colors	65536 Colors
36,6 KB (37 555 Bytes)	0,5 KB (537 Bytes)

In this sample, gradients are stored efficiently when there is more colors, because values are true gradients (they can be filtered easily).