Sizing your images for ultimate performance online

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.

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.

Step 3 - Upload Image:

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

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.