Skip to content

Customize the Product Image Sizes

Product image sizes are managed per theme in the etc/view.xml configuration file.

If your theme doesn’t yet have a etc/view.xml file, you can copy one from vendor/hyva-themes/magento2-default-theme/etc/view.xml to your theme.

Inside this file, you'll find a list of image types along with their corresponding width and height values.

Each image size type is defined within the <media><images module="Magento_Catalog"> section.

For example, to change the size of the product images on the product listing page, you would modify the following values:

<view xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/view.xsd">
    <media>
        <images module="Magento_Catalog">
            <image id="category_page_grid" type="small_image">
                <width>360</width>
                <height>360</height>
            </image>
            <image id="category_page_list" type="small_image">
                <width>360</width>
                <height>360</height>
            </image>
            <!-- Other sizes -->
        </images>
    </media>
    <!-- Other options -->
</view>

You can adjust these values to any other desired dimensions.

These values are used to generate images in the specified size and are also applied to the width and height HTML attributes.

For more information about the etc/view.xml configuration, refer to the following resources: