Aspect ratio is a fancy term for the width-to-height ratio of an image. For example, an image that is 1600 x 1200 (height x width) will have an aspect ratio of 1200/1600 or 0.75. Conversely, an image that is 1200 x 1600 (height x width) will have an aspect ratio of 1600/1200 or 1.33.
As discussed earlier, when you upload an image into Image Manager, the source image will be converted into one or more web-ready images for use by your site. It is important to realize that each variant image will be configured with a specification resolution. The figure below shows an example of a product image specification.
From this, we know the product’s basket image will be 50 x 44 (Height x Width). This means the aspect ratio for this image is 0.88. It’s important to note that all other variants of this product image (small, medium, large, thumb and extra large) all have exactly the same aspect ratio.
When obtaining/creating source images for upload into CommerceCM, there are three basic rules to follow:
1. The source image used for this product image should have an aspect ratio very close to the actual aspect ratio being used. 2. The source image should have dimensions larger than the largest dimension which will be used by any image variant.
An image with a different aspect ratio may be used, but Image Manager will adjust the size of the image such that the longest dimension of the source image is adjusted to match the longest dimension of the target image. The shorter dimension will be adjusted accordingly in order to preserve the aspect ratio of the source image. Image Manager will not stretch, skew or pad any images.
Aspect ratios are either less than 1.00 or greater than 1.00 – sometimes called portrait and landscape aspect ratios respectively. While it is important to use a source image with an aspect ratio that is very close to the target image’s aspect ratio, it is especially important to use a source image which has the same portrait/landscape value as the target image.