All Collections
Integrations
Magento Open Source and Adobe Commerce
Other
Change image sizes in Magento Open Source and Adobe Commerce
Change image sizes in Magento Open Source and Adobe Commerce

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

Gareth Burroughes avatar
Written by Gareth Burroughes
Updated over a week ago

The Dotdigital for Adobe Commerce (previously Magento 2) connector 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

  1. Go to Store > Configuration > DOTDIGITAL > Configuration and find the heading Image Types.

  2. Expand the image type drop-down menu, and select the image IDs you want to use.

    Learn more about default image sizes for each image type in Default image sizes.

  3. Select Save Config.


Default image sizes

Default image types are used in Adobe Commerce. 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>  

Learn more about the properties of product images in Configure theme properties.

Did this answer your question?