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 colors and contrast can improve a photo.
Choose your ax
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.
|
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. |
