Make sure the size and waiting time for your pictures don’t drive away your visitors. [First published November 2004 and updated here.]
Way back in 1997 my first digital camera had a resolution of one third of one megapixel. Each photo used about 275 Kilobytes (275Kb) of hard drive space. These days for $150 you can buy a brand new 5 megapixel camera whose images take up several megabytes on your hard drive. A handy rule of thumb is that the more pixels and the higher the quality of an image, the more it chews through storage space.
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 forever to send and forever to receive. Your web page will load slower than 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.
And these days, more and more people are using cellphones or other handheld devices to browse the web and handle email, sometimes over expensive connections. Slow-loading images just cause problems.
To attach it here I used iPhoto to change the size and save it as a jpg (with no other changes). This small version is now only 11Kb and measures 320*213 pixels. Click the thumbnail to see a larger version at 640*426 pixels and 40Kb in size.
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. If you use Apple iPhoto it takes care of this step for you.
- 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
- 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 a couple of minutes per picture to a few seconds. You’ll keep friends, make a better impression, save storage space and bandwidth costs.
- Mac OS X: the free and included iPhoto will do a great job.
- Windows: XNView and IRFanview are highly recommended and free.
- I haven’t tried Picasa, but have heard good things about it.
- Explore Flickr for more options too.
Written for and reproduced from CommunityNet Aotearoa Panui, November 2004. The article has been edited for reproduction here.