Borders on Png Images

Bug Reports
1

When I put a Png file with transparency the borders of the images looks bad (with blacks pixels).

Why is this happening?

Here an example:

This happen to all my Png images with transparency.

2

The artifacts match what would happen if the image contains pre-multiplied alpha. The PNG specification explicitly states that for translucency, only non pre-multiplied alpha should be used. What program produced those PNGs? Could you send me one on erik@fusetools.com so I can have a look at the file?

3

I use Adobe Illustrator to export my images. I send an email with the png file.

Thanks!

4

Thanks for the test-case. The file looks fine at first glance, but I’ll see if I can figure out what’s going on.

5

I found out what happens: The problem is that we’re drawing the image using bilinear filtering without using pre-multiplied alpha blending. The fully transparent pixels are colored black in your image, and while interpolating between a transparent pixel and a semi-transparent pixel at the border, we end up blending white and black, and doing component-wise interpolation between something like <0, 0, 0, 0> and <1, 1, 1, 0.5> gives something like <0.5, 0.5, 0.5, 0.25> rather than <1, 1, 1, 0.25>, which is the result we’d want.

This is something we’re aware of, but most images we’ve used don’t have this blackness in the transparent pixels, so we haven’t considered this matter pressing. The real solution is for us to implement pre-multiplied color operations, but this is unfortunately not a quick fix.

As a temporary band-aid, you can try the following (which helped for me):

  • Open the file in Photoshop
  • Copy the picture to a new layer
  • Apply a 2 pixel blur to the new layer
  • Set the new layer’s transparency to 1%

This makes the antialiasing every so slightly softer (not really noticable at all), while convincing photoshop to white out some more pixels.