Indexing PNGs to reduce the file size (with GIMP)

Reducing the filesize for images is extremely important for all web users: end-users, authors, servers, providers. I will present a drastic method to reduce the filesize for PNG images by converting them from True Colors to Indexed Colors.

Image formats usually found on web are:

• JPEG - due its lossy compression, it give very small file sizes but is indicated only for photos, it is not good for drawings and line art;
• GIF - offer loseless compression and a palette of maximum 256 colors sith the possibility of having one transparent color. In equal conditions (indexed colors) it has lower compression rate compared with PNG, so its niche is for simple animations;
• PNG - is the "de facto" GIF successor, it can do anything GIF can do but better: it support both indexed and true colors, simple transparency and alpha transparency with loseless compression. Is ideal for drawings, for photos its compression is worse than JPEG.

Note: Internet Explorer did not have support for alpha transparency until version 7, but worked always with indexed PNGs.

Images without transparency

The simplest and most obvious use case for converting PNGs from true to indexed colors is when the image does not have any transparency. With GIMP use Image > Mode > Indexed... and choose your desired dithering mode, which will affect the way the result will look but also the file size. You can decrease the file size further by reducing the number of colors in the palette.

For simple images avoid dithering to get very small file sizes and for complex images, with a lot of colors and gradients using dithering will allow to keep a look close to the initial image.
Here are the compression results with various parameters:

PNG original (true color)	PNG indexed colors (255), no dithering	PNG indexed colors (255), with dithering	GIF indexed colors (255), no dithering	PNG indexed colors (127), no dithering	PNG indexed colorse (63), no dithering	JPEG, quality 90
4,6 KB	3,1 KB	4,0 KB	3,7 KB	2,3 KB	1,7 KB	2,0 KB

Size decrease is dramatic for every option, but for indexed PNG with 63 colors and JPEG is also a visible decrease in image quality. What to use in practice is determined by the concrete image, the compression ratio depend on the particular image content.

At the JPEG export a quality factor of 90 was used:
The quality difference is visible, but to make it clearer, here is a comparison with the original at 400% zoom:


For simple images dithering is not needed, on the contrary, not using it is useful, resulting in smaller files, but for complex images, maybe with photographic portions (I already said PNG is not recommended for photos), dithering increase in importance:

PNG original (true color)	PNG indexed colors (255), no dithering	PNG indexed colors (255), with dithering	JPEG, quality 90
48,7 KB	15,3 KB	17,2 KB	10,7 KB

For better understanding, here are the images at 200% zoom:

Images with simple transparency

Consider the case of a simple PNG with simple transparency, no shadows, only with a little antialiasing, the same button as above but with slightly rounded corners:

PNG original (true color)	PNG indexed colors (255), no dithering
5,2 KB	3,3 KB
400% zoom

As we had only small rounded corners, the result is acceptable with artifacts visible only at higher zoom.

Increasing the roundness, the lack of antialiasing became more visible and the result may not be good enough, simple indexing not being enough:

PNG original (true color)	PNG indexed colors (255), no dithering	PNG indexed colors (255), no transparency
6,0 KB	3,2 KB	3,3 KB

Images with complex transparency

For complex we will use not only images with complicated edges using a lot of antialiasing, but also with shadows, using partial transparency.

PNG original (true color)	PNG indexed colors (255), no dithering	PNG indexed colors (255), dither transparency
16,1 KB	5,5 KB	5,7 KB
		: #fff2f2;">

Indexing considerably reduces the size but destroy the shadow and make the contour ugly. Activating dithering for transparency does not bring anything good.

If we insist to reduce the size by indexing the colors we have tho solutions left: drop the transparency and use a fixed background color (the same with the rest of the page) or use a fake shadow: use a background color, merge the two layers to transform the shadow in a gradient from black to the background color, convert to indexed colors and then select by color the background color and replace it with transparency:

PNG original (true color)	PNG culori indexate (255), no transparenta	PNG culori indexate (255), cu fake transparenta
16,1 KB	6,5 KB	6,0 KB

As you can see, using "fake" transparency works good enough even for backgrounds with similar colors, not only identical.

Using the techniques described above, reduce as much as you can the file size for the images used in your web pages, make as short and enjoyable the time spent loading pages for users, decrease as much as you can the server load!
Success!


A Romanian translation is also available.

a disclaimer will appear here soon

Many thanks to my friends at OpenArt.ro, www.xdrive.ro and Inovatika for motivating me to write this.