Making Photos Load Faster

If you've hung around the Web for a while you probably remember when the height of chic was black text on a gray background. Boring - but it sure did load fast. They were also the days when most people had 28.8 modems, so load time was more of an issue than it is now. But don't discount it. Fewer than 10% of the people viewing your site will have high-speed connections, such as DSL or Cable. The rest are still viewing your site at dialup speed.

My design relies heavily on graphics. I like my sites to be inviting. But I am careful, always careful, to make my graphics load as quickly as possible.

Size matters
It seems obvious, but just making a graphic smaller will make it load faster. It is possible to manipulate the size of your inline graphic by using HTML code. The digital photos that come from my camera are 2048x1536 pixels. The lowest screen resolution is 640x480 pixels. Let's say I want a photo to take up half this screen, or 320 pixels.

I can force the photo to look smaller on the screen by using these attributes in the HTML code:

<IMG SRC="photo.jpg" width="320" height="240">

Drag-and-drop programs make it convenient to resize the appearance of a picture while leaving the original size intact and the download time long. It pays to take the time to physically alter the size of your photos.

Quality matters
Twenty five seconds for one photo is still a pretty long wait time. What else can we do to make the photo smaller? We can decrease the quality. Screen resolution is 72 dpi, dots per inch. If you are used to working in print, you are more likely to think in terms of 300dpi , 600 dpi or even higher. Change your thinking. Anything over 72dpi is wasted pixels.

When working with the JPEG format (photos should always be JPEGs) you have a choice of selecting a quality level between 0 and 100, or low, medium, high and maximum. I've found that a low resolution is often good enough, almost indistinguishable from the original. This same 320x240 photo saved at a low resolution is less than 13 KB and will load in about 2 seconds with a 56.6 modem. Saved at a medium resolution still saves you time and space: it's about 21KB and loads in a little over 3 seconds.

Making your images use fewer kilobytes without a noticeable loss of quality is called optimizing your images. Many software programs take the guesswork out of this, including JASC Paintshop Pro and Adobe Photoshop Elements. Both retail for $99. If your graphics program doesn't do this, one of these programs would be a good investment.

If you would like to test-drive a graphics optimization program, download the 30 day free trial of WebGraphics Optimizer at www.webopt.com/. The standard version costs $39. A free program is Paint Studio Lite. Download it from www.webattack.com/get/paintstudio.shtml.

Thumbnails and Galleries
If you have a large number of photos that you need to display, one way to present them is in a thumbnail gallery. A thumbnail is a small copy of a photo. about 90x120 pixels or smaller. When you click on the thumbnail, it links you to a full-size photo on a new page. Many graphics programs have a gallery wizard that will do this for you. If yours doesn't, you might want to look into purchasing a program such as Thumbnail (get a free trial or purchase it for $28.99 at www.raizlabs.com/software/magic/. You can see an example of a gallery at www.texas.net/~square1/france/. This was created using Adobe Photoshop.

GIF vs. JPG There are two common file formats for Web graphics: GIF and JPG.

• GIF (Graphics Interchange Format) was developed by CompuServ as a way of compressing graphics to send over telephone wires. It is a "lossless" format, which means it keeps all of the graphics data intact. GIF is limited to 256 colors. It is best used for graphics that have flat areas of color (like line art and text). GIF is used for animations and for transparent backgrounds: graphics where the background color or image shows through.

• JPG (Joint Photographic Exchange Group) is a lossy format, which means that some of the file data is discarded in the compression process. JPG should always be used for photographs or other art where there are a lot of color gradations.

Many graphics fall somewhere in between. In these cases it pays to experiment to find the format that gives the best quality for the lowest pixels.

Save your original
A final word of advice. When you start messing with graphics - cropping, adjust color, playing with file formats or bit depth - work off of a copy, not the original. Save the original in its native condition. That way, if you make a mistake, need a higher resolution for a print publication or change your mind about the crop, you have a fallback position. Periodically archive your photos on a CD to clear room on your hard drive.