How To Create Consistantly Sized Images For Your Website

The Importance Of Consistantly Sized Images

For the purpose of this article I"m going to assume we are talking about products for your online store. The information here can be applied to any page, gallery or blog post and while those images may not be the same size and ratio as your store images, this will enable you to create templates for any and all images you will consistantly use.

Images that are consistant in size and background ensure the best possible experience for your website visitors. Particularly for an online store, images should be the same size, rotation and ratio. This creates the most professional appearance and will give your visitors the best experience, which can lead to increased sales.

How To Achieve This

For the purpose of this article we are assuming that our image manipulation experience is at a beginer level. We are going to use Canva for this article primarily as it is cloud based so all your files will be available to you from anywhere but also as its very simple to use and there is a high level of Canva tutorials out there should you get stuck.

Starting With Canva

Naviagate to www.canva.com and select the sign up option which suits you best. We are choosing personal, simply because its a great place to start and will give you the option of signing up with email, Facebook or Google.

Enter your signup info and complete the process.

Once you have completed your sign up Canva will take you to your profile page ready to start designing.

Your First Design

Canva has a lot of pre-designed templates suitable for Facebook, Instagram, Pinterest, Banners, Invitations, Publications and many more. For the purpose of this article we are going to assume you are creating a template for your online products.

Considerations:

• Square images will have the most flexibility for layout and also look the best, however as long as your images are the same size and layout (IE either all landscape or all portrait) that will be OK.
• If your shop images aren't currently consistantly sized (as in you have a bunch of images taken at different times), you  will need to find out the smallest file you have and work backwards from there. IF the smallest image you have is smaller than 640px on the longest side, we do recommend taking new product photos. An image can be scaled down without visible loss but can't be scaled up. So an image that is 400px on the longest side won't display well if you scale it to fit your 640px size.
• This will work best if you have all your shop product images in one folder and named accordingly (IE LadiesT-Black-TeamLogo.jpg)
• Create another folder here and name it Web Images or Web Optimised or something similar. We are going to save your finished images in this new folder so you have all your consistant photos in one place.

To find your smallest image (assuming this is PC)

• open Windows Explorer (Windows button + e) and navigate to your shop image folder
• click in the top right hand search bar and type "size:" and a drop down list will appear.
• Select the smallest file size and see what files show. If none, click in the search bar again and change it to the next biggest file size. While this is a MB file size search (and not by physical pixel size) typically the smaller mb a file is, the smaller it is in actual size.

Once you have a few images showing if you move your mouse over an image and hover, you will be able to see the image details which will include the actual pixel size. Do that for all images looking for the smallest file size.

Now that you have that size, create your Canva Design based around these dimensions. IE if your smallest product size is landscape and 640*480 create your Canva design for those dimensions. If all your images are a good size we would recommend creating your image with 800px as the longest side.For example if your image is landscape make your width 800px. If you image is square, make both sides 800px and if your image is portrait made the height 800px.

Creating Your File In Canva

To create a custom template you will need to click the Custom Dimensions button at the top right of your screen.

Enter the dimensions you would like to create (width x height).

A design will open in a new tab. You will see on the top right your dimainesions followed by "- Untitled". If you click in here you can name your design now. Be sure to name it something that is unique to what you are doing here. IE: "Website Product Image Template". Once you have named it your dimensions will be replaced by the file name.

Adding Your Images To The File:

The left hand side of your screen has a list of menu items and depending on what item you have clicked on, options available are also shown by default. If you would like to clear your workspace you can click the small < arrow on the options box which will fold that back in so you only  have the menu. To restore it click anywhere under the last menu item and it will pop out again.

Choose the Uploads menu item and then click the blue Upload an image button. You are able to upload multiple images and this is why we suggested we add all your images to the one folder. If they are large file sizes we would recommend uploading maybe a max of 10 at a time. You can select images in order by holding down your shift and clicking the next image, or you can select individual images by holding down CTRL and clicking on the images you would like to use. We can work on these images, save them and then move on to the next lot.

Once you have your images uploaded you can see all your images sitting in the uploads section.

Now that you  have your images uploaded, you can simply drag your image on to the canvas to use that image. If the image is too small it will appear on the canvas as per the image below.