How to standardize aspect ratios (rectangular shapes)
Selecting an aspect ratio
The aspect ratio is used to determine the relative horizontal and vertical sizes of images. For example, if an image has an aspect ratio of 3:1, this means the width of the graphic is three times of the height of the image.
The first step to standardizing the aspect ratios of your images is to choose an aspect ratio, such as 2:3 or 3:4. If your product images have different aspect ratios, one option is to select a product image with your preferred shape and to download it. To view the image's dimensions and aspect ratio, right click on the image and select Get Info (in Mac OS) or Properties (in Windows).
Changing the aspect ratio of your images
There are two different way to edit an image to achieve a desired aspect ratio:
- Expanding the image (Resize)
- Cropping the image (Crop)
Only by using one of these two methods is it possible to change the aspect ratio of an image. Each approach to resizing has advantages and disadvantages, and the best approach will usually depend on what kind of product images you have.
Bulk editing the aspect ratio of your images is especially useful when standardizing the size and appearance of thumbnails, such as those found on collection pages. In addition to a more pleasing aesthetic, standardizing thumbnails has the benefit of ensuring the proper alignment of product titles and prices on a collection page. To see an example of how canvas resize can improve alignment, please click here.
Please note that thumbnails are typically much smaller than product images and, therefore, changing the resolution/dimensions of a product image while maintaining its aspect ratio will not have any effect on the thumbnail.
Expanding the image (Resize)
Canvas resize expands the sides of an image with a solid color to achieve the desired aspect ratio. This is often the best solution for images with a background that is either transparent or a solid color - typically white. Please note that canvas resize will not expand the content of the image - rather, it will expand the margins around the content.
Cropping the image (Crop)
Crop involves trimming the sides of an image in order to reach the desired aspect ratio. This approach may not be suitable for all image types, since removing content can risk cutting off vital elements. Cropping is usually the best option when the targeted images do not have white or transparent backgrounds, have large margins and/or do not contain content that is absolutely critical near the edges.
Additional notes
Usually only the first image associated with a product is used to generate a thumbnail. Therefore we recommend using the variant filter Image Number X of a Product to only target the first image associated with the filtered products. This will save you many editing credits, and will avoid having to edit or distort images unnecessarily.