Issue with product background on PNGs

Shopify Discussion

AI-generated summary

Transparent PNG product images are showing with black backgrounds in Google Merchant Center/Shopping for some items, even though they appear fine in Shopify. A linked product page and a screenshot from Merchant Center were shared to illustrate the issue.

Key points raised:

  • The likely cause is PNG transparency/alpha data being altered by image optimization or compression during export.
  • Google Shopping may not reliably handle transparent PNGs, so transparency itself is considered the main risk.
  • Suggested workaround: use a solid background version for Google, typically white, while keeping the current site images for Shopify.

Options discussed:

  • Re-save PNGs without the problematic compression to restore missing transparency information.
  • Add an almost invisible white background with very low opacity so it appears transparent on the site but still contains background color data.
  • Create separate white-background “Shopping” image variants and send those through the feed.

Current status:

  • No confirmed fix was reached.
  • The discussion remains open, with separate feed images or avoiding transparency presented as the safest solution.
1

We are experiencing an issue with the background of our product pictures. We use PNGs with transparent background.

We send those to the merchant center where we receive “black” backgrounds, funnily enough not on all, but some of the products. This looks really bad in google shopping and we need to improve it.

Challenge:

  • we cannot just make the background white, because our website design uses a grey-ish background
  • we cannot use a grey-ish background because the images are also forwarded to marketplaces

Is there a way to fix this and keep our structure?

One idea I had was to create duplicates of the main image, make the backgrounds white and manipulate the data feed so that google merchant center receives different images. Unfortunately this will take forever to make. Are there any existing solutions to make this process easier?

Thank you in advance.

2

Here is a guide I made about the problem: https://www.youtube.com/watch?v=AByHaAiHTLc

This is something to do with your image optimization tools.

3

Could you share the link to your store?

4

I remember reading (and using) a recommendation to make your background white with very low, but not zero opacity, like 0.001.

This way it will look transparent to the eye, but will still have a background color information in the file, thus preventing black background.

5

Thank you very much. If I understood the video correctly the compression of the PNGs is the issue. Do you happen to know if opening the PNGs and saving them again without compression will revert this? Or is it too late once the damage is done?

6

This is one of the products and this is how I see it in the merchant center:

image
image720×425 34.5 KB

7

Unfortunately this will overwrite our grey-ish background. Thank you for the idea though.

8

I don’t remember if that worked in my tests, but I recommend testing it out, I think it should work as the image software will add info back in, that was stripped out before.

9

With opacity of 0.01? It would not be noticeable.

10

Keep the alpha on export or feed Google a white-backed clone via params.

11

I am not sure I fully understand. Could you please elaborate?

12

Google Shopping doesn’t always handle transparent PNG backgrounds well.
When that happens, your image can show up with a black (or odd) background in Shopping, even if it looks fine in Shopify.

So the safe approach is:

• use product images with a solid clean background (usually white), or
• keep a separate “Shopping” image version that has no transparency.

In short: transparency is the problem. A solid background image is usually the fix.