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 transparencyThe 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.
|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|
At the JPEG export a quality factor of 90 was used:
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|
Images with simple transparencyConsider 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|
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 transparencyFor 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|
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|
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!
A Romanian translation is also available.
friends at OpenArt.ro, www.xdrive.ro and Inovatika for motivating me to write this.