I found something cool about background color

[Pedalman]

Hello I stumbled today about an online shop that is getting better after a long time being not so: https://toom.de

Please have a look at any category and notice the background color of product images. All are of a constant gray tone and I wonder how they did it.

I am no techie but tried to get a clue via browser tools and it looks like they are using highly compressed (too much I think since image quality is low) PNG images and add via some php function a gray tone that fits to overall column color. Could this be imagemagick or ....?

I always wnated to have product images on a gray tone background but never followed this path since I had enough troubles to get a proper white background with my own product photography and Ebay/Amazon once only accepted product images on white (pure white 255 255 255 rgb) backgrounds.

Could some one please enlighten me?

[tommat]

All those images have grey #f5f5f5 background. I think they were processed in a photo manipulation software... photoshop or something else... maybe this: https://clippingmagic.com/

[datakick]

I think it's indeed some on-the-fly image manipulation.

https://static.toom.de/produkte/bilder/1450502/145050202.png https://static.toom.de/produkte/bilder/1450502/145050202.png?grey=1

This effect can be achieved by imagemagick, for example by using floodfill. For this to work, source images must be in good quality, and have pure white background.

[tommat]

i guess that would work, but only for high res images wihout any shadow

[datakick]

That's true, the source images must be high quality. Merchant needs to make sure that the white background does not blend into the image. At this point, it's probably easier to just remove the background altogether, and make it transparent png. Then we could simply show this image on top of any background

[Jonny]

If your images are in pure white background, then you can use a piece of css code to change their backgrounds to gray by using css filter property which is supported by all major browsers. {-webkit-filter: grayscale(100%); filter: grayscale(100%);} I can send you an example if you need.

[Pedalman]

Hello

thank you for taking time on this. I found this https://css-tricks.com/apply-a-filter-to-a-background-image/ on the web. I am going to play with it next year. As said I find it very interesting how they did it and how it could be implemented into a already running web shop. In my case I tried to upload only product images with 255 255 255 white background. Anyway, there will bi still a small number of images with different bg. May be I will get into offering best product images (quality, size, visual attractiveness) finally. There it would be helpfull to integrate imagemagick into the core image controller perhaps :)