Resizing your photos - a step by step guide
©2004 Tom O Scott

This example assumes you have PhotoShop, but the same steps should also work in Elements. Please follow these steps before submitting your photos to our web site.

Example 1 Image
 

Here is a scanned image, shown by double-clicking on the thumbnail in the browser. I then used the Image/Image Size menu to get the dialog box next to the image. As you can see, this file is way too big for the web - 21.6 mb. Also, the resolution is 474 pixels per inch, way too high for the web, where the ideal resolution is 72 dpi. Before submitting this photo, I need to make it much, much smaller.

Example 2 Image The first step in downsizing the photo is to change the DPI setting to 72 pixels per inch. This will automatically change the width and height in pixel dimensions. In the case of this photo, the height was too small, so I changed it to 600 pixels high. For horizontally aligned photos, I generally use a width of 640 pixels, but since this is a vertically oriented photo, I use 600 pixels high so that the viewer will not have to scroll down the page to see the whole photo.

The good news is that the size has decreased considerably. The old size was 21.6M; the new size is a much smaller 1.65M - still much too big for the web, but getting closer.

I click on the OK button, and I'm now ready to do the final sharpening before saving my image for the web.

 
Example 3 Image

While my sharpening tool of choice is PhotoKit Sharpener, if you don't want to spend the money, you can use the PhotoShop Filter/Sharpen/Unsharp Mask Menu to do your final sharpening. Note that you should never sharpen before resizing your image; this is always something you should do just before your final "Save for Web" operation.

The settings you see here are fairly "safe" ones that should not create ugly sharpening "halos" at the edges. You generally can set the Amount from 50% to 200% without bad effects, but increasing the Radius above 0.8 pixels will likely result in a halo.

This is an easy, quick way to sharpen your photos for the web. It is not the best way. The aim of this article is not to discuss the ins and outs of sharpening. However you sharpen your photos, the important thing to remember is that this is the next to the last step in preparing your photo for the web.

Now we're ready to save the image for the web. To do this, use the File/Save for Web menu, which will bring up a display like the one below. Example 4 Image

This screen shows you the size of the original image on the left (846K), and the size of the optimized image on the right (151.9 K). How was this achieved? By the Quality box on the upper right of the form, there is a > icon. Click on that, and a slider bar will appear. This slider will let you set the quality anywhere from 0 to 100. As you slide it up and down, you will see the size of the image decrease or increase.

A Quality setting of 55 or above is generally fine for the Web. If you set it too low, you will get "jpeg artifacting", i.e. some wierd patterns on your image caused by the loss of data in the compression. But if you follow the steps in this article, you should be able to get a nice looking image at our target size of 150K.

Curious about how the final image looks? Here it is: Final Image

 

Unless otherwise specified, all text and images on this site are ©2003-2004, North County Photographic Society.

Valid XHTML 1.0!    Valid CSS!