Website Images have white background

[rutulritz]

Hi,

We enabled breeze responsive images on the website from Admin panel. Now all the images are getting resized by added background on it. Can you please guide me to remove this background and show the default image with responsive too.

You can cehck here: https://eeupgrade.colehaan.co.id/zerogrand-overtake-golf-shoe-2010015-w25355.html

Image Url : https://www.colehaan.co.id/media/catalog/product/w/2/w25355_a.jpg?optimize=high&bg-color=255,255,255&fit=bounds&height=1216&width=1216&canvas=1216:1216

Thanks

[vovayatsyuk]

The background is added by Magento resizer when the source image is smaller than the desired size, or the aspect ratio for a resized image doesn't match the source image.

Here is a fixed aspect ratio for your image: https://www.colehaan.co.id/media/catalog/product/w/2/w25355_a.jpg?optimize=high&bg-color=255,255,255&fit=bounds&height=1216&width=1082&canvas=1082:1216

[rutulritz]

Ok, SO I calculated the ratio for my images based on above image you shared :

so suppose I am using below to resize :

<media>
        <images module="Magento_Catalog">
            <image id="category_page_grid" type="small_image">
                <width>325</width>
                <height>365</height>
            </image>
        </images>
</media>

ON PLP images showing whitespace around : https://colehaan.co.id/women/collection/cloudfeel.html

All image is generating like below URLS :

<img class="product-image-photo" srcset="https://www.colehaan.co.id/media/catalog/product/w/2/w25668_a.jpg?optimize=high&amp;bg-color=255,255,255&amp;fit=bounds&amp;height=290&amp;width=290&amp;canvas=290:290 290w,https://www.colehaan.co.id/media/catalog/product/w/2/w25668_a.jpg?optimize=high&amp;bg-color=255,255,255&amp;fit=bounds&amp;height=365&amp;width=325&amp;canvas=325:365 325w,https://www.colehaan.co.id/media/catalog/product/w/2/w25668_a.jpg?optimize=high&amp;bg-color=255,255,255&amp;fit=bounds&amp;height=350&amp;width=350&amp;canvas=350:350 350w,https://www.colehaan.co.id/media/catalog/product/w/2/w25668_a.jpg?optimize=high&amp;bg-color=255,255,255&amp;fit=bounds&amp;height=380&amp;width=380&amp;canvas=380:380 380w,https://www.colehaan.co.id/media/catalog/product/w/2/w25668_a.jpg?optimize=high&amp;bg-color=255,255,255&amp;fit=bounds&amp;height=480&amp;width=480&amp;canvas=480:480 480w,https://www.colehaan.co.id/media/catalog/product/w/2/w25668_a.jpg?optimize=high&amp;bg-color=255,255,255&amp;fit=bounds&amp;height=525&amp;width=525&amp;canvas=525:525 525w,https://www.colehaan.co.id/media/catalog/product/w/2/w25668_a.jpg?optimize=high&amp;bg-color=255,255,255&amp;fit=bounds&amp;height=575&amp;width=575&amp;canvas=575:575 575w,https://www.colehaan.co.id/media/catalog/product/w/2/w25668_a.jpg?optimize=high&amp;bg-color=255,255,255&amp;fit=bounds&amp;height=650&amp;width=650&amp;canvas=650:650 650w" sizes="(min-width: 1536px) 325px, (min-width: 1280px) calc((85vw - 220px - 5rem) / 3), (min-width: 1024px) calc((100vw - 220px - 5rem) / 3), (min-width: 768px) calc((100vw - 180px - 4rem) / 3), (min-width: 640px) calc((100vw - 3rem) / 3), calc((100vw - 2rem) / 2)" src="https://www.colehaan.co.id/media/catalog/product/w/2/w25668_a.jpg?optimize=high&amp;bg-color=255,255,255&amp;fit=bounds&amp;height=365&amp;width=325&amp;canvas=325:365" alt="ØriginalGrand Kiltie Loafer" width="325" height="365">

SO what is wrong I am doing here?

Thanks

[vovayatsyuk]

You need to add other sizes too, otherwise, they are inherited from a blank theme: https://github.com/breezefront/theme-frontend-breeze-blank/blob/master/etc/view.xml#L7-L22

[vovayatsyuk]

If you use evolution as your parent theme, you need to redeclare these values: https://github.com/breezefront/theme-frontend-breeze-evolution/blob/master/etc/view.xml#L7-L38

[rutulritz]

Ok I will try it.

Thanks @vovayatsyuk

[rutulritz]

Hi @vovayatsyuk , It is working

Big big... Thanks for the help.

Thanks a lot.
:)

[rutulritz]

Hi @vovayatsyuk

I made the changes as above. But now for only one store website it is not working.
You can check here : https://katespade.co.id/handbags/category/view-all.html

In here images are showing proper on first load before lazy, but after some seconds its showing with white background. Also hover images are showing proper without white background..!!

Is there any other configuration for swatches and images ?

<!-- Product grid listing -->
            <image id="category_page_grid" type="small_image">
                <width>335</width>
                <height>446</height>
            </image>
            <image id="category_page_grid-srcset-1" type="small_image">
                <width>350</width>
                <height>466</height>
            </image>
            <image id="category_page_grid-srcset-2" type="small_image">
                <width>380</width>
                <height>506</height>
            </image>
            <image id="category_page_grid-srcset-3" type="small_image">
                <width>480</width>
                <height>639</height>
            </image>
            <image id="category_page_grid-srcset-4" type="small_image">
                <width>525</width>
                <height>699</height>
            </image>
            <image id="category_page_grid-srcset-5" type="small_image">
                <width>575</width>
                <height>766</height>
            </image>
            <image id="category_page_grid-srcset-6" type="small_image">
                <width>650</width>
                <height>866</height>
            </image>

I am using above code for image resize. Can you please help me once again on it?

Thanks

[vovayatsyuk]

I think you have to change all image dimensions from view.xml file according to your needs: https://github.com/breezefront/theme-frontend-breeze-blank/blob/master/etc/view.xml

Especially, pay attention to those which use the exact dimensions as used in the grid listing: https://github.com/breezefront/theme-frontend-breeze-blank/blob/master/etc/view.xml#L85-L116