Image is Everything

Posted on January 18, 2004

Images are one of the more confusing things on the web. The bigger the image, the slower the download. Lets take an image that is 266K in size (Usually pictures from a common digital camera are around 250-300k. Roughly 5 of these will fit on a floppy disk). The 266K image will take about 100 seconds to appear on a standard 28.8 modem connection. Now I know you probably have DSL or cable, but have some pity for the rest of the world. Most of these folks will not wait 100 seconds for anything, no matter how cool. The best thing to do is offer a thumbnail linked to a much larger image. This let’s those of us with high-speed connections view your genius in all it’s glory, while those with slower connections can still witness some small portion of your glorious vision.

This brings us to a big gotcha found in many web page editing programs. These programs (I’m looking at you, FrontPageā„¢) play a rather nasty trick with images. Instead of actually shrinking the images, the page editor uses HTML to tell your web browser to show the large image at a smaller size. What this means is that the 266K image which is actually 8 inches by 10 inches is displayed as a 1 inch by 1.25 inch image. The drawback is that the browser has to load the whole 8×10 image, which is why it’s so slow. Think of it as a mosquito that weighs as much as an elephant and the poor 28.8 modem user is now trying to suck that elephant through a straw.

Your best bet is to use an image editing program to make any size changes to your picture before you add them to your website. My favorite is Adobe’s Photoshop Elements, which goes for about $85 through Amazon.com and about half that for students through your campus bookstore.

Click For A Larger Image

Elements has a really wonderful option called Save for Web…. This option will allow you to make adjustments to an image’s quality and see how big it is in comparison to the original. It will also tell you how long it will take the image to load at 28.8. You can even create an image with several layers and make the layers into an animated gif.