| This should become the first part from a series of tutorials on doing web graphics using the Gimp. Please, do not expect a professional guide on how to become a successful web graphician or similar. This tutorials' aim is to help Gimp beginners find themselves in the jungle of file formats, their purposes and usage. | |
1. Introduction |
|
Let's slip in directly and have a look at GIF. Here are some brief technical details of this format:
|
|
| To keep this tutorial small and easy readable its limited to GIFs indexed colours and dealing with them. I let out topics like animation and transparency but I hope to cover them in future tutorials. | |
 |
This is an image of an Aston Martin V12 Vanquish which will be used further to display some GIF qualities. :-) It is 320*240 pixel JPEG with highest quality possible. Image size is approximately 55,4 kilobytes. |
| Because of its limitation to maximum 256 colours GIF isn't really suitable for photographs, large colour gradients and images with many small details so the image above will make GIF's (dis-) advantages even more visible. Indeed, the best targets for using GIF are images containing line art, text and images with transparency! | |
 |
Before saving an image as GIF it must be converted to "indexed", ie its colours must be reduced to 256 (or less) and a palette must be created. Here you see how to find that in Gimp's dialogues. |
 |
This is the conversion dialogue. Options are grouped as palette options and dithering options. The following steps should show their usage and resulting images. Lets start with converting our car photo to indexed, without dithering. |
2. Conversion |
|
 |
Looks not that bad but a tiny loss of quality is undoubtable there. Our image's size shrunk to 49,8 kilobytes.
|
 |
These are 600% zoomed regions from our picture and the result. As you can see the loss of colours has almost eliminated the nice gradients on the car's surfaces. |
 |
This is our image with its mode set to indexed and its colours limited to 32. Still no dithering used. The image's size shrunk to 20,5 kilobytes.
|
 |
A loss of quality is now even more visible. All gradients were lost, the image has become flat and edgy. |
3. Dithering |
|
 |
Positioned dithering applied. Image size is 24,1 kilobytes and we can see a slight improvement, especially in the trees and on the ground. The aim of every colour dithering algorithm is to suggest the viewer a colour by combining several different colours. Anyway, the LZW compression algorithm doesn't "like" pixel values to change very often and it loses it efficiency.
|
 |
Floyd-Steinberg dithering with reduced colour bleeding applied. We see a significant improvement, even the car's surface seems to be smooth. Image size is 26,9 kilobytes which means about 30% bigger file size compared to the undithered image. Now it's your task to decide if it's worth that.
|
 |
Normal Floyd-Steinberg dithering applied. Image size is nearly the same. The results are slightly worse when you don't use colour bleeding reduction on large images.
|
 |
This image demonstrates the usage of custom palettes. I used a palette called "Royal". As you can see, custom palettes can be used to achieve special effects and help integrating graphics in other colour environments.
|
| I hope this tutorial was helpful for you. An don't foget: there are as many ways to do something in Gimp as there are Gimp users! | |