1. Technology
Send to a Friend via Email
Prep Your Photos for the Web
Tips for taking your photos from your camera to the Web

If you use a digital camera to take pictures for a Web page, there's a few things you'll need to do with your images to prepare them for the Web. At the very least the photos will need to be rotated, cropped, and resized. In this article I'll show you how to perform these common tasks using Adobe Photoshop, Corel Photo-Paint, Jasc Paint Shop Pro, and Ulead PhotoImpact. I'll even teach you some time-saving tricks for automating the work to let your software do the repetitive parts for you!


 More of this Feature
• Rotate Crop Resize in Photoshop
• Batch Process in Photoshop
• Rotate Crop Resize in Photo-Paint
• Batch Process in Photo-Paint
• Rotate Crop Resize in Paint Shop Pro
• Rotate Crop Resize in PhotoImpact
• Batch Process in PhotoImpact
• Resizing via HTML
• Embellishing your Photos
 
 Join the Discussion
"I cannot figure out how to properly resize a large scanned image so it will fit entirely inside a typical browser window. The image I scanned is 8x10 in Paint Shop Pro and will print entirely on one page, but when viewed in MSIE it will appear enormous."
-- Fred
 
 Related Resources
• 10-Step Photo Prep
• JPEG Myths & Facts
• 
Digital Imaging Tips
 
 From Other Guides
• Putting Photos on a Web page
 

Before I get into the specifics on how to perform these tasks, I'd like to warn you about a potential problem. Most digital cameras save your pictures in the JPEG format. JPEG is known as a "lossy" format, because the compression scheme causes the image to lose detail and clarity each time the image is edited and saved. Here's a few things you can do to combat this loss in quality:

  1. If possible, perform as many edits as possible in one session so you're not saving to the JPEG format repeatedly.
  2. When resaving a JPEG, use the same compression setting that was used for the inital save. With digital cameras, this is not always possible, since the camera uses settings such as Basic, Normal, and High instead of numerical settings. If the numerical equivalent for the quality settings are available in your camera's user manual, keep these numeric values handy so you can refer to them when you need to resave the JPEG images. You'll still have some loss in quality even when you use the same compression settings, however, it will result in less damage than if you were to use different settings with each save.
  3. The best solution is to convert your images to a lossless format as soon as you download them from your camera. Leave the images in the lossless format through the editing process and only convert to JPEG as the last step before putting the images on the Web (again, use the same compression settings as the initial save, if at all possible). It's a good idea to archive your images in a lossless format since you never know if you'll need to edit the images for another purpose in the future. The most common lossless image formats to use are Bitmap (BMP), TIFF, and PNG. Bitmap is a uncompressed format so the images will be quite large. TIFF and PNG will result in smaller file sizes, although not as small as JPEG format. Obviously, the down side to this solution is the additional storage space required as a result of the larger file sizes.
  4. To learn more About JPEG compression issues, see Myths & Facts About JPEG.

On the following pages I will show you how to rotate, crop, resize, and batch process your images. Click a link below to learn how to perform these tasks in your favorite software program:

Photoshop
Photo-Paint
Paint Shop Pro
PhotoImpact
n/a

Resizing via HTML
Learn why not to resize images in the browser with HTML tags.

Correction
Rotating, cropping and resizing your images is the bare minimum of steps you should take to prepare your images for the Web. In addition, your images may need color correction and other touch-ups. Resizing your images always results in some blurring, so if you've resized the images you'll defintitely want to sharpen them. Sharpening photos should be the last step and you should use your software's Unsharp Mask filter, as this gives you much greater control over the one-click sharpen command in many programs.

Embellish!
At this point your images should look pretty good and be ready to put onto the Web as they are. But why stop there? Images that merely look good aren't always enough to really grab your visitors' attention. Continue on to embellishing your photos for several examples of simple things you can do in a variety of software to make your images more memorable.

Post It!
If you've followed along, you'll soon have a passel of pictures prepped and ready to post. Learn how to put them on a Web page with this tutorial from Personal Web Pages Guide Linda Roeder.

You can opt-out at any time. Please refer to our privacy policy for contact information.

Discuss in my forum

©2014 About.com. All rights reserved.