Most cart layouts are designed with a fixed width to fit seamlessly into your email template, ensuring maximum support and visibility across various email clients. Therefore, you may need to ensure your images are precisely sized to avoid breaking your layout.

To ensure your images are precisely sized is by applying a fixed height and width to the img tag, for example:

This is compatible with all email clients, but may stretch the image if your images aren't all the same ratio. If 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 larger than the set dimension. If you only use one of them, the aspect ratio is maintained. However, not all email clients support these attributes, especially Microsoft Outlook.

You can also use a service to resize an image for you. Typically, these services offer 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 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: