Email me when new posts are made to this blog

The importance of proportions in your images

Written by on October 2nd, 2013.      0 comments

When prospective clients visit your website they want to see good quality images of your products or services. The aim is to keep them flicking through your website, so they are more inclined to buy from you. 

So when you are uploading images for your website, it is important that you take the time to make sure they are perfect. Part of this is ensuring that your proportions are the same. This is important because you want all your product images to display the same way, especially if they are in a line next to each other. Images that are different sizes all over your website, can be distracting to a prospective client who wants to compare products and services. You want to make sure clients are paying attention to the content and images, not getting annoyed by the varying image sizes for products. 

Due to the large number of products your website can potentially host and display, it is important that you correctly manage product images.

It is important that you keep the size of your product images consistent - i.e. that all your image's proportions are identical. The main reason for this, is that when your product images are displayed, both when viewing product categories, or a specific product, they display with a fixed width. This means that a long, skinny image will display much larger than a short, wide image even if they are of similar resolutions. 

pencil comparisson of image proportions

As can be seen above, the second image is displaying smaller, due to the proportions being different (height being low, when compared to the image's width), even though the images are the same resolution. (One is 500x100px, the other is 100x500px) This can be avoided by making sure all your product images have the same proportions as one another.

The easiest way to ensure your images are all of the same proportions, is to take them all on the same camera, and do not crop them before or after uploading them. 

If you do need to use images that are of different proportions, your best course of action is to crop these images to be the same proportion as your standard images.

Determining the desired proportions

  1. Find a product image that you are pleased with the way it is displaying.
  2. Open this image in the image manager by clicking on it in the product page of that product in the website manager and click edit.
  3. Then click Adjustments > Crop. Take a note of the height and the width of this image. Close the image editor without saving your changes.
How to get desired proportions in your images

The dimensions of this image are 330px x 250px. These values will give you the desired proportions of your product images.

Cropping images to your desired proportions

Once you have found your desired proportions, you can begin cropping your other product images to these same proportions. You can do this prior to importing them, using an image editing program, such as Photoshop, or free alternatives.

If your images have already been uploaded, you can perform these edits using the image editor built into our website manager. To do this, you can follow these steps:

  1. Open the product image that you wish to crop in the image editor.
  2. Click 'Advanced Editor' in the bottom right.
  3. Click on the Cropping Tool as shown. Take a note of the width of the image.
  4. Select 'Aspect ratio' from the 'Constraint' drop down menu circled above.
  5. Enter your desired proportions into the 'Width' and 'Height' fields (330 x 250, therefore Width=330, Height=250)
  6. You can now drag a cropping rectangle over your image, and choose what to crop out. Keep your cropped image as large as possible, as has been done above. 
  7. Click Save, then click Ok.
Crop your images for consistent product images

Now you're done! If you keep all of your product images at the same proportions, they will display uniformly across your site. 

Topics: Web Design Tips


logo netguide 2011logo netguide 2012logo netguide 20132014 footerlogo deloitte logo deloitte logo deloitte logo deloitte logo deloitte

About Zeald

Zeald was formed in 2001 by three young guys from the small New Zealand town of Mangawhai Heads. Now, Zeald is the largest website design and digital marketing agency in New Zealand and has recently made moves into Australia. This is the Zeald story …

read more

Connect With Us

Keep up to date with industry news, stay ahead of the competition with our helpful articles

Google Plus Facebook Youtube Twitter Linkedin

Contact Us

New Zealand
09 415 7575
1800 224 032

42 Tawa Dr, Albany, Auckland 0632