Image Background Removal

[ThomDe]

How do I remove the background of the images in the Niara theme?

I uploaded an image without a background color but for some reason a white background was added. 

[the.rampage.rado]

The magic of TB - it always has white background... 😄

I imagine your Niara has dark background color and you want your product to be visible with transpartent background?

[Traumflug]

The unfortunate truth is, neither PS 1.6 nor thirty bees support transparent images. Actually, implementing such a feature and its sibling, non-square images, in PS 1.6 is the reason why I started developing for PS and eventually joined tb:

Getting rid of the white background needs a deep dive into PHP, where these images get resized for the various types a theme wants.

[oliver]

Hmm, interesting, for me transparent and non-square images work!

 

I've used transparent category images for several years now on PS, and my product pictures have alwasy been 16:9 (but not transparent)

I've just tested it, and I've used a transparent product image, and it shows up transparent on the product page, as expected.

Check in the Back office, under Preferences -> Images.

There's a setting to "always use PNG" and there's also various setting to change the size and ratio of your images.

 

Of course, it may depend on your theme, I don't think my theme uses the standard image carousel, but instead I have slippry.js

[ThomDe]

I was able to resolve it, thank you very much!

[datakick]

This really depends on image format you use. JPG does not support a transparent background, while PNG does. 

Also, it's not really important in what format the source/original image is. Thirtybees will generate different sizes from the source according to images settings, and these variants will be either jpg or png, depending on store settings.

[Pedalman]

I had the same question in the past.

I stumbled also about shops that had non-white product image backgrounds and if they choose to have a gray background it looked attractive to me. At this time I thought to know that Google and also Amazon had the "prerequisite" that product images have white background. Today I think it might be ok if it is consistent.

As Petr and Oliver said you will need png images with 'transparent' background. Then you can make product image background in any color you like via css (theme settings). Right?

But now I am interested in two points:

1.) I want to go in near future with webp images. Does thirtybees create these 'after' product image background for png was rendered? So, if I have product image with transparent background and choose a gray backfground via css does the webp then have a grey background or something else?

2.) I assume that if I have png product images with transparent background and I export my products via feed to Google (Shopping feed), Amazon etc. I would have no problems since they gather the png with transparency and add the background they like?

[ThomDe]

On 7/1/2020 at 4:22 PM, Pedalman said:

I had the same question in the past.

I stumbled also about shops that had non-white product image backgrounds and if they choose to have a gray background it looked attractive to me. At this time I thought to know that Google and also Amazon had the "prerequisite" that product images have white background. Today I think it might be ok if it is consistent.

As Petr and Oliver said you will need png images with 'transparent' background. Then you can make product image background in any color you like via css (theme settings). Right?

But now I am interested in two points:

1.) I want to go in near future with webp images. Does thirtybees create these 'after' product image background for png was rendered? So, if I have product image with transparent background and choose a gray backfground via css does the webp then have a grey background or something else?

2.) I assume that if I have png product images with transparent background and I export my products via feed to Google (Shopping feed), Amazon etc. I would have no problems since they gather the png with transparency and add the background they like?

Unfortunately I don't have an answer to 1.

However I believe 2. should work. Best for both would be trying it.