Most cart layouts are a fixed width, to fit into your email template and maximize support and visibility in as many email clients as possible. Therefore, you may need to make sure your images are precisely sized to avoid ruining your layout.

One way to do this is by applying a fixed height and width to the img tag, for example:

This is compatible with all email clients, but it may stretch the image if your images aren't all the same ratio. Iif you have both tall and wide images, they all end up being made to fit the same size.

If you can fix one dimension, such as width, then you can leave the other empty and it resizes itself appropriately, for example:

This should keep the appropriate proportions.

Another option is to use CSS styles to set maximum dimensions, for example:

These only affect an image if they are larger than the set dimension, plus, if you only use one of them, the aspect ratio is maintained. The issue is that not all email clients support these attributes, most notably Microsoft's Outlook client.

Lastly, there is the option to use a service to resize an image for you. Typically these offer the ability to supply a URL and height or width (or both) and then dynamically resize the image at the time of display.

We don't recommend any specific service, but a few examples are:

You may already be using a CDN with the capability on your website. Alternatively, you could create your own script to do this.

The images we capture can vary in size, and we may not always be able to capture the same sizes for all products before someone carts them. We normally attempt to capture both a full size product image from the product page and a thumbnail from the cart or listing pages. We may not always have both, though. By default, if you use the product.img merge and we don't have a full size image, we fall back to the thumbnail.

If you would prefer to give preference to the thumbnail, you can use the following code to display it, but fall back to the full sized image if we have not yet captured one: