Change image sizes in Magento 2

Learn to change product image sizes in Magento 2, so you can make your products look great on all devices.

Overview

The Magento 2 integration automatically assigns an image size to your product images. This image size affects how your products appear in email campaigns, on landing pages, on your website, and your email product recommendations. The default size might not be the best in appearance for your marketing campaigns or for your on-site recommendations. For example, you might want to use a larger image size for your abandoned cart email campaign, or maybe the base images in your product recommendation catalog are too big and they impact the performance of your website. If the default sizing isn’t what you want, you can change it.

Change the default image size

To change the default image size in Magento 2:

  1. Go to Store > Configuration > DOTDIGITAL > Configuration > Image Types.
  2. For the image type you want to change, expand the drop-down menu and select the image IDs you want to use.

    To learn more about default image sizes for each image type, check out Default image sizes.

  3. Select Save Config.
    image-type-magento-2.png

Default image sizes

Default image types are used in Magento 2. These defaults determine how images are shown, depending on the context:

Catalog Sync

  • Appears as the image you selected to have the smallimage role in the Images & Videos area of product edit page; this image is used without any resizing.

Abandoned Cart

  • Appears as the image you selected to have the thumbnail role in the Images & Videos area of product edit page; this image is used without any resizing.
  • Uses the Configurable Product Image setting to pick which image to use.

Abandoned Browse

  • product_small_image theme image.
  • The image role is defined by the `type` argument in the image definition.
  • Sized defined by your view.xml file.

Dynamic Content

  • External dynamic content for your Wishlist and Review defaults to category_page_grid.
  • All other product lists use product_small_image.
  • The image role is defined by the type argument in the image definition.
  • Sized based on your view.xml file.

If a product has no image and is assigned a correct role, a parent product image is used.

Required image ID attributes

In your view.xml file, you must define the type, width and height for each image ID:

<image id="product_small_image" type="small_image">
<width>135</width>
<height>135</height>
</image>

See also

Did you find this article helpful?

Can we help?

Thanks for using Engagement Cloud. If you need more help or support, then contact our support team.