Uploading transparent overlay .png comes out incorrect

(Nathan Hadinata) #1

Hi Discourse community,

I uploaded a .png with a transparent overlay over a circle (to give a texture patter to the circle). But when uploaded, it made the circle darker (333333 to 0b0b0b). The circle should remain 333333 gray, with a transparent texture pattern over it. I’d attach an image but i’m a new user, so discourse won’t allow it yet.

I have tested the .png on different browsers, and it displays properly. I also uploaded it onto a genesis framework wordpress site, and it displays properly without alteration.

The stranger part of this is that when i upload other graphical assets that have transparent overlays, they uploaded perfectly fine. (these were larger than 400x400 but not sure if that mattered). So this narrows the problem to my specific 144x144 graphic designed for the discourse apple icon slot.

I use Illustrator, and I use the same save for web choices: png-24, transparency, type-optimized

Is there a optimization process that Discourse performs when it detects a transparent layer over a design?


(Jeff Atwood) #2

Can you upload it here?

(Nathan Hadinata) #3

Sorry, I can’t upload imgs because i’m a new user here on discourse’s meta site.

The problem did get a bit more confusing, because I recently uploaded our logo (on our discourse site) that didn’t have a transparent overlay, and it still looked like it uploaded darker, or burnt. So the transparent overlay didn’t have to do with the problem, i think.

Through trial and error, I narrowed the problem down to our logo, but only some of our logos. 3/4 of our logo graphics go through fine, while 1/4 of them end up burnt.

I swapped the logo with the default discourse logo and saved that for web on Illustrator with the same exact settings and artboard of our problem graphic logo, and it uploads just fine. So I have no clue why some of our logos end up “burnt”, when others didn’t. I also tested for size differences large and small.

Based on these results, I could say that the problem is solely on Illustrator CC. But when I upload any of these graphics on our other wordpress sites, they upload without artifact or filter.

Hope these new findings help discover what is going on. And I’m sorry i’m unable to send screenshots :frowning:


You could just upload them to something like Google Drive and link them here.
(Saying Drive and not Imgur because imgur compresses/modifies the images.)

(Nathan Hadinata) #5

Good idea, thanks Moter8, here’s the link


The images themselves too, else nobody can troubleshoot that :wink:

(Nathan Hadinata) #7

Ok, here’s the google folder with the assets

(Jeff Atwood) #8

I bet this is the image greyscale munging problem that has been reported elsewhere with greyscale avatars.


(eg Discourse greyscale jpg avatar processing adds darkness? & Uploading Grayscale images causes the image to be darkened )

(Jeff Atwood) #10

This is fixed in the latest Discourse docker image, ImageMagick had an old, bad build with old png libraries.

(Jeff Atwood) #11