Compress Those Photos!

The number one reason people give for leaving web sites is that they take too long to appear. People on the web are generally in a hurry, and expect almost instantaneous results from their mouse clicks. Although there are many factors that combine to slow down a web site, one of the most common, and easiest to avoid, is photographs that haven't been properly compressed.

Every year brings a new crop of digital cameras capable of capturing more data. Many of today's cameras promise pictures that are more than 3 megapixels in size. This results in much clearer images than was available just a few years ago, but it also results in much larger file sizes. Since a good target size for an entire web page is 40-50 kilobytes (kb), and a single image can be over 2000 kb, you can see the potential problem is huge. A typical web page may contain several photos, graphical navigation buttons and logo, text, plus all the HTML and Javascript code. Therefore, a single picture may have to be reduced to 10-20 kb so it won't delay the appearance of the web page.

Photographs and other graphics with smooth transitions of color and tone should be put through JPEG compression. Named after the Joint Photographic Experts Group that developed it, this software tool allows the skilled user to greatly reduce the file size of a photo while maintaining much of its original clarity. As more compression is applied, the file size goes down, but so does the appearance. The graphic designer needs to strike a balance between file size, which affects download time, and crispness of detail.

In order to make good decisions about how much to compress a photo, the designer must also know about the rest of the objects and code on the web page. A photo would not have to be compressed as much if it was the only picture on the page, but if there were ten on the page, each would need more compression. Similarly, a photo that will be a four inch square on the screen would have to be compressed more than a one inch square picture.

Although most digital cameras offer some JPEG compression, the photographer has little control over it, and the resulting photos are often still far too large to use effectively on a web site. Photoshop and Fireworks are two software tools designed specifically for professional image manipulation. Designers can look at four different compressions at once and pick the one that is the best compromise between file size and picture clarity. Logos, buttons and other graphics with large areas of flat color are better compressed by something called GIF. We'll discuss that at another time.