Main Body

How do I resize images for use on a CHCS web site?

As CHCS developed your web site, we will have discussed with you the optimal size of images for your design. In order to make sure that the design is not "broken," you should maintain the same image dimensions (especially width) as you update your site.

There are many programs that allow you to edit images. The final product of the edited images should be in .jpg or .gif format, and the file size (in KB) should be as small as possible while making the visual quality appropriate to your needs. Images for the web are standardized at 72 dots per inch (dpi), although most programs have a "save for web" option that will do this for you automatically.

The following examples assume that you want to make an image 200 pixels wide by 300 pixels tall. Change the dimensions to fit your needs.

Resizing in Photoshop

There are two ways to go about making an image to fit an exact specification. Either of these methods will create images exactly the right size.

Method 1

  1. Open the image you want to use.
  2. Select all (Ctrl-A), then copy (Ctrl-C). Leave the image open.
  3. Create a new blank document (Ctrl-N) that is exactly the size you want. In this example, 200 pixels wide by 300 pixels high. Set resolution to 72 pixels/inch and color mode to RGB Color (these settings aren't absolutely necessary, as "save for web" will do the same thing, but now you will see exactly what the final image will look like).
  4. On this blank document (think of it as a mini printed page), paste your existing image into a new layer (Ctrl-V will create the layer and paste at the same time).
  5. Use the Free Transform (Ctrl-T) tool to move the image around until the part of the image you want is showing. Let the remaining parts of the image bleed off the edges.
  6. Select Save for Web (Alt-Shift-Ctrl-S). If that's too many fingers, go to the File menu and select Save for Web from there!
  7. In the box that appears, select the type of image you want. jpg is usually best for photos, gif for line art. If you are using jpg, set the quality to high.
  8. Click Save. Remember to note where you've saved the file. Also, rename the file to eliminate spaces or dashes; use underscores instead if needed.

Method 2

  1. Open the image you want to use.
  2. Select the Rectangular Marquee tool (M)
  3. Change the tool's properties (at the top). Make the style Fixed Ratio, width 200, height 300 (in this example)
  4. Put your mouse at the top left corner of the area you want to use. Click the left mouse button down. Drag until the area you want has been selected.
  5. Go to the Image menu and select Crop.
  6. Select Image Size (Alt-Ctrl-I or from the Image menu).
  7. Make the width 200 px. The height will change automatically if Constrain Proportions is checked.
  8. Click OK. If the image looks too small, click the Zoom tool (Z) and click the Actual Pixels button at the top of the screen, or right-click and select Actual Pixels.
  9. Select Save for Web (Alt-Shift-Ctrl-S). If that's too many fingers, go to the File menu and select Save for Web from there!
  10. In the box that appears, select the type of image you want. jpg is usually best for photos, gif for line art. If you are using jpg, set the quality to high.
  11. Click Save. Remember to note where you've saved the file. Also, rename the file to eliminate spaces or dashes; use underscores instead if needed.

See Knowledge Base Article 168 for instructions on inserting images into your site.