Magento 2.4: How to show scaled images in a product list or grid?

Question

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?

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;
    }

2. remove the size on the container overriding the file in

vendor/magento/module-catalog/view/base/web/template/product/list/columns/image_with_borders.html

Copy the file in

Your_Theme/Magento_Catalog/web/template/product/list/columns/image_with_borders.html

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())"
       class="product-item-photo"
       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())}" />
            </span>
        </span>
    </a>
</if>

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