Editing product images to maintain proportions

Due to the large number of products your website can potentially host and display, it is important that you correctly manage product images.  Do note that the rich text editor does not automatically resize the images or fix their orientation, hence, it is crucial that you make sure that your images have identical aspect ratios or proportions before uploading them.  

Generally, thumbnails or category images on Zeald websites often have fixed width.  Which means, if different proportioned images are uploaded, the thumbnail may look higher, lower, stretched, or pixelated.

Image sizes

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. 

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, you can either crop or add white spaces on the sides of the images.  

 

HOW TO CROP AN IMAGE:

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 a 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. Upload the image into the image manager
2. Click on "Crop,resize or edit this image"
3. Click on "Crop" up the top
4. Either click on the width and height fields at the top of that box and enter in the pixel size and then click "Apply"
5. Or manually drag the size over the image and then "Apply"
6. Click Save (sometimes you need to click Save a second time)

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

ADDING WHITE SPACES ON THE IMAGES

Another way to ensure that your images have the same proportions or aspect ratio is to add white spaces on the sides prior to uploading them.    

By adding white spaces on the product or category images you are uploading, you are retaining their quality while ensuring that they all have the same proportions (as opposed to resizing the images on the rich text editor).

Here's an example:



Test Rubber Duck 1, 2 and 3 have different aspect ratios, hence, their appearance on the product category page.  To fix this, you will need to add white spaces where appropriate to make them centered and proportioned.  You can use Adobe Photoshop, or any other image editing tool.  


White spaces are added on the sides, above and below the product image of Test Rubber Ducky 1.  



White spaces are above and below the product image of Test Rubber Ducky 2.  



Test Rubber Ducky 3 was cropped, and spaces were added to all sides to keep the image centered and proportioned.  



As the white spaces have turned the differently proportioned images into equally proportioned thumbnail squares, they no longer appear higher, lower, stretched, or moved to the side.