Indexing PNGs to reduce the file size (with GIMP)

AddThis Social Bookmark Button

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:
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.
dithering
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
button button button button button button button
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:
jpeg
The quality difference is visible, but to make it clearer, here is a comparison with the original at 400% zoom:
png jpeg


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
photo photo photo photo
48,7 KB 15,3 KB 17,2 KB 10,7 KB
For better understanding, here are the images at 200% zoom:
photo photo photo

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
button button
5,2 KB 3,3 KB
400% zoom
button button
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
button button button
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
face face face
16,1 KB 5,5 KB 5,7 KB
face face AddThis Social Bookmark Button : #fff2f2;">face
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
face face face
16,1 KB 6,5 KB 6,0 KB
face face face
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.