2. Preparing your Images for the Web

One of the most common uses for GIMP, is to prepare images for web sites. This means that images should look as nice as possible while keeping the file size as small as possible. This step-by-step guide demonstrates how to create small files with minimal loss of image quality.

2.1. Images with an Optimal Size/Quality Ratio

An optimal image for the web depends upon the image type and the file format. Use JPEG for Photographs because they usually have many colors and great detail. An image with fewer colors, such as a button, icon, or screenshot, is better suited to the PNG format.

  1. First, open the image as usual. I have opened our Wilber as an example image.

    Figure 6.6. The Wilber image opened in RGBA mode

    The Wilber image opened in RGBA mode

  2. The image is now in RGB mode, with an additional Alpha channel (RGBA). There is usually no need to have an alpha channel for your web image. You can remove the alpha channel by flattening the image.

    A photograph rarely has an alpha channel, so the image will open in RGB mode rather than RGBA mode; and you won't have to remove the alpha channel.

    [Note] Note

    If the image has a soft transition into the transparent areas, you should not remove the alpha channel, since the information used for the transition is not be saved in the file. To save an image with transparent areas that do not have a soft transition, (similar to GIF), remove the alpha channel.

  3. After you have flattened the image, save the image in the PNG format for your web site.

[Note] Note

You can save your image in the PNG format with the default settings. Always using maximum compression when creating the image. Maximum compression has no affect on image quality or the time required to display the image, but it does take longer to save. A JPEG image, however, loses quality as the compression is increased. If your image is a photograph with lots of colors, you should use jpeg. The main thing is to find the best tradeoff between quality and compression. You can find more information about this topic in Section 1.2.2, “Saving as JPEG”.