Recipe 5.1. Optimizing Your Images

Problem

You need to minimize the file size of images to be used on your site while retaining as much image quality and color integrity as possible.

Solution

The Web's main image formats, JPEG and GIF, along with their oft-forgotten stepsister PNG, complete a trio of optimization methods for web designers. You may already know the basic rule of thumb for choosing among the three:

Use GIFs (or 8-bit PNGs) for logos and simple graphics; use JPEGs for photographs.

Discussion

Why optimize? About half of all U.S. households have some kind of broadband Internet access, and many of those users don't have high-speed access at the office, school, public library, or Wi-Fi hotspot. Even a low-end cable or DSL connection can pull down about 85 Kbps. The Internet has come a long way since CompuServe commissioned the creation of the Graphics Interchange Format in 1987 to speed up the delivery of images to its members (most of which were using 2400 baud modems).

First, since the most common browser image formats are compressed formats, you don't have much choice. There's no convenient way to put your EPS, TIFF, and native Photoshop files on a web page. Sure, you can leave the compression options pegged to the top end of the scale when optimizing, but your images will still get compressed to some degree before they end up on your web site.

The second, more serious reason is conservation of bandwidthyour visitors' and yours. As I mentioned in Recipe 4.8 optimizing web page code and images ensures that no one who visits your site waits too long for the page to load. An Internet filled with poorly optimized sites would quickly eat up most of that high-speed access and leave those without it frustrated and looking at partially loaded pages. Also, large image files can quickly consume most or all of your web server disk quota and bandwidth limit, adding extra charges to your hosting account.

Once you know you need to optimize, it's largely a matter of choosing the right file format.

Graphics Interchange Format (GIF)

GIF is a 256-color, lossless compression format that predates the Web by a few years. All graphical web browsers can display GIF files inline on a web page. GIFs are best for images that depict text, drawings, or graphics with large, flat areas of color.

GIF's lossless compression algorithm means that every pixel of the original image remains in the optimized version. Photoshop and other graphics editors allow users to increase the "lossy" setting for non-interlaced, non-dithered GIFs (see Table 5-1 for more about optimization terms), but a high amount of compression will leave the images looking grainy (see Figure 5-1).

Table 5-1. Some important image optimization terms
Term	Definition
Dithering	A GIF option that simulates colors outside the palette in continuous tone sections of an image. Not necessary for images for which the GIF format typically excelssuch as logos and flat-tone artworkbut good for photographs that must be saved as GIFs.
Interlace	Creates a GIF file that displays at a lower resolution first while the high resolution version finishes down-loading.
Progressive	Similar to interlaced GIFs, a progressive JPEG displays at lower resolution while the rest of the file loads.

Contrary to common web designer belief, the 256-color limit does not mean there is a magical, fixed palette of colors that can be used in a GIF. The format supports 8-bit color, meaning that there are two to the eighth power, or 256, "slots" for color codes in the optimized file. You can use a graphics editing application such as Adobe Photoshop to choose from preset color palettes, choose individual colors to be included in the optimized file, and/or reduce the color palette to as few as two colors, before saving it.

Figure 5-1. A highly compressed GIF (left) becomes grainy; a highly compressed JPEG (right) becomes pixilated

One color in a GIF's palette can optionally be set as transparent, giving web designers a way to "knock out" an area of an image so a web page's background color or image can show through. PNG also supports transparency, but JPEG does not.

Unlike the other two formats, GIF files can easily be combined into modestly sophisticated, yet lightweight animations that can be displayed inline on a web page in all major browsers.

Joint Photographic Experts Group (JPEG)

JPEGs can include more than 16 million colorsmore than the human eye can distinguishwhich makes them best for detailed, realistic images, such as photographs and paintings, or images with drop shadows or other finely gradated detail. Colors in a JPEG are true colors, not chosen from a (limited color) palette.

The JPEG format uses a more complicated, "lossy" algorithm that replaces selected pixels and remixes areas of an image with colors already in use elsewhere in the compressed file (see Figure 5-2). JPEG compression can yield a smaller file size faster than GIF optimization, but a highly compressed images becomes pixilated (see Figure 5-1).

The JPEG format does not offer a transparency or animation option.

Figure 5-2. GIFs are better for logos and graphic artwork; a JPEG (above) shows compression artefacting around the lettering that would not appear in a GIF

Portable Network Graphic (PNG)

The PNG format came about in the mid-1990s when GIF creator Unisys began asking for royalty fees from companies using its compression algorithm. Most major browsers (Version 4.0 or greater) handle PNGs just like GIFs and JPEGs. Like GIF, PNG optimizes images with a lossless compression. Photoshop offers the option of optimizing images either as 8-bit PNGswith a 256-color paletteor as full-color 24-bit PNGs. The limited palette PNG often beats a similarly optimized GIF in file size by 5 percent or more, while the 24-bit option usually can't beat a JPEG. But since both PNG formats support transparency, full-color PNGs can have a place in certain design situations.