Five Tips for Optimizing GIFs in Photoshop CS2
Date: Nov 18, 2005
For more information on Web design, visit our Web Design Reference Guide or sign up for our Web Design Newsletter.
Optimizing images for the web is an art and a science. As a web designer, it's your job to create the best-looking images with the smallest file size.
There are only a few graphic file formats you can use on the web. The two most popular are JPEG and GIF. A previous article focused on the basics of JPEG optimization. In this article, we'll get into the details of GIF optimization.
When you optimize images as GIFs in Photoshop CS2, it's important to understand what you can do to make the smallest possible files. Here's an overview:
- Start with the right type of image. GIF stands for
Graphics Interchange Format. The GIF file format does a better job than
JPEG of optimizing and compressing flat or simple graphic images with solid
areas of color—logos, illustrations, cartoons, line art. The GIF file
format looks for patterns in artwork, such as large runs of a single color in a
horizontal, vertical, or diagonal direction. Areas where colors change increase
file size, which is the reason you shouldn't optimize continuous-tone
images, such as photographs, as GIFs.
Figure 1 and Figure 2 are best suited to GIF optimization because they contain flat, graphical content. Although Figure 2 has areas with gradual color change, these files are better suited to the GIF file format, rather than the JPEG file format.
- Reduce the number of colors. The fewer colors you use, the smaller the file size. Unfortunately, reducing the number of colors to too few colors can compromise the composition. The trick is to find the balance between the fewest number of colors and the best-looking image.
- Choose a color-reduction palette. There's no science to choosing a color reduction palette—it's sheer experimentation. Once you choose the number of colors, you can experiment with the three color-reduction palettes—perceptual, selective, and adaptive—to figure out which one gives you the best-looking image with the smallest file size. Each palette reduces the number of colors in the image using a slightly different algorithm. Every image you optimize will look best and result in a smaller file size using a different color-reduction palette, so make sure you experiment with all three before you make your final decision.
- Reduce the amount of dithering. The more dithering in an image, the larger the file size. Dithering adds different-colored pixels in close proximity to each other to simulate secondary colors or smooth gradations in color. Some images must contain dithering to look good, but it's best to use the least amount of dithering possible to keep the smallest file size.
- Add lossy compression. The more lossy compression, the smaller the file size. Lossy compression discards visual information, which can reduce the file size. Traditionally, GIF was a lossless file format. However, Photoshop CS2 allows you to add a small amount of lossy compression, which can help reduce file size.
)
)
Now that you have an idea of what helps make small GIFs, it's time to put theory to practice and learn how to optimize a GIF in Photoshop CS2.
- Open a flat graphic, such as a logo, in Photoshop CS2. Figure 3 shows a Javaco tea logo. This logo contains a number of colors.
- Choose File > Save For Web to open the Save For Web dialog box. Choose GIF from the Optimized file format pop-up menu. Click the 2-Up tab so you can see a preview of the original image and compare it to the optimized image.
- You'll need to figure out the optimal number of colors to use. Choose 256 from the Colors pop-up menu to view the image with 256 colors, which is the largest number of colors you can use when you optimize a GIF (see Figure 4). The image still looks good with 256 colors. Let's see if we can reduce the number of colors further but still maintain the same quality of image.
- Choose 128 from the Colors pop-up menu. Then choose 64, and finally 32. Notice that the image still looks good at each of these settings, but the file size is significantly smaller each time you reduce the number of colors. With 256 colors, the image was 11.82KB; with 32 colors, the image is 7.9KB (see Figure 5).
- Choose 16 from the Colors pop-up menu; then choose 8, and finally go back to 32. Notice that when you reduce the number of colors to 16 or 8, you start to lose the quality of the image. Although the file size is slightly smaller with 8 colors (5.135KB), there is a significant loss of quality (see Figure 6). Therefore, the optimal number of colors for this image is 32.
- Now that you've identified how many (or how few!) colors to use, you need to decide how to reduce the number of colors, by experimenting with the Color Reduction palettes. Choose Selective from the Color Reduction pop-up menu. Notice that the file size is now 7.9KB. Choose Adaptive from the Color Reduction pop-up menu. The file size is now 7.939KB—slightly larger than with the Selective option.
- Choose Perceptual from the Color Reduction pop-up menu. Notice that the file size is slightly smaller—only 7.313KB (see Figure 7). For this particular image, the Perceptual setting yields the smallest file size. The trick with choosing the right color-reduction palette is experimentation. Different images will use slightly different color-reduction palettes to yield the smallest file size, so experimenting with all three gives you the best result.
- Next, you'll reduce the amount of dithering. Choose No Dither from the Dither pop-up menu. You see no visible change to the image, but you do see a savings in file size, as shown in Figure 8. The file is now 7.114KB! In this example, dithering did nothing to enhance the visual appearance of the file—all it did was unnecessarily increase the file size.
- Time to add lossy compression. Type 10 in the Lossy field to add a small amount of lossy compression. The quality of the image doesn't change, but the file size decreases slightly, to 6.375KB (see Figure 9). You've reduced the file size by almost half from where you originally began at 11.82KB!
)
)
)
)
)
)
)
You're done! As you can see, there's more to creating small, quality, optimized GIFs for the web than just decreasing the number of colors. Use these principles as you work with your own graphic images. In my next article, you'll learn how to optimize JPEGs with an alpha channel.
For more information on Web design, visit our Web Design Reference Guide or sign up for our Web Design Newsletter.