[Resolved] Split: Transparent PNG image has a black background when resized

[Author]

Posts

[Silvia]

Chris, thank you so much for all your help!
Now I am working on the CSS to make the page presentable, but I have learned a great deal with your help.
The only thing I need to understand now is why the icon (now perfectly visibile), when resized to a smaller size, displays a black background, although it's a transparent png. Do you have any idea?
Thank you again!

[Minesh Supporter Languages: English (English ) Timezone: Asia/Kolkata (GMT+05:30)]

Hello. Thank you for contacting the Toolset support.

I see Christian spit the ticket to debug this issue. I will assign this ticket to him and he will get in touch with you as soon as he start his day.

[Christian Cox]

Hi, I'm looking here but I don't see a black background:
hidden link
I resized the image to 50x50 pixels in the Content Template, but I don't see any black backgrounds. I'm using a Mac and I tested in Chrome, Firefox, and Safari. I've also tested on my mobile (iPhone) and I don't see a black background there either. Is there any additional information you can give me? Can you clear the browser cache and see any changes?

[Silvia]

Chris, thank you again for your support.
You can't see a black background with "agroalimentare" because for testing purposes I substituted the .png file with a .jpg file, but I am attaching a few images that can show you the problem, along with a screenshot of the wp-types settings.
I took a screenshot of the media library BEFORE and AFTER clearing the cache (button in Toolset Settings). After clearing the cache a few blank images mysteriously appeared. Anyway, you can see that the first icon (which is resized by Types) has a black background around it, whereas the original file doesn't.
I tried viewing the page with a few different browsers including one that was never used before to view the site pages, and the black background is still there. Is it possible that it's a glitch in TYPES when resizing images?
If you need other info please let me know.

[Christian Cox]

Something strange is going on with that particular image. Please try with a new exported PNG image I have attached.

[Silvia]

Dear Chris,
I tried with the .png image that you attached and everything was ok. How do you suggest I go from here? I used a licensed version of Illustrator CC to create these icons, do you think the bug is in the way these .png are saved?

[Christian Cox]

I've seen transparency issues in the past with some PNG file encoding, specifically Index Mode PNGs. However, your original PNG was RGB mode so I'm not exactly sure what the problem was. To fix it, all I did was open the original file in Preview (on a Mac) and export a new PNG file. That leads me to believe the problem was in the original PNG image encoding or color mode. It's strange to me that only this image is causing problems - if you created all the images in the same software it seems like they would all have the same problem. If you have a Mac, you can try the same steps for any other images that cause transparency problems. Otherwise, I will gladly update any PNG files you have that continue to cause problems like this. Please zip them up into an archive and paste a link here for me to download. I will export new PNGs as needed.

[Silvia]

Dearest Chris,
you are so overwhelmed with other help requests that I would feel really bad making you do something I can do on my own with a little patience, but I immensely appreciate your offer!!
Thank you for your help, I have other issues with the development of this website so I hope to get your help again, you were really helpful and very nice!
I consider this ticket closed and thank everyone involved.