What's wrong with my png image, which changes colors in different contexts?

Question

I have this image: https://i.sstatic.net/3jnJ3.jpg

However, when I embed this image in HTML, the colors are messed up: https://jsbin.com/rurisowewi/edit?html,output

<img src="https://i.imgur.com/iMxIrhV.png" alt="">

I suspect that something about the image's metadata got messed up? Can anyone explain to me what happened here?

I'm not sure if it's relevant, but I generated this image with Python and Numpy (by stitching two images together like a panorama mosaic), and saved the output as png. I don't think this is the root cause though, because I ran the same code with same inputs several times and this weird color-changing issue only happened once.

I resized this image with the Resize/Resample dialog in IrfanView afterwards, though.

Any thoughts?

Answer 1

I don't know much about HTML and how it handles transparency, but I can tell you that a very significant part of your image is in the alpha (i.e. transparency) channel.

If you extract the alpha channel just on its own, you can see that it contains most of the detail of the image. I did this with ImageMagick in the Terminal:

magick YourImage.png -alpha extract alpha.png

If, on the other hand, you remove the alpha channel and just show the RGB data, you will see there is almost nothing it:

magick YourImage.png -alpha off RGB.png

So my answer is that somehow your browsers are unable or unwilling to correctly honour the alpha channel.

You can probably make a useable image like this:

magick YourImage.png -background black -flatten Useable.jpg