Preparing pictures for your website

Pictures intended for a web page must be prepared in advance. The objective is to reduce the picture to a size that looks good on the page, while keeping the file size down to an acceptable size for a visitor using a dial-up connection. It may also help to enhance your pictures; it is surprising how correcting colours and contrast can improve a photo.

Choose your axe

For quick viewing, plus crop, resize and sharpen we recommend IrfanView (free download).

For superior picture enhancement we recommend Picasa (free download).

If you are already familiar with a graphics editor such as Paint Shop or Photo Shop, then use whichever you feel most comfortable with.

1. Crop

Usually a tight crop will improve a picture. Crop as tightly as you dare.

2. Resize

Resize until it fits neatly within the page design.

Some page designs will "come apart" if you leave the picture too large. You may have to experiment to get the optimal size. Existing pictures on the page are usually a good guide to what size works best.

3. Enhance

Try sharpen to see if this improves the picture. If it doesn't, then undo it. You can also try adjusting the brightness and contrast. Picasa offers several different picture enhancement options. Every photo is different. Find out what helps by trial and error.

4. Save

Save as a JPEG. Don't replace the original – save with a different name. Adjust the JPEG compression if need be. Usually a compression factor of about 15 will give the best balance between quality and size. (If the picture is line art, you will usually get a better result saving as a GIF.)

When you save a JPEG, one of the options is to save as a progressive JPEG. A progressive JPEG is designed to appear on a web page quickly at a low resolution, and then gradually increase in resolution as the rest of the image is downloaded. We strongly advise that you do not use this option. Internet Explorer does not display progressive JPEG's properly; it shows a blank space during the downloading of the image. This blank space can last for several seconds on a dial-up connection — enough to make your website visitor think that your site is "broken". The only way around this problem is to save your JPEG images in standard (non-progressive) format. When you save a GIF, one of the options is to save as an interlaced GIF. An interlaced GIF, like a progressive JPEG, is designed to appear on a web page quickly at a low resolution, and then gradually increase in resolution as the rest of the image is downloaded. For GIF's this is a good option because it is fully supported by all major browsers. It's not really necessary for GIF's just a few pixels wide, but for anything over about 50 pixels across it is worth saving as an interlaced GIF.

5. Check

Check the file size. If it is an important picture on your home page you will want it to be fast-loading and will aim for about 30KB to 40KB in size. Likewise, if it's a decorative feature you will want to keep it within this size range. If it is a significant picture that your visitors will be prepared to wait for, then its quite ok to go up to about 100KB or even more.

Repeatedly opening, changing, and saving a JPEG will cause loss of picture quality. Repeated resizes will do this too. Best practise is to start over with the original every time you want to try a different size.

See also

• Using our online editor
• Creating PDF versions of your documents
• FAQ