Magento 2.3 adds white stripes while resizing a product image for a frontend product list

[decornmore]

Hi,

after i have move to Magento 2.3 all my images on site look very bad. I have checked and try to understand what is the problem and found the images been resized.

you can see images show on my site:

https://babybeddingdesign.com/pub/media/catalog/product/cache/9d08971813a040f8f96067a40f75c615/d/u/d...

https://babybeddingdesign.com/dumbo-crib-bedding-collection-crib-bedding-set

Magento 2.3 adds white stripes while resizing a product image for a frontend product list.

her the original images I have uploaded to Magento.

1024X1024

[madhuresan_ramanan]

Hi @decornmore,

Sorry I can't able to view your original image which your have uploaded. can you re-upload it?


If my info is useful, give kudos

Best regards
Madhuresan
Bootsgrid

[decornmore]

[madhuresan_ramanan]

Hi @decornmore,

Can you upload the original image again once? since I can't able to see it. Upload your image as png on your site and try this solution since png format has no background.

If my solution is useful, give kudos & accept as solution

Bets regards
Madhuresan
Bootsgrid

[decornmore]

Hi,

i have 500 images i cant change all to PNG. also what Magento add  the white stripes? i never have any problem like this on Magento before this is new problem and a big one as my images look bad. how can we solve this? 

[decornmore]

You can see same image i have upload to Magento 1 to see how it look . you can see the difference how good it look on Magento 1. 

Magento 2.3: https://babybeddingdesign.com/disney-baby-minnie-mouse-flower-4-piece-crib-set

https://babybeddingdesign.com/pub/media/catalog/product/cache/9d08971813a040f8f96067a40f75c615/d/i/d...

magento 1:https://showhunts.com/test1.html

https://showhunts.r.worldssl.net/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e9...

[decornmore]

I checked both images given and the product details page images of these sites. In the showhunts.com the image size is 400X400 with tightly placed in the DIV element used to display product image. In the site babybeddingdesign.com, the product image holder element not in square shape it is 340X448 size. I checked the product image uploaded from the admin side and found it correct size (https://babybeddingdesign.com/pub/media/catalog/product/d/i/disney_baby_minnie_mouse_flower_crib_set...). I tried to check the border issue by changing the product image settings provided in the theme settings. It could not solved the issue. Also, I checked default product image size and it is default values and look like changed. I noticed an extension used for gallery. I disabled it from admin side to test and it couldn't make any changes in the border issue so enabled it. The product image in the frontend loading from the cache it is resized image with white border. The white background is from the resize. I checked the source file to update the product image size values for the theme installed. I am unable to find out it.

[madhuresan_ramanan]

Hi @decornmore 

I just now reviewed the site the problem is height of the image. so I can give you the solution here
1) open the product page URL.https://babybeddingdesign.com/dumbo-crib-bedding-collection-crib-bedding-set
2) Inspect the image in your product page and search the class name as 'fotorama__stage'
3) set the height for 428 pixel.
If my solution is useful, give kudos & accept as solution

Best regards
Madhuresan
Bootsgrid

[decornmore]

the problom is on all my sites not only on this page. 

[madhuresan_ramanan]

Hi @decornmore,

Do one thing refer your CSS file and there your can change the height of the image as 428 in any of css file which one is main calling css file.

If my solution is useful, give kudos & accept as solution

Best regards
madhuresan
Bootsgrid