We updated “How to Resize Images for a Website” with new images and improved the explanations.

For many small business owners, resizing website photos can be daunting. There are lots, and lots of places to find images. Some are free and some you need to pay for, but many small business owners struggle once they have the photos. They want to know how to resize website photos for their website without buying expensive software or hiring a designer.

“I’m not a designer, I don’t have or know Photoshop.”

No problem.

But you may ask, “Why? Why do I need images at all?”

Images are a contributing factor for page rank. They make the content more appealing and with careful use of alt tags, images provide additional information to the search bots that will help your page or post rank.

Back to the subject at hand, “How to resize images for a website?”

Canva will get you there.

Canva is a user-friendly, inexpensive tool that any small business owner can use to resize website photos.

Resizing the images in Canva

There are two methods available for resizing images using Canva. The first method is a manual one and the second method uses Canva’s single-click resizing tool.

(Method one) Manual Photo Resize

A more intuitive and obvious way of resizing the images is by doing it manually. Select a corner and drag to the required size. If you select the shift key while dragging, the image will maintain its aspect ratio. It is a suitable method if you do not need to conform to certain aspect ratios or specific formats. You may choose a photo in Canva by clicking on the “Photos” tab and selecting a photo by double-clicking it. After selecting it, it will automatically appear on the layout page or drag the image to the layout page. If you click on this image, you will find markers to resize it manually.

If you are looking to resize the image horizontally or vertically, you can do this from the sides. If you are looking to resize for both dimensions, you may do it by dragging the image from one of the corners. You can find a size indicator close to the cursor when you do that.

Sometimes you may have a specific size in mind. It is possible to type in the preferred size into the size fields of Canva. The first available field is for the width of the image and the second is used for height.

All you need to do is click “Create Design” on the top right side of Canva’s Home page. You will see a ‘plus’ sign below that says “Custom Size.” Once you click it, you will have the option to input your preferred image dimensions. There’s also a dropdown for the measurement units, namely – Pixels, Inches, Millimeters, and Centimeters.

Although the method is straightforward enough, it’s a good way to resize images for a website, it might turn out to be a little inconvenient. If you will upgrade to Canva Pro, there are better alternatives available.

(Method 2) Single-click Resize

As can be expected, the best features available with the software are saved for the paying customers. Canva Pro offers several useful tools and one of them is the single-click or one-click image resize. At the topmost menu bar, you can find a Resize button that lies between the buttons File and Undo. When you click on the button, you will find a dropdown menu that can resize the photo within a second!

So, if you are looking to make a poster from an image, the first thing to do is, right-click on the photo and then choose “Set as background.” At this point, you can type in any customized size and the image can be resized to it.

How to Resize Images for a Website Photos like a Pro – 10 Simple Steps

This how-to guide to resizing photos uses the free version of Canva. It’s a good resource. Even the free version lets you accomplish more than we’ve described here. You’ll have even more capabilities if you upgrade to Canva Pro.

WooCommerce image sizes
  1. To resize website photos, start by determining the sizes needed. If the theme suggests multiple sizes, then use the largest one. For example, WooCommerce recommends a square image in three sizes. Provide the largest, 600px x 600px, and WordPress will resize it to create the smaller sizes that WooCommerce needs. You can also consider going to two times the largest size. This will give WordPress images to serve when a device has a retina display.
  2. To create the 600px X 600px image, sign up for Canva – this is a user friendly design tool. It’s so easy even I can use it.
  3. Start by selecting “Create a design” and use the dimensions you identified in step one, 600px x 600px.
Canva Home page screenshot.
  1. Select Custom Size from the choices presented in the dropdown. You can enter a custom size as described in the next section or select one of the prebuilt designs provided by Canva. The first dimension is the width and the second is the height.
Create a custom size using Canva
  1. Enter the size you want to use.
Set the dimensions for the image resize
  1. Use “Uploads” in the left sidebar to upload the image you want to use or select an image from the Canva photo library. Double-click the image you’ve selected or just uploaded to place it into the design frame you created earlier. You can also click and drag the image into your design. Ideally, the image you plan to work with is larger than the final size and has a similar aspect ratio. Making the image smaller is OK but making it larger will decrease the quality. You could make a photo bigger to fit into the design frame if it was a high-resolution image to start with. But if you make a low to standard resolution image a lot larger, it will impact quality.
Upload an image to be resized - step one
Canva Upload step one.
Upload an image to be resized - step two
Canva Upload step two.
  1. Move it around so that the image is composed as you wish within the design template—you can change the background color to match the image background if there is a white bar, which can happen when the photo’s aspect ratio isn’t the same as the template you created. Select Background from the choices in the left sidebar navigation.
  2. This is optional but there are times when adding some text to the image is a good idea. For example, this works well on image-oriented social media channels like Pinterest or Instagram. Select Text from the left sidebar to add text as an overlay. You can adjust the shape of the text box, the font and its color, and size.
An example of text overlaid on an image
  1. When you are happy with the layout, select the Download button. You will find it in the upper right corner of the screen. Choose “JPG” from the presented options. Jpegs aren’t as heavy as PNG files. If your design has a transparent background you will need to select the PNG file format.
  2. Upload this image into your Media Library and use it as desired.

Ten steps may seem like a lot of steps, we provided many details, but with some practice, it’s quite easy to resize images for your website. It will go quickly once you are in the flow.

Alternatives for Canva

In case you are looking for some alternatives for Canva, here are a couple of them to assist you in creating photo designs that will stand out. You can decide the best option for your requirements.

Stencil

Stencil - a Canva alternative

Stencil is one of the simple graphic design tools, and the main idea for its use is creating background images and place text over them. The editing features offered by the software are simple to use. The Stencil editor has a section that provides quotes and this is a good addition. All you need to do is select a quote and it gets immediately added to the photo you are choosing as the background. Stencil can be used by people looking to create content quickly without having to use more tools.

Stencil is an especially effective tool for resizing images for a WordPress website. Using the Stencil plugin for WordPress is a fast way to find and resize the photos of your pages or posts.

Visme

Visme - a Canva Alternative

Visme is a graphic design tool that provides a lot more features than standard tools. It has a drag-and-drop editor that is simple to use, intuitive, and comes with several features. There is a built-in photo editor available in Visme that allows you to enhance the images from within your browser. There is no need to use a separate tool for adding overlays and filters, cropping, resizing, or rotating the images. The various photo-editing tools available allow royalty-free stock photos, drag-and-drop, or you can even upload your photos. It is possible to add text at the top and add imaginative cutout frames to the photos.

How to Resize Photos for a Website Like a Pro – Summary

There are several other features available in Canva Pro such as automatic resize based on the intended use. You can also select multiple sizes and develop several copies of the images with different sizes. We highly recommend giving the Canva Pro a shot. It is relatively inexpensive and one of the best available web-based image editors.

Stencil is another excellent alternative. After installing the Stencil WordPress plugin you can resize images for your website without leaving the CMS dashboard.

We have no relationship with Canva. We think it’s a cool, inexpensive product that allows non-designers manage images and create visual assets for WordPress without climbing the Photoshop learning curve.

This post appeared originally on Red8 Interactive’s site: MANAGING WORDPRESS IMAGE SIZE WITH CANVA. Red8 is the team behind Inn8ly.

Author: James Hipkin

Author: James Hipkin

James brings over 40 years of professional sales, marketing, and marketing consultation services to the table. Serving global brands along with small businesses, Hipkin leads a highly-skilled team of full-time developers, producers, content specialists, and project managers who are committed to your success.
 
Click here to book a meeting with James
Click here to contact James Hipkin via email