Aug 21, 2010

Regardless of the image or file type, there are a few basic strategies to keep in mind for limiting file size. In the broadest of terms, they are:

Limit dimensions

Although fairly obvious, the easiest way to keep file size down is to limit the dimensions of the image itself. There aren’t any magic numbers; just don’t make images any larger than they need to be. By simply eliminating extra space in the graphic in Figure 19-1, I was able to reduce the file size by 3K (23%).

Reuse and recycle

If you use the same image repeatedly in a site, it is best to create only one image file and point to it repeatedly wherever it is needed. This allows the browser to take advantage of the cached image and avoid additional downloads.

Design for compression

One of the best strategies for making files as small as possible is to design for efficient compression. For example, because you know that GIF compression likes flat colors, don’t design GIF images with gradient color blends when a flat color will suffice. Similarly, because JPEG likes soft transitions and no hard edges, you can try strategically blurring images that will be saved in JPEG format.

Use web graphics tools

If you know you will be doing a lot of web production work, it is worth investing in image editing software such as Adobe Photoshop or Adobe (Macromedia) Fireworks. Figure 19-2 shows the Save for Web & Devices dialog box in Photoshop CS3 and the Optimize and Preview panels in Fireworks 8. We used the Save for Web function in Chapter 18, Web Graphics Basics to resize an image and to make transparency settings. In this chapter, we’ll explore the settings that pertain to keeping file sizes as small as possible.

Both tools allow you to preview the final image and its respective file size as you make your optimization settings, so you can tweak settings and see the results instantly. The set of options varies by file type, so I’ll explain them one format at a time, starting with that old favorite, GIF.