How to Change the Default Product Image Size in Magento 2

Howdy Magento Folks?,

How are things going? Welcome to the Magento Tutorial blog. Today I will help you in solving out How to Change the Default Product Image Size in Magento 2. Learn How to Set Magento 2 Configurable Product Price in our last published blog. Let’s Dive In.

Introduction:

Basically, Images play a vital role in the online store. When viewing the product description is after that so all the online Merchants should make sure about the images on the store are good and help the customer to come closer with the production. 

Magento 2 Image Attributes:

id / string: A individual parameter that is used in .phtml templates. It also specifies the properties.

type/string: The image is displayed and recognized by special id.

Below given the values of the attributes:

image – means the Base Image

small_image – means the Small Image 

swatch_image – means the Swatch Image 

swatch_thumb – means to the Swatch Image

thumbnail – means to the Thumbnail Image 

List of Image Elements (Parameters):

Width – Helpful in changing the image width in pixels. 

Height – For changing the image height in pixels this attribute is used. 

Constrain – If set true, then smaller images will not be enlarged.

Aspect_Ratio – If set true the proportional relationship is consistent for width and height.

Frame – If set true then the images will not be cropped.

Transparency – It is specified as the default value of the Transparent background image.

Background – For removing the white image frame during the resize of photos

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

Step 1: Run the below command for getting view.xml configuration file

GO to <theme_dir>/etc/view.xml:

Step 2: Now after that switch to image properties configuration <images module=” Magento_Catalog”> for viewing the image properties. Run Below Command.

<images module="Magento_Catalog">

Step 3: Get the information of the image id and type for changing or editing the properties. Run Below Code.

<images module="Magento_Catalog">

            <image id="image_id" type="image_type">
                <width>240</width>
                <height>300</height>
            </image>
</images>

That’s it

Over to You

Hopefully, all are implementing the above solution on your store but if any difficulties contact our Support Team. Do share with your Developer friends and comment your reviews in the comment section below.

Happy Coding.

Subscribe to Notifications