PNG images has black background in google shopping

Hi,

We recently switched to PNG’s for our product images so we have more flexiblity in background colours. These images look perfectly fine on Shopify. However, when we use these links for google shopping they appear to have a black background? Other images seem fine in shopping. Both have been saved in the same way in photoshop..

https://cdn.shopify.com/s/files/1/0196/5893/2324/files/TR-65045_1.png?v=1683102584 appears black in shopping

vs

https://cdn.shopify.com/s/files/1/0196/5893/2324/products/0012268_tr-65035_1.png?v=1682523510 looks fine in shopping.

Any idea?

1 Like

This usually happens when the images are compressed, it looses certain information that Google needs.

Consider compressing / saving the images with different png settings, this usually helps resolve the issue.

And when you upload the image, make sure they are a different file name.

You can also try and test by directly uploading the images in Google Merchant Center > products > all products > click on your product > click on the edit icon.

So you can test much quicker, before editing all images.

Thanks a lot. We tried everything and saved them in any way possible. Still remains a mystery why picture 1 works perfectly fine and picture 2 has a black background. This is both in shopping and organic results in google.. Any other ideas?

We’re having this issue on our site too, nothing seems to fix it. I’m having a really hard time finding any real answers to this question. Did you ever resolve it or is it ongoing?

Consider saving the images as JPG or WEBP

i have this same issue and find it quite strange that this even is a problem for google and it can not handle simple PNG images. saving them to JPG is not an option because we want to use the transparancy in the design of our website. Any other solutions to fix this? I have a ton of PNG images, some work fine and many show a black background, there seems to be no real logic.

The issue is not with Google, the issue is that if you downscale your images, and using PNG, with lossy, then black backgrounds appear in certain situations. This is because minimizing your images too much will cause the files to be not so good.

I recommend using a photo imaging tool, to re-process the images in batch and do not use lossy, but losseless. Or better yet, don’t minimize the quality too much.

Alternatively, use WEBP, which does not have this issue.

Please see here for an alternative way of fixing that issue in case you still face it - https://www.feedoptimise.com/blog/fix-black-background-image-transparency-and-unsupported-image-type-google-merchant-center

1 Like