How to crop and resize images

When you add photos to your website, the original image may need to be cropped or resized to fit a specific area on your site. The Image Cropper allows you to easily crop or resize your images so that they look their best.

How to use the Image Cropper

Here are the steps (and tools) you'll need to crop your images in the Image Cropper.


Use the Crop Handles to set the photo's dimensions

Here's the first step to cropping your photo: Click and drag the Crop Handles to set the width and height of the image (illustrated below). As you drag the Crop Handles, the photo's width and height values (measured in pixels) will update in real time in the top right corner of the Image Cropper.

HINT: If you know the specific dimensions at which you want to crop the photo, just click inside the width or height value area, delete the current value, and type your desired dimensions.

Aspect Ratio Lock icon

Before cropping, you may want to click the Lock icon (located in the upper right corner of the cropper) to lock the image's Aspect Ratio as you crop.

  • LOCKED: When the Aspect Ratio Lock icon is toggled on/locked, the image's ratio of width vs. height will be locked whenever you drag the Crop Handles. (In most cases, it is best to make sure the Lock icon is on.)
  • UNLOCKED: When the Aspect Ratio Lock icon is toggled off/unlocked, the Crop Handles are free moving; you can change the dimensions of the photo without restriction.

Click and drag the photo to position it within the crop area

Next, click and drag the image itself to reposition it within the crop area (illustrated below). The unshaded portion of the photo will be visible on your website once you save the crop.


Use the slider to shrink or enlarge the photo

If necessary, drag the Resize Slider at the top of the Image Cropper to shrink or enlarge the portion of the image that will be visible (illustrated below).

Finally, click the green Save button at the bottom of the cropper to save your work.

Glossary of Image Cropper Tools

  • Reset Button - Click to undo all image cropping actions.
  • Resize Slider - Drag to resize (scale) the image.
  • Content Area Preview - Illustrates the entire content area in which the photo will appear. Use this to judge the photo's size in relation to the entire content area.
  • Crop Handles - Drag to crop photo.
  • Photo Dimensions - Calculates the size of the cropped photo (exact pixel dimensions).
  • Aspect Ratio Lock - Click lock icon to maintain the photo's original aspect ratio while cropping.

Still need help? Contact Us Contact Us