Cropping and Resizing Images

Images are an important part of any website as they visually enhance the viewing of a page making it more interesting that just plain text.

There may be times when you want to adjust an image before you upload it. For example you may want to crop or resize the photo.

Image of a panda - image in crop mode

Crop – this is when you leave out some of the image.  For example, in this picture of a panda. The picture could be cropped to show less of the background. The highlighted area shows the area that we could crop to which then gives the cropped image.

Resize – photos that are taken with digital cameras tend to be very large in size, both in terms of the width and the file size.  An image taken with  a digital camera may be over 2200 pixels wide, which is more than can fit on a computer screen.

When viewing an image on the web, photos do not need to be this large, so they should be reduced first. If you want to add images to your pages, or the rotator on the homepage, you may need to resize them before they are uploaded.

How to reduce and crop images

There are many applications that you can download, that will allow you to crop, resize and edit your photos, such as Photoshop or Pixelmator.

There are also a number of online options, which will allow you to adjust your images in your web browser without having to download any software to your computer.

This article will show how to crop and resize using a service called Canva, but there are other, similar options such as befunky.com and picmonkey.com which will allow you to perform the same tasks.

Using Canva

You access Canva in your web browser by going to photo-editor.canva.com, this will take you straight to their photo editor.

Image of introductory screen to Canva Software

To edit your image in Canva, you will need to upload it to the editor.  You can do this by clicking the ‘Upload’ button, which will take you to your computer hard drive so that you can locate the image you want to edit.  Alternatively, you can drag the image from your computer on to the browser window and it will upload automatically.

Once your image is uploaded you can use the options in the toolbar at the top of the window to make adjustments to your image.

Cropping

To crop your image, click ‘crop’ in the menu bar.

Image of screen capture from Canva showing panda bear

You will see the four, circular handles appear in each corner of your image, simply click and drag on one of the handles to select the area you would like to crop to.

Image of panda bear

Once you’ve moved the handles to the size you want, you will need to click the ‘Apply’ button, above the image, to confirm the changes.

Image of control panel

You will then see the cropped image on screen.

Image of panda in editing mode

If you change your mind, or don’t like the results, you can always click the ‘Reset’ button, which is next to the apply button, and your image will be restored to its original state.

Resizing

To resize the image, click on ‘Resize’ in the menu bar.

image of panda in editing mode

As with cropping, you will see the four, circular handles which can be dragged to resize the image.

image of panda in editing mode

Alternatively, if you know the size you want the image to be, you can type the dimensions in the text boxes that show the width and height.  We would recommend that you keep the ‘Lock aspect ratio’ checkbox ticked, as this will stop your image becoming distorted when you resize it.

Once you have the image to size you require, click the ‘Apply’ button to confirm the changes and, as with cropping, you can click the ‘Reset’ button if you’re not happy with the result.

Downloading your image

When you’ve finished cropping and resizing your image, you will need to click the ‘Download’ button to save the image on your computer.  In the pop up window, click ‘Download your photo by itself’ and Canva will automatically save the image to your ‘Downloads’ folder and will name it ‘canva-photo-editor’.  You will need to rename the file and move it out of the downloads folder to make it easier to find again in the future.