We're Hiring!

Mattermost Discussion Forums

PNG preview got ugly black backround

Summary
When I attach a PNG image to my message, the semi-transparent parts become black on the thumbnail preview and on the image viewer. I can still download the original picture, but that’s quite annoying.

Steps to reproduce
I had this issue with Mattermost 5.37.0 and I upgraded today to Mattermost 5.38.0 and still have the same bug. Before 5.37.0, I didn’t had this issue. I’m using Ubuntu Server 18.04.5 LTS.

To reproduce it, you just have to upload a PNG image with semi-transparent zone (any window screenshot from the macOS native Capture.app for example)

Expected behavior

Observed behavior

Hi, @Zlitus

Can you confirm which version of Mattermost desktop you are on and the theme that you are using? Is it also reproducible on the web browser too?

I tested this on the following environment and verified that the PNG image preview (from screen capture) looks like this:

  • Mac OS Big Sur 11.4
  • Mattermost Server 5.38.0
  • Mattermost Mac OS app 4.7.1

Are you looking at having only the full image appearing on the screen minus the black background?

Hello,

Yes I do have the same issue with the native client and with the web version into the browser. On your screenshot, you don’t have the issue because your PNG do not have a semi-transparent (alpha) area, can you please try with this PNG for example?

Thank you very much.

We have a ticket for this here: https://mattermost.atlassian.net/browse/MM-36295

2 Likes

Amazing, thank you very much.
As a way to fix it and to improve the display and to reduce the bandwidth, I would suggest to stop to convert all PNG to JPEG, but to convert all PNGs to webP.

Why?

The ticket seems to have been marked as “unscheduled”? And it seems that there is basically no action on this.

Is there anyway to kick this up in priority a bit? We copy paste images from jupyter notebooks all the time into our chat, and since august, they now always get ugly, nearly unreadable fonts due to the transparency aliasing…

1 Like