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 bandwidth—your visitors' and yours. As I mentioned in Recipe 4.8 optimizing web page code ...

Get Web Site Cookbook now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.