Image resize corruption - black lines on PNG

[icreation]

My client is uploading images via CK Editor into a textarea. The image type is a transparent PNG like the one attached (head-three.png)

However when Processwire resizes this image there are little black line all through.

See the 'head' image on this page - http://thinkingtosuccess.co.uk/business/#tab2

The original image is attached.

How can we avoid these black lines causing the image corruption?

[horst]

Hi @icreation,

thanks for dropping in all relevant things: original image, scaled image variation and issue description.

But, however, I have no good message for you. The GD-Image-Library that is shipped with PHP for image handling cannot handle smooth transients from opaque to transparent. Also if the image looks like it would only have hard cuts between full color and full transparent areas, it isn't that way.

Have a look to my screenshots to understand what I try to say (as a none native english speaker / writer). Especially look at the red dot from the colorpicker and the values for RGB in the info palette:

here it shows the values for blue (46, 172, 250)

.

here in the transparent area it shows nothing

.

but here, almost 4-5 pixel away from the color area, it shows the exact RGB values like in the blue area (46, 172, 250). Obviously this area has a transparency from nearly 100%, but only nearly. In fact it has only 98 - 99% transparency what let the GD-Library struggle with it.

---

I don't know how comfortable your client are with image manipulation in regard of understanding this. The graphics look professional though. If they could try to cut them without that smooth area maybe it will be better. Or you / they could try to export the graphics to GIF instead of PNG.

Additionally to that you can tweak the imageSizerOptions for those images to render with these values:

$options = array(
    'defaultGamma' = -1,
    'sharpening' = 'none'
);

$image = $image->size($width, $height, $options);

Hope that helps a bit.

[adrian]

Such a clean illustration like that should be displayed as an SVG

Seriously though if you don't need to support <IE9 you could have your editors upload as an SVG and it should work great. If you do need to support <IE8 or you have other illustrations which are more complex and you want to rasterize on the fly at the required size, you could check out: http://modules.processwire.com/modules/image-rasterizer/ although keep in mind that it does have some server dependancies that might not be available. 

@horst - what is the status of https://github.com/horst-n/PageimageSizerImagick ?

[icreation]

Many thanks for taking the time on such detailed answers, it is much appreciated.

I will have a good look at this today.

[horst]

@Adrian: this one is obsolete. It only would work with PW before 2.5 I think and also the IMagick Extension struggles with one sort of transparent PNG.

There are 5 different sorts of PNG possible:

• 24 bit none transparent
• 8 bit none transparent
• 24 bit transparent (smooth)
• 8 bit transparent (hard), (a bit like GIF with 255 palette and 1 transparent pixel)
• 8 bit transparent (with a sort of semi transparent pixels, not like with the 24 bit but also different then hard cutted)

The IMagick extension doesn't detect 8 bit hard transparent images and renders them with black noice, but not only a few pixels. It renders most of the transparent area black. I haven't found any information on the net about how to work around that.