How to Change the Default Product Image Size in Magento 2

Product images are the vital source for driving sales in E-commerce. In Magento 2, store owners need to combine them with different themes and it’s difficult to make product images look good on all of them. As a part of this process, the admin may require to change the default product image size in Magento 2 store.

The product images, thumbnail images, etc can be resized for better storefront and design, easy navigation, etc. Learn about the various image attributes and also the method to resize product image in Magento 2.

Magento 2 Image Attributes:

• id (attribute)/ string (type): A unique parameter used in .phtml templates. It can be used to specify image properties for a specific location or page.
• type (attribute)/ string (type): It defines the image to be displayed. It is identified by special id. The following are the values of the attributes:
  • image – corresponds to the Base Image role in the Magento 2 admin
  • small_image – corresponds to the Small Image role in the Magento 2 admin
  • swatch_image – corresponds to the Swatch Image role in the Magento 2 admin
  • swatch_thumb – corresponds to the Swatch Image role in the Magento 2 admin
  • thumbnail – corresponds to the Thumbnail Image role in the Magento 2 admin

List of Image Elements (Parameters):

• Width – Allows changing the image width in pixels. (Type: Integer, Default value: None)
• Height – Allows changing the image height in pixels. (Type: Integer, Default value: None)
• Constrain – When set to true, the images that are smaller than specified value will be not enlarged. (Type: Boolean, Default value: True)
• Aspect_Ratio – When set to true, the proportional relationship between the width and height stay consistent, even if it’s required by the configuration. (Type: Boolean, Default value: True)
• Frame – When set to true, images are not cropped. This property is applied only when the aspect_ration is set to true. (Type: Boolean, Default value: True)
• Transparency – Its default true value saves the transparent background image, otherwise the white background is saved. (Type: Boolean, Default value: True)
• Background – Used to remove the white image frame when resizing photos and adjust background color to your theme. (Type: string, Default value: [255, 255, 255])

Method to Change the Default Product Image Size in Magento 2:

• To find the view.xml configuration file use the next command:
  
  <theme_dir>/etc/view.xml;

  1	<theme_dir>/etc/view.xml;

• Then switch to the <images module=”Magento_Catalog”> where all the image properties are configured. For this, use the following command:
  
  <images module="Magento_Catalog"> ... <images/>;

  1 2 3

  <images module="Magento_Catalog"> ... <images/>;

• You need to know an image id and type attributes to change or edit its properties:
  
  <images module="Magento_Catalog">  <image id="unique_image_id" type="image_type"> ...  </image> <images/>

  1 2 3 4 5 6 7

  <images module="Magento_Catalog">    <image id="unique_image_id" type="image_type"> ...    </image>   <images/>

   

You may refer Images properties for a theme

Please feel free to share your doubts in the Comments section below. Likewise you can also resize specific product image in Magento 2 using custom console command.
I’d be happy to solve them and might be useful to other readers too 🙂

Also, don’t forget to rate the post with 5 stars!

Thank You