- MrMan -

Download this article as a self-extracting text file
View this article in printer-friendly plain-text format
E-mail this article to a friend

Working with Color Modes

It used to be that web designers had to stick with a single 216-color "web safe" palette due to the limitations of 256 color mode, but this can be avoided be making GIFs and PNGs transparent rather than trying to match them to a seperate background. To do this, add an alpha channel to the image (Layers -> Add Alpha Channel) and use the Fuzzy Selection tool to select the background so you can delete it. The constraint of simple transparency makes this a little difficult for anti-aliased images, however the "Semi-Flatten" filter in Gimp (Filters -> Colors -> Semi-Flatten) simplifies it for you. When using the semi-flatten filter, you'll need to know the background color of the page the image will be placed on (or, if the background is an image, the average color) and have that color selected with the color picker. By blending in the background color into the image through semi-flatten, it'll most likely look much better to anyone viewing it on a 8-bit display.

With RGB and grayscale, colors are designated directly, whereas images in indexed mode have a central palette. The palette in an indexed image can be manipulated to bring significant reductions in size, and one of the most effective way to do that is to remove colors from the palette.

Reducing the colors normally forces areas containing the least used colors in the image to be replaced with the more common colors, but this often results in heavy color clipping. Dithering allows colors to be simulated through the calculated placement of pixels in an image. While this does distort the image and increases file size, the result is usually much better than without dithering and allows a high-quality image to be approximated with a small palette, which will often make up for the inherent size increase. To experiment with these settings in the Gimp, convert the image to indexed (Image -> Mode -> Indexed), or if it's already in indexed, to RGB and back.

Cropping and Scaling

In most instances, you should crop transparent images so no space is wasted. Cropping can also serve to emphasize the content as well as reduce file size. The Gimp filter "Autocrop" (Image -> Transforms -> Autocrop) will automatically remove extended bordering areas, and the Crop & Resize tool will allow you to do it manually.

Scaling an image will nearly always bring down its file size, and should be done for images larger than 800x600 as well as for creating thumbnails. To scale an image in the Gimp, go to Image -> Scale Image. Note that when scaling a GIF animation, you can only scale the whole animation.

You can choose the scaling algorithm in the environment preferences menu (File -> Preferences -> Environment), but the default one, linear, is fine in most cases. If the image is in indexed mode, "Nearest Neighbor" (the fastest but has the worst image quality) will be used, so convert to RGB before scaling.

You can also scale an image in HTML or CSS, but that is something you should generally avoid, except for layout purposes. Images that are scaled through HTML/CSS height and width attributes must still be completely downloaded before they're scaled, so any file size benefits that may be had are lost. Also, the scaling algorithm used by most browsers is very poor in terms of picture quality. You can achieve far higher quality and lower file size by doing it in the Gimp.

Creating Thumbnails

Creating thumbnails is often the best way to present photo galleries, however scaling each picture manually can be tedious. The Gimp doesn't have the ability to batch process images built-in, but there are plenty of high-quality free programs you can use, such as album and the Gimp plug-in Gallery Maker. While the ease of creating pseudo-thumbnails through HTML attributes is tempting, don't do it for the reasons mentioned previously.

Thumbnails should be in the same format as the image they're created from, which is probably going to be JPEGs in the case of most galleries. Since the purpose of a thumbnail is to give a general impression of an image, quality is much less important. Low JPEG quality settings or very small palettes are acceptable.

Conclusion

While having a small amount of wasted space in an image is nearly unavoidable, using these tips should allow you to get almost any image down to a reasonable size. Besides the obvious direct benefit of making any HTML page which uses it load faster, you'll also be saving bandwidth and increasing the likelihood that those viewing it on a slow connection will wait for it to load.
Thanks to Walter Zorn for the great tooltip script used on page 1.