Tutorials & articles | Back |
02/07/2009
Palette Based Images
A computer image is basically a group of pixels. Each pixel, a “point” on the screen, has a color, which can be represented in several ways.
Usually, in modern computers, a pixel is represented by a 24bit value (that is, 24 1s and 0s). Since we get any colour on the screen by adding the 3 basic colours (that is Red, Green and Blue), we can use 8 bits for each colour: 8 for Red, 8 for Green and 8 for Blue.
The Gimp allows you to work on 24 bit images (often named True Colour Images), which is often enough to work with any type of image. I’ll talk on another article about higher bit-depth images (up to 96 !), their uses and how to work with them on The Gimp (something sadly not possible right now, with the current version of the program, 2.6 as the time of writing).
With 24 bit-depth images, you can work on photographies and other types of images that require a lot of colours.
The Gimp, though, allows you to work with another type of images, the so-called Palette Based Images. With this types of images, you have up to 256 possible differents colours, and each pixel is assigned to one of these colours.
Obviously, you are more restricted, since you have to choose carefully which colours you put on the palette.
Palette Based Images have some advantages, though:
- They take less space on disk, since you don’t have to store 24 bits per pixel, just 8.
- They take less space on memory, for the same reason.
They are specially interesting for the web, since the GIF format is a quite an efficient way of storing these images. The PNG format is even more efficient.
Both formats are lossless, that is: you don’t loose information every time you use them. JPEG, for example, is a lossy format. Each time you store an image in JPEG, some information is discarded to save space.
Usually -rule of thumb, of course- logos are stored in GIF/PNG, and pictures in JPEG.
Palette Based Images in The Gimp
When you create an image or you load a new image in The Gimp, this is usually in RGB mode, that is: 24 bit depth.
To convert a RGB image to a palette based image, you have to use the “Image > Mode > Indexed”:
This will make this window pop up:
- Generate optimum palette: This option will scan you image, trying to determine the best colours for the palette. You can select the number of colours your palette will have.
- Use web-optimized palette: Web browsers have a number of so-called “safe colours”. Is a palette of 216 colours (take a look at this article on the Wikipedia).
These colours were defined when computer displays with 256 colours was the usual thing. This is quite outdated, and I wouldn’t recommend using this setting, since will limit the quality of the colour reduction. - Use black and white (1-bit) palette: This will make The Gimp use just 2 colours (black and white, surprisingly) in the resulting image.
- Use a custom palette: You can make The Gimp use a predefined palette, which you’ll have to select.
Dithering
When reducing the number of colours, The Gimp will discard colours that appear on the original image. This is specially noticeable on gradients: for example, a sky. The result is a banding in the image.
Dithering is a technique that tries to simulate more colours by displaying together pixels of different colours, to create the illusion of a new colour.
| Original image, no dithering. 24 bit. |
| No dithering. 16 colours. |
| Dithering. 16 colours. Notice how the gradient seems smoother, and how dithering helps. |
Transparency
We have to pay special attention to transparency. The GIF format (and PNG) supports specifying a colour as “transparent”. This is rendered by the browsers, and you can “see” the background through the transparent areas.
The Gimp respects the transparency of your image, so if you have a transparent zone in the image (you can see the checkboard), it will try to keep this transparency on the final image.
The PNG format is more powerful than GIF in this respect, since it can store an alpha layer, that is, a colour can be “semitransparent”. In GIF, a pixel is transparent or not.
Other tutorials and articles from this section: