I have 300x300 image size for "Small" images, which shown in product list and grid views. The issue is that my goods contain text and it barely visible on optimized 300x300 pictures. Changing uploaded images quality from 80 to 100 didn't help. And I'm not ready to WebP.

So I want to try to use 600x600px pictures, but leave product image size 300x300, so bigger picture will be fitted into smaller div and scaled by browser. In this case image quality became much better then with original size (I verified it using Chrome DevTools).

But I can't find a way how to do it. Changing width and height in "view.xml" is also changes the layout block size to 600x600. So, what is the proper way to configure size only for "small" images (used in grid and list) without changing picture block size?

1 Answer 1


probably it's a css issue because the Luma theme scales correctly even if it fixes the size (passed via view.xml) to the container as you say.

It's difficult to say how fix it without your html/css, but you can try to

  1. add base responsive css image rules if missing
    img {
     max-width: 100%;
     height: auto;
  1. remove the size on the container overriding the file in


Copy the file in


and remove the data bind with css width

 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.

<if args="isAllowed()">
    <a if="imageExists($row())"
       attr="href: $row().url">
        <span class="product-image-container"
              data-bind="style: {width: getWidth($row()) + 'px'}">
            <span class="product-image-wrapper"
                  data-bind="style: {'padding-bottom': getHeight($row())/getWidth($row()) * 100 + '%'}">
                <img class="product-image-photo"
                     data-bind="attr: {src: getImageUrl($row()),
                                       alt: getLabel($row()), title: getLabel($row())}" />

Remove data-bind="style: {width: getWidth($row()) + 'px'}"

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.