How To Change The Default Product Image Size In Magento 2

In this post, I will guide you on How To Change The Default Product Image Size In Magento 2. Resize product images to fit your store’s design.

The image of the product is a very important part of the storefront. Be part of a customer’s buying decision and drive sales.

Make the product image match the theme of the store by resizing the product image. Follow these steps:

Steps To Change Default Product Image Size In Magento 2

1. You go to view.xml configuration file.

<theme-directory>/etc/view.xml

2. After, You switch to image properties where display image properties are configured.

<images module="Magento_Catalog">

3. You need mind your image id and image type you want to change and edit properties follow below code:

<images module="Magento_Catalog">
 
    <image id="unique_image_id" type="image_type">
        <width>750</width>
        <height>445</height>
    </image>
 
</images>

Explain image attributes:

id / string: An individual parameter that is used in .phtml templates. It can be used to specify image properties for a specific location or page.

type / string: It defines the image to be displayed. The following are list of the attributes:

• image – corresponds to the Base Image role in the Magento Admin.
• small_image – corresponds to the Small Image role in the Magento Admin.
• swatch_image – corresponds to the Swatch Image role in the Magento Admin.
• swatch_thumb – corresponds to the Swatch Image role in the Magento Admin.
• thumbnail – corresponds to the Thumbnail Image role in the Magento Admin.

Explain image parameters:

• width / integer: Image width in pixels.
• height / integer: Image height in pixels.
• constrain / boolean: If set to true, images that are smaller than required by the configuration, are not enlarged.
• aspect_ratio / boolean: If set to true, proportions of images are not changed even if required by the configuration.
• frame / boolean: If set to true, images are not cropped.
• transparency / boolean: If set to true, the transparent background of images is saved. If is set to false, images have the white background (by default). You can set the color for the background using the background parameter.
• background / string: The color for the images background. Not applied to images with transparency, if transparency is set to true. Format: “[, ,]”, e.g.: “[255, 255, 255]”.

This is the end of the How To Change The Default Product Image Size In Magento 2.

Follow us for the more helpful posts!

We hope this is a useful post for you How To Create A New Root Category In Magento 2.

Thank you for reading!