Table of Contents & Menu
On this page

No subsections

Navigation

Customize the Product Image Sizes

Product image sizes are configured in your theme's etc/view.xml file.

If your theme lacks this file, copy it from vendor/hyva-themes/magento2-default-theme/etc/view.xml.

This file defines image types with their width and height, specifically within the <media><images module="Magento_Catalog"> section.

For example, to adjust product image sizes on a listing page, 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>

Adjust the <width> and <height> values as needed. These dimensions are used for image generation and set as width and height HTML attributes.

For more details on etc/view.xml configuration, refer to these resources: