Why Magento Product Images Have White Borders/Frame & How to Remove Them

In Magento, product images sometimes appear with white borders or frames due to the image resizing functionality. This happens because Magento maintains the aspect ratio when resizing images, adding a white frame if the original product image dimensions do not match the required size.

How to Fix White Borders in Magento Product Images

There are two ways to resolve this issue:

1. Upload Properly Sized Images:
Magento specifies product image dimensions in the view.xml file of your theme. If this file is not present in your theme, you can either create a new one or copy it from the Magento default theme. Uploading images that match the required dimensions will prevent Magento from adding white borders.

2. Disable the Frame in view.xml:
If you do not want to upload new images, you can disable the frame by setting the <frame> value to false in your view.xml file. You can find this file in:
app/design/frontend/theme_vendor/theme/etc/view.xml

<image id="product_page_main_image" type="image">
<width>600</width>
<height>600</height>
<frame>false</frame>
<transparency>false</transparency>
</image>

<image id="product_page_image_medium" type="image">
<width>600</width>
<height>600</height>
<frame>false</frame>
</image>

Note: Ensure that the <frame> element is placed in the correct sequence, as shown above. Otherwise, you may encounter an XML error.