Trailer Sailor Articles & Reviews


Preparing images for posting on the web (and this forum)

Posted By: ZacC
Date: 3/28/03 12:01p.m.

Report: outside forum guidelines

I have taken the liberty of composing a simple set of recommendations for preparing images for posting on the web in general, and in particular this forum.

1) Photos taken with a digital camera are almost always much higher resolution than is needed for the web. This creates two problems: First, the actual file size is much bigger than necessary, and thus will take a long time to download, and hog bandwidth. Second, the image will appear too large on the screen, and may well require scrolling just to view the whole image.

2) Forget about DPI (dots per inch), and any unit of measure besides pixel count. For the web you do not care if a picture is 3x5 inches. What you care about is the actual number of vertical and horizontal pixels. A maximum width of 600 pixels is a good rule of thumb. Less will often be more than adequate.

3) You will need some kind of image editing program to size down your images. Most digital cameras come with basic software to do this. In addition to the basic included software, programs like Photoshop, Paintshop Pro, ACDSee, and many others have excellent tools for sizing images down while keeping good image quality.

4) Crop the image. Photos will often encompass a much larger field of than necessary. Use your image editing program's Crop tool to better frame your shot. NOTE: Some image editing programs will let you set a pixel value for the crop tool so that it will resize the "cropped" portion of the image to what ever size you specify. For example, with Photoshop you can set the crop tool to 600 pixels wide and leave the height value blank. After using the crop tool, you are left with a finished image that is 600 pixels wide and however tall it needs to be to stay in the correct proportion. If you want to resize the entire image (most images benefit from a little cropping around the edges) just run the crop tool over the entire image, click, and the whole image is resized to 600 pixels wide. Be sure to note the resampling settings as explained below.

5) Resize the image (assuming you didn’t do it with the crop tool). The dialog box that does this will usually allow you to specify the units you are working with. Be sure to specify pixels. For the web, DPI does not matter. If your program supports some method of resampling the image during resizing (sometimes called “smart sizing” or even “softening”), you will probably want to enable it. Without resampling, an imaged that has been sized down will tend to appear jaggy and harsh.

6) Once the image has been sized down, it may appear too soft.. You may want apply a sharpening filter to it to enhance the clarity. Even basic image editing programs generally have a simply sharpening function. You also want to play with the contrast/brightness and tone balance of the image. You would be amazed at how a poorly exposed image can be improved.

7) Now you are ready to save the image. For photographs, JPEG (.jpg) format is the best for uploading to the web. Do not use .bmp, .tif or even .gif files, as they will end up much larger than necessary. NOTE: .gif files are very useful on the web, particular with graphics that contain a limited number of colors, but generally not for photographic images. You should be able to adjust the level of JPEG compression for the image. The more you compress the image, the more quality you will lose. The adjustment may appear in two ways: It will either allow you to adjust the amount of compression (less compression equals better quality) or the level of quality (more quality equals less compression and bigger files). Your goal should be to get your file size well under 100k, and preferably under 50k. I find that a compression level of 10-15% (quality level 85-90%) works nicely, but sometimes I have to push it up to 20% (quality level 80%) to keep the file size reasonable.

Here are some useful links I found with more detailed instructions and information.

http://www.larry-bolch.com/save-for-web/

http://members.aol.com/_ht_a/anneareid/MonValley/cut14/jcomp.htm

Thanks to Mark Steinbeck and others for their contributions to this guide.

Hope this helps, Zac

Trailer Sailor Articles and Reviews is maintained by SailboatOwners.com with WebBBS 5.12.