Determine Web Image Resolution in Photoshop CS5 - dummies

By Jennifer Smith, Christopher Smith, Fred Gerantabee

Adobe Photoshop Creative Suite 5 provides tools to set your image resolution for print or for the web. Having the proper resolution is important to the final outcome of an image.

Did somebody ever e-mail you an image, and, after spending ten minutes downloading it, you discover that the image is so huge that all you can see on the monitor is your nephew’s left eye? Many people are under the misconception that if an image is 72 dpi, it’s ready for the Web. Actually, pixel dimension is all that matters for Web viewing of images.

Most people view Web pages in their browser windows in an area of about 640 x 480 pixels. You can use this figure as a basis for any images you create for the Web, whether the viewer is using a 14-inch or a 21-inch monitor. (Remember that people who have large monitors set to high screen resolutions don’t necessarily want a Web page taking up the whole screen.)

If you’re creating images for a Web page or to attach to an e-mail message, you may want to pick a standard size to design by, such as 600 x 400 pixels at 72 dpi.

To use the Image Size dialog box to determine the resolution and size for on-screen images, follow these steps:

  1. Have an image open and choose Image→Image Size.

    The Image Size dialog box appears.

  2. To make the image occupy half the width of a typical browser window, type 300 (half of 600) in the top Width text field.

    If a little chain link is visible to the right, the Constrain Proportions check box is selected, and Photoshop automatically determines the height from the width you entered.

  3. Click OK and double-click the Zoom tool to see the image at its actual onscreen size.

    That’s it! Whether your image is 3,000 or 30 pixels wide doesn’t matter; as long as you enter the correct dimensions in the Pixel Dimension area, the image works beautifully.