In magento 1.x.x, we could change default thumbnail images in admin :

System > Configuration > Catalog

But in magento 2.0, how can I change theses value I can not seem to find any configs to allow this? The problem is that my product images are displaying with large white stripes and I would like to prevent this.

3 Answers 3


Magento uses the file called view.xml which is maintained at the theme level of the application.

So for example, if you are using the default theme luma you should find the view.xml under vendor/magento/theme-frontend-luma/etc/view.xml

In this file, you would see <images/> node inside the <media> node.

<view xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/view.xsd">
        <images module="Magento_Catalog">
            <image id="bundled_product_customization_page" type="thumbnail">
            <image id="cart_cross_sell_products" type="thumbnail">
            <image id="cart_page_product_thumbnail" type="small_image">

The dimension of the images is maintained here under the <image/> node.

The id attribute value of the <image/> node is referenced in the codebase.

For example:

<image id="related_products_list" type="small_image">

The id value is used in the view file vendor/magento/module-catalog/view/frontend/templates/product/list/items.phtml

case 'related':
    /** @var \Magento\Catalog\Block\Product\ProductList\Related $block */
    if ($exist = $block->getItems()->getSize()) {
        $type = 'related';
        $class = $type;

        $image = 'related_products_list';
        $title = __('Related Products');
        $items = $block->getItems();
        $limit = 0;
        $shuffle = 0;
        $canItemsAddToCart = $block->canItemsAddToCart();

        $showWishlist = true;
        $showCompare = true;
        $showCart = false;
        $templateType = null;
        $description = false;

Here the $image refers to the value of the image size here:

<?php echo $block->getImage($_item, $image)->toHtml(); ?>

In case the theme does not have a view.xml, then it might be using a fallback theme (parent theme) which has the view.xml file.

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
    <title>Magento Luma</title>

Here Magento/blank is the parent theme.

In case of changing/overwriting the values of the view.xml file you need to completely copy the entire view.xml file to your custom theme and change the values.

view.xml does not have a node value fallback system, means if a value of a node is not present in you custom theme's view.xml it will not fallback to its parent theme's view.xml value, that's why entire file needs to be copied.

Once the values changes have been done, you will have to run

php bin/magento catalog:images:resize

Update: As of Magento 2.4 this command supports synchronous (default) and asynchronous modes. Asynchronous means that images will not be processed immediately on command execution. Using the Magento queue functionality, these images will be scheduled for resizing and then processed in the background. To enable asynchronous mode, use the -a or --async option.

php bin/magento catalog:images:resize -a

To speed up the job while in asynchronous mode, you may manually run several instances of a consumer with the command in each instance:

php bin/magento queue:consumer:start media.storage.catalog.image.resize
  • Thanks. I'd have never figured where this was being generated. +1
    – andy jones
    Commented Aug 9, 2017 at 13:57
  • 7
    Got to love how over engineered this is and yet lacking in documentation. You'd have to look into code or dig around db schema just to figure out these names. Commented Jan 17, 2018 at 23:15
  • Thank you for the answer, but I tired and found the Last setup run php bin/magento catalog:images:resize doesn't need(it costs a lot of time), we just need clear the cache and then it will work.
    – Key Shang
    Commented Apr 26, 2018 at 4:21
  • @KeyShang you are correct, the resized images get generated in runtime if not present already. It is however recommended you run this command as it helps with performance on production Commented Apr 29, 2018 at 16:13
  • @MiguelFelipeGuillenCalo I know right!! Also the default view.xml causes 20+ versions of each image...! Some basically identical! Goodness me I hate Magento so much...
    – 00-BBB
    Commented Jan 18, 2021 at 12:43

Magento product uses the file view.xml for image size dimensions at path vendor/magento/theme-frontend-luma/etc/view.xml

Here you will find node inside the node.

Copy the file view.xml and put it in your theme path and make the changes, say app/design/frontend/MyThemePackage/MyTheme/etc/view.xml

<view xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/view.xsd">
    <images module="Magento_Catalog">
        <image id="category_page_list" type="small_image">

Clear the cache and load the category list page. Your changes will be reflected.

  • It is note worthy that extend path "vendor/magento/theme-frontend-luma/etc/view.xml" can also be "vendor/magento/theme-frontend-blank/etc/view.xml" depending on which default theme package you use.
    – Dynomite
    Commented Aug 4, 2017 at 13:42
  • how to change the thumbnail image size in product detail page? Commented Nov 26, 2018 at 6:46

You can also specify image dimensions directly in template file like this:

* @var $block \Magento\Catalog\Block\Product\Widget\NewWidget
$image = 'new_products_content_widget_grid';
$items = $block->getProductCollection()->getItems();
$width = 100;
$height = 100;
foreach ($items as $_item) {
    $resizedUrl = $block->resizeImage($_item, $image , $width, $height)->getUrl();
    echo '<img src="'.$resizedUrl .'" alt="alt text" />';

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.