Get the picture
[November 2004] Continuing our Tips for Terrific Sites, this month's Tip tells you how to make sure your pictures don't drive away your visitors.
Way back in 1997 my first digital camera was one third of one Megapixel, and each photo used about 275 Kilobytes of hard drive space (275Kb). These days a perfectly good, brand new mid-range 3 Megapixel camera can cost as little as $250 and take photos which use a good megabyte of storage space. For more money you can buy a camera with even more Megapixels whose photos may occupy 5 or 6 megabytes or more at best quality.
Put one of these photos (even that relatively small 250Kb photo) straight onto a web page or attach it to an email and you'll be in trouble. Why? Because it'll take ages to send and ages to receive. Your web page will load as quickly as glaciers melt and your visitors will run, not walk, away from your site.
If you have a high-speed broadband connection you might not notice how slowly it transmits, but users with a traditional dial-up modem definitely will. One of the most common complaints people make is about the size of email attachments or slow-loading web pages.
There are a couple of very simple steps you can take to create great-looking photos which load quickly on web pages or speed their way through the email system. You don't have to be a computer whiz either. The steps are identical for both email and web pages. There are some links to free software at the end of the tip.
Step one
Make a copy of your photo. The following steps will make drastic changes to it, so work on the copy and keep the original in a safe place.
Step two
Crop your photo: remove any unwanted edges. For example, if you have a photo of yourself in a park, but your web page requires a head shot, crop away the park. This will bring the focus in on you and make the file size smaller too.
Step three
Reduce the actual size of the photo. 450 pixels on the longest edge is still quite a big photo on most screens. There's no one size fits all so you'll need to find out which size works best for your purpose. This step will dramatically reduce the file size and allow the picture to load more quickly.
Step four
Sharpen the picture a little. This make the edges between objects more distinct and gives the photo a bit of extra "punch".
Step five
Save the picture as a jpg (for photos) or a gif (for logos and the like). The jpg format makes the file size smaller by throwing away some of the pixels in the photo. If we use a little bit of jpg compression we won't notice that some pixels are gone. If we use too much then the photo will look awful. Depending on the software you use, you'll have to experiment here, but often a middle amount of jpg compression works just fine.
By following the steps above you can reduce loading time from perhaps sixty seconds per picture to six seconds. You'll keep friends, make a better impression, save storage space and bandwidth costs.
Recommended software
Mac OS X: the free and included iPhoto will do a great job.
Windows: XNView and IRFanview are highly recommended and free.