With today's digital cameras it is possible to take some amazing digital pictures with excellent quality and customization. The high resolution of these photos makes them very suitable for print. However, when preparing photos for web display there's a few things we should keep in mind.

Resolution

Resolution is basically the number of pixels per inch that your photos have. More pixels per inch leads to higher resolution and higher quality but also larger file sizes. Typically a resolution of 300 dpi is suitable for print material. When it comes to displaying photos on the web however, there are 2 limitations we need to contend with:

1) File Size: Loading time is critical. You don't want users waiting more than 1 or 2 seconds for a photo to load.
2) Display Quality: Most monitors only have a display quality of 72 dpi or 96 dpi. Photos with higher resolution would waste bandwidth witout appearing any better.

Keeping these concepts in mind, let's see how we can go about preparing digital photos for web display. The tutorial below is one that I initially made for a client. I had built an automated photo gallery where the client could upload and display their own photos. I included the tutorial to help them prepare the photos adequately before uploading them. Some of the numbers regarding the height and width of the photos are spcific to the client and are not written in stone. However, they are still good guidelines to use for general web display.

Setting Photo Resolution

1) Open the image file in Photoshop

2) From the top toolbar, go to Image --> Image Size

3) On the Image Size form check the Resolution. IF the Resolution is greater than 72, then:

Make sure both checkboxes at the bottom are checked

Make sure the 2nd check-box (resample image) is set to "Bicubic"

Set the Resolution to 72

4) Now check the Width as instructed below

Setting Photo Width

1) Check the photo Width on the Image Size form. IF the Width is greater than 500, then:

Make sure both checkboxes at the bottom are checked

Make sure the 2nd check-box (resample image) is set to "Bicubic"

Set the Width to 500

2) Now check the Height as instructed below

Setting Photo Height

1) Check the photo Height on the Image Size form. IF the Height is greater than 375, then go to step 2.

2) From the top toolbar, go to Image --> Canvas Size

3) On the Canvas Size form:

Make sure the Height measurement is in "Pixels"

Make sure the "Relative" check-box is unchecked

Use the Anchor tool to determine which part of your image is cropped off and which part is kept (see tip below)

Set Height to 375

Tip: The anchor tool enables you to decide which part of your image is kept and which part is cropped off. In this example, since we're doing a vertical crop, we're really only interested in 3 options: Keeping the middle, top, or bottom of the photo and cropping off the rest. See the examples below.

That's it! Now you're ready to save!

Saving Your Photo

When saving your photo you will be prompted by the JPEG Options form. Be sure to use an Image Quality setting of 8 and Standard Baseline format.