a Thursday feature

by Lori Hylan

This week I'm going to say a few words about images. Many of the images on the Web are too large, both in terms of dimensions and in terms of file size, and many more are completely unnecessary.

Those Microsoft ads on TV would have us believe that Web pages are composed of nothing *but* images--high-resolution, millions-of-colors images that fill the screen. The fact is that most of what's on the Web is text, with (low-resolution) images thrown in here and there to "spice things up."

Before putting images of any kind in your HTML documents, consider two things:

Next, think about what kinds of images will give your pages the most bang for the byte. Here are a few possibilities for different kinds of sites:

Type of SiteBad ChoiceBetter Choice
community hospital pencil sketch of the building map of the neighborhood with the hospital's location marked; floorplan of the hospital
corporate/ small business globe, compass, arrows, or other clichéd directional icons the company's logo
bookstore/ library thumbnail photos of bookcovers that lead to giant photos of bookcovers thumbnail photos of bookcovers that lead to tables of contents, sample chapters, or reviewer blurbs
fan/ entertainment giant photo of yourself, the fan the band's logo (e.g., The Rolling Stones' tongue), the author's photo (e.g., C.S. Lewis at his typewriter)

Once you decide what kind of image you're going to use, get a copy of the image that's both dimensionally larger and higher resolution than you'll actually use on the site. For one thing, it's easier to edit a larger, higher resolution image. For another, if you decide later to go in another direction with your image--for example, saving it in JPEG instead of GIF format, or using a blue duotone instead of red--you'll still have a full range of options open to you.

Next, start cropping out everything that isn't essential to the image. For example, I wanted to create a site devoted to Detective Logan from TV's Law & Order. I had a great photo of Logan standing in the park with two mounted police officers and their horses, but it was huge. For a site about Logan, the beat cops and their mounts are really extraneous, so I cut them out.

After you have the image exactly as you want it in large, high-resolution form, Save As to another filename (preserving your original image for later editing if necessary), and start thinking about how small you can make it while still keeping it recognizable. Then go a little smaller--chances are that you'll have overestimated how big the image really needs to be.

Finally, it's time to decide what file format you're going to save your image in. JPEG images are usually slightly smaller than GIF images of the same dimensions, but they can take longer to load. A good rule to go by is to determine how many colors you really need: If you've got a 24-bit image of a sunset and the gradient devolves into chunky bands of color when you convert it to indexed color mode, go with JPEG. If the image quality is essentially unchanged when you index the colors, go with GIF. And if you're using illustrations rather than photographs, remember to index your colors with the Netscape color palette.

I have more thoughts on images and their use on Web sites, but I'll save them for next week. Until then, happy designing!

Past installments of Design Diary

http://www.internet.com/