Digital Images

Resolution

If you were to look at a computerized image with a magnifying glass, you would see that the image is made up of tiny squares. These squares are called 'picture elements', or 'pixels' for short. Picture 'resolution' refers to the number of pixels that make up the picture, and thus the level of detail that the picture contains. The images that we will use in these lessons are usually about 800 pixels wide and 600 pixels tall. This gives a ratio of 4:3 which corresponds to the shape of 'old style' computer screens, but newer computer screens and TVs have a ratio of 16:9, called 'widescreen'. The resolution of a picture that is 800 pixels wide and 600 pixels tall is 800 x 600 = 480 000 pixels or about 0.5 megapixels (1 megapixel = 1 million pixels). This is a good size for learning to use the GIMP, but this might be a bit big to include on a web page. Pictures on web pages should not normally exceed about 800 000 pixels or about 400KB.

Pictures that are destined to be printed, on the other hand, need to have a much higher resolution, for printers are capable or reproducing much finer detail than computer monitors. Many digital cameras, including smartphone cameras, have a resolution of 8 megapixels or more (file size more than 3 MB), and this will give a good result when printed even up to A4 size.

Image Formats

There are many different formats for saving digital images. Some are 'lossless' formats which can produce very large files, others are 'lossy' formats which make the file size much smaller at the cost of a (usually small) loss of image quality. Here are some of the most important formats for you as a GIMP user:

  • XCF The 'native' file format of the GIMP is the XCF format which is a lossless format storing all the data in the image, including layer data. You should usually save your unfinished images in this format unless you are very short of disk space.
  • PSD is 'Photoshop document' format - this format has large file sizes, conserves most of the image data and is useful if you want to move an image from the GIMP and continue working on it in Photoshop.
  • JPEG is a compressed format that is very popular for digital photographs. You can set the compression level yourself, making a compromise between file size and image quality.
  • GIF format is popular for 'artificial' images such as logos or line art which contain no more than 256 colors (the maximum that GIF can handle). For images with no more than 256 colors this format is compressed but lossless. A special feature of GIF files is that can contain several files that can be displayed sequentially, making an animation.
  • PNG combines some of the advantages of both JPEG and GIF and is set to become popular but it is fairly new and some programs such as browsers may not handle this format well.

For compatibility with web pages images should usually be saved in the JPEG, GIF or PNG formats.

Color

'Color' is a key concept in graphics. Computer graphics programs need to describe colors with numbers - the RGB (red, green, blue) convention is the most common way of doing this. The GIMP can reproduce 256 levels of brightness (numbered 0 to 255) for each of these 3 primary colors (red, green, blue), giving a total of 256 x 256 x 256 = 16777216 or about 16 million different colors. (0,0,0) represents black, (255,0,0) represents bright red, (255,255, 255) represents white. Adding primary colors gives the secondary colors: red + blue = magenta, red + green=yellow, green + blue=cyan. This is demonstrated in the following diagram which shows what happens when circular red, green and blue light beams are projected onto a white screen and made to overlap:

Such a diagram is sometimes called a color wheel. Colors on opposite sides of the color wheel, such as green and magenta, are called complementary colors.

Some of the above statements, such as green + red = yellow, may surprise you, for your experience mixing paints may seem to contradict this. The explanation is that paint pigments absorb colors, leading to color subtraction, whereas the above text and the color wheel describe color addition. Color addition corresponds to the way your computer screen works - if the screen's tiny red and green dots are lit simultaneously then you will see yellow. It also corresponds to the way the human eye works - the eye has color-sensing cells only for red, green and blue - if the red and green sensors are stimulated simultaneously then you see yellow. Look again at the diagram, and make sure that you can tell the difference between red and magenta, and between blue and cyan. Note how the diagram correctly shows that when red, green and blue lights (not pigments) are added together, the result is white.

Can you tell what color the RGB combination (0,255,255) would refer to? This would be a combination of no red + bright green + bright blue, in other words CYAN.

When you are working in the GIMP you can click any part of the image with the Eye Dropper tool to 'pick up' the color of that pixel and make it the new foreground color, as displayed in the toolbox (see image at left) . Instead of using the eye dropper tool, you can also simply Alt-click the image at any time. The foreground color is used by various tools, such as the airbrush, paintbrush, pencil, paint bucket etc. You can also change the foreground or background color by clicking their respective squares. Clicking the small black and white squares sets the foreground color to black and the background color to white. Clicking the double-headed arrow swaps the foreground and background colors.