Streaming live at 10am (PST)

Transparent PNG black background?

Why are some of my PNG’s getting a black background after being published and some are not?
https://modeller.webflow.io/shop/categories

https://preview.webflow.com/preview/modeller?utm_medium=preview_link&utm_source=designer&utm_content=modeller&preview=718928633a91e8f0cee5c1aec4f42d77&mode=preview


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

so the problem image is coming from the e-commerce database and web flow is compressing it badly
here is the image I load 2.1mb

and then it’s serving this 107kb

it’s so frustrating because it is perfect in preview !
and the same image on the static home page does not get the black background

Unrelated to the black bg problem - having an image that is 2.1mb on a page used in a way that you do is really inefficient. Try using tinypng.com to compress this huge image before uploading. It may solve your black transparency issue as well.

webflow is serving up a 107 Kb image not the 2.1mb one I’ve uploaded. As I understand it one of the benefits of using a service like webflow is I can upload a single large image (4mb limit) and then an algorithm resizes it at runtime based on where its being served. I know how to resize and compress image but an algorithm can do it much better than I can. Also other images that are even larger, that also get resized by the webflow servers before loading are preserving the alpha channel without a problem. so all evidence suggested it’s server side bug.

Well, you are not wrong, Webflow does serve different sizes, but it is not a panacea and sometimes it won’t serve the correct one because the algorithm is quite complex. It is strongly suggested to not rely on Webflow responsive images and make sure images you upload are properly sized and compressed. Your png’s could be made 90% smaller without losing any quality.

Hi, @Peter_Eller!!

Ben here with the Webflow Customer Support Team!

Thanks so much for posting this. I know this isn’t what you are expecting and it’s odd behavior.

:point_up: This is really good advice. We do compress images here at Webflow, but it’s always good practice to use tools like Photoshop and TinyPNG before uploading.

That being said, this is definitely odd. I loaded your site and I noticed that the image no longer has that black background. Did you already resize your images? Do you still need help?

I’ll be looking forward to hearing back from you so I can help! :webflow_heart:

1 Like

Yes I deleted the file that was doing it but it’s still happening and I can’t find a difference in the files that do it from the ones that don’t but you can see in the asset panel thumbnails, the png’s that do it have black backgrounds and the ones that don’t have have grey background. if you want I can send you a pair of files one that causes the glitch and one that doesn’t

Thanks for the update, @Peter_Eller!! I’ve done some more digging and I think I can see the issue. I’m doing a deeper dive now. I’ll let you know if I need anything else! :webflow_heart:

cheers! I 'll keep watching

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.