Magento 2.3.2 Remove white background created by Image resize

Question

How can I remove the extra white background added to resized images from Magento? we have setup 700x700 image size for Product main image in view.xml. Image resize is working fine for the images higher than 700x700 but when the images are smaller than 700x700, it adds a white background and does not look like the resize image. Instead, it looks like it adds a white background as a canvas. How do I avoid this white canvas and have the smaller images resize to proper image size?

Thank You

Answer 1

In your theme's etc/view.xml you can set width, height, transparency, aspect_ratio and frame. Below is the example for the same.

<?xml version="1.0"?>
<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_list" type="small_image">
                <width>700</width>
                <height>700</height>
                <transparency>false</transparency>
                <aspect_ratio>false</aspect_ratio>
                <frame>false</frame>
                <constrain>flase</constrain>
            </image>
        </images>
    </media>
</view>

After doing the changes, please run the deployment commands.

Hope it helps!!!

Answer 2

Set transparency to false.
You can read more about how to configure the image properties in view.xml at http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/themes/theme-images.html

<transparency>false</transparency>

Answer 3

Change the product image settings in etc/view.xml to:

<var name="product_image_white_borders">0</var>