If you dabble in Web development, no doubt you’ve used GIF (Graphic Interchange Format; pronounced “jiff”) images. You’ll recognize images in this format by the .GIF extension after the file name.

GIFs are compressed, bit-mapped images, which means they are small and composed of tiny dots. This month we show you how simple Photoshop makes it to further reduce the size, or “optimize,” GIF images for most efficient use on the Web.

Remember: The larger the Web image, the longer it takes a browser to display it.

Why Not JPEG?

The other popular image format for Web use is JPEG (Joint Photographic Experts Group; pronounced “jay-peg”). JPEGs are also easily optimized for use on the Web. But GIF and JPEG use different compression algorithms, the mathematical formulas that compact bytes and keep images small. Because of their different compression techniques, each format works best for certain types of images.

That’s why the JPEG format works best for photographic-style images or images with many subtle color gradations. But for flat-color images, images with fewer color gradations, such as those you see in many Web banners, ads, buttons, and simple illustrations, the GIF format works best.

Get Started

We’re practicing with a Web banner we’ve created. If you don’t have a Web graphic handy, visit a Web site such as Barry’s Clipart (http://barrysclipart.com) or the Clipart Connection (http://www.clipartconnection.com) to find a good flat-color image to practice with.

To copy an image from the Web, right-click it, select Save Picture As, and save it to your hard drive. Then open Photoshop and the image you just saved.

The Save For Web Command

From the File menu, select Save For Web. In the center of the screen, there’s a large viewing area. To the left are menu options for positioning and magnifying the image for a better view. To the right are the color controls you’ll use to optimize the image.

Quick and dirty. For a quick automatic fix, click the Optimized tab and select GIF. This is Photoshop’s best bet for small file size and good image quality. If you’re satisfied, click OK, name the file using the .GIF extension, and click Save.

Do-it-yourself. If you’d rather optimize the image yourself, click the 4-Up tab. This gives you three views to play with, plus the original image as a reference. The multiple views let you optimize several different ways, compare image-quality and file size (listed in the bottom-left corner of each image), and choose the best solution.

The basic options are on the right in the Settings area. The most important include file format, color reduction, and dithering. Photoshop doesn’t label these areas clearly, but if you set your mouse over each section in the Settings area, you will see what each does.

The file format option lets you select the most appropriate file format for your project. For this project, choose the GIF format. (For kicks, select JPG. Your file size may increase significantly.) To shave a few extra bytes from your image, experiment with the Lossy slider, which lets more image data be replaced and therefore lost. Despite this option, keep in mind that as you reduce the size of your GIF image, you remove data permanently. Although there are lossless image compression algorithms that do not permanently remove data, most compression algorithms for Web graphics are lossy.

In addition, you can adjust the number of colors using the color reduction option under the file format option mentioned above. A GIF can display a maximum of 256 colors. Still, depending on the image, a drastic reduction in color range is often barely perceptible. Photoshop provides four basic color reduction algorithms, formulas that automatically reduce the number of image colors, which is key to reducing file size.

The basic formulas are Perceptual, Selective, Adaptive, and Web. They are also known as color palettes. As you shift between these palettes, you’ll see that the color table (the array of colors just below) shifts with them. Pick a palette that retains image quality but still minimizes file size. For our purposes, we chose the Web palette, which consists of 216 “Web-safe” colors that look good on most Web browsers. (The diamond shapes in the Web color table indicate they are Web-safe.)

Just to the right of the menu that lets you select a color palette is a menu that lets you specify the number of palette colors you actually use. Choose Auto and look at your image. How many colors does it contain? Reduce them in this menu and see how file size shrinks. We reduced our image from 48 to 16 colors.

Lastly, dithering is a color-mixing algorithm that compensates for color loss. From the dithering algorithm menu, choose No Dither. If you choose to dither the colors in your image, experiment with the slider to increase and decrease this effect. Note that dithering can increase file size. Dithering does not always improve the appearance of an image as it improves the rendering of color.

Save Your GIF

Play with these color reduction settings in Photoshop until you’re satisfied. To save the best-optimized image, select it, click OK, name the file (using the .GIF extension), and click save. Your Web visitors will thank you for your quick-loading images.