How to resize images using Canva

Share:

In this tutorial we're taking a look at using Canva Photo Editor to resize images for upload to your website. Canva Photo Editor is an online application which you can use to quickly resize and/or edit your photos. This is great if you don't have an image editing package such as Photoshop installed on your PC or Mac. As you'll see this is a very simple process which you can easily follow using the steps below.

Resizing photos for web graphics is an important skill to have and can save a lot of headaches. Many of us will be using stock imagery or photos we have taken using a digital camera or smart phone. The dimensions of these images is often much larger than we need, many modern smartphones take photos that can be upwards of 8 megapixels. Not only are these too large dimensionally, they also have large file sizes that will increase page load speeds. Resizing your image optimizes it for the web and means your customers will not be kept waiting.

Step 1 - Preparation:

Have the image(s) you want to edit saved to a location on your hard drive or desktop. Open Canva in whichever browser you prefer to use. In this tutorial I'll be resizing an image for use as a blog article banner for the 72DPI website. The dimensions for this image are 700 x 300px. This is shown as a note in the CMS.

The image size we're working to is 700x300px

Step 2 - Canva Photo Editor:

Have the image(s) you want to edit saved to a location on your hard drive or desktop. Open Canva in whichever browser you prefer to use.

Open Canva in your favourite web browser

Step 3 - Upload Image:

Click on the green upload button and locate the photo you want to use.

Choose the image you want to resize

Step 4 - Resize:

Canva will upload your image and the first option available to you is to apply a style filter to your graphic. As this tutorial is focussed on re-sizing we'll skip straight into this. Choose Resize from the icon menu at the top. As the width is the larger dimension in this case we'll use that value to resize our image and then we'll crop the height later. It's important to keep lock aspect ratio checked here.

A smaller, scaled version of the image is shown in the center of the original here to illustrate the sizing changes we're making. Clicking Apply will commit this change.

Here we resize our image to 700px wide

Our image has now been re-sized to match our target image width of 700px but as you'll see the height is incorrect. The next step will be to crop the image vertically to get our target height of 300px.

Our image is the right width, now we need to crop

Step 6 - Crop:

Choose Crop from the menu and change the height value to 300px. This changes the ratio of crop display, in this case to more of a panoramic aspect. You can now click and drag this display to reposition your graphic. This is a matter of preference but you're just looking to frame your image nicely to create a composition you are happy with.

Set the crop height to 300px and reposition the image for a good composition

Step 7 - Upload Resized Image:

Once you apply the crop selection you will have an end result graphic which is 700x300px. You can now download this graphic, saving it in a location you can easily find for upload to your CMS. In the screen shot below the re-sized image has been uploaded to the CMS ready for publishing.

Our finished image resized and uploaded to the CMS

That's it!

Canva is one online editing solution, there are a number of others that carry out similar functions. This is one solution we recommend to clients as it's quick and easy to use and the user interface is really nice. The steps we outlined above apply to image resizing in most image editing applications, likewise Canva can be used to re-size images for any number of scenarios such as images for social media profiles pictures or cover graphics etc.