Jump to content

Image resize corruption - black lines on PNG

Recommended Posts

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?


  • Like 1

Share this post

Link to post
Share on other sites

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.

  • Like 7

Share this post

Link to post
Share on other sites

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 ?

  • Like 2

Share this post

Link to post
Share on other sites

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

I will have a good look at this today.

Share this post

Link to post
Share on other sites

@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. :(

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By thausmann
      Hey, I'm trying to completely switch over to WebP and noticed some strange behaviour. Let's say I upload a PNG in Processwire of size 1280x800.
      $page->image->url ➝ correct URL (filename.webp) $page->image->width(800)->url ➝ correct URL (filename.800x0.webp) $page->image->width(1280)->url ➝ wrong URL (filename.1280x0.png), webp file is not generated $page->image->width(1280)->url(false) ➝ correct URL (filename.1280x0.webp) but webp file is not generated So: When I request a size that equals the original file, no WebP conversion is happening (no webp file is created, although a new PNG is generated (...1280x0.png)).
      When I use url(false), I get the expected URL but still the file is not generated. Also interesting: this issue is only occuring with PNG, not JPG.
      My Configuration:
      $config->imageSizerOptions('webpAdd', true);  $config->imageSizerOptions('defaultGamma', -1); GD Pageimage::url Hook from here  Also tried to output width(1280)->webp->url, it makes no difference I checked that the PNG version is not smaller in filesize (PNG=450KB, WebP (from other tool)=60KB) Tested with Processwire 3.0.148 and 3.0.160 dev I think this post is about the same issue and where I got the url(false) from. Setting 'useSrcUrlOnFail' => false inside $config->webpOptions results in correct output URL (filename.1280x0.webp), but still the file is not generated. So maybe the webp conversion fails? Apparently I see zero webp logs in logs/image-resizer.txt  
      "Don't use resize" seems like a solution here but this is a generic approach in my code, sometimes uploaded images are simply already in the correct size. 
      Any ideas how to fix this and always get dem sweet sweet WebP images? Or did I find a bug?
      Maybe @horst has an idea what the cause of this phenomenon could be? 😇
    • By ThierryGD
      Hi there,
      I've been resizing some .png and got some pretty visible loss of quality. I attached those for comparison - around the Titanic (I know, they're big).
      I tried to find similar threads but couldn't find anything that helped - at least it made me install Horsts IMagick Image Sizer.  
      foreach($detailrp->detail_repeater_bild as $pRetinaBild) { if ($pRetinaBild->width > $pRetinaBild->height) { // 3320px wide $pHighBild = $pRetinaBild->size(1660, 0); $pLowBild = $pRetinaBild->size(830, 0); } else { // 3220px high $pHighBild = $pRetinaBild->size(0, 1610); $pLowBild = $pRetinaBild->size(0, 805); } Anyone has any idea what causes this and how to solve it? Or should I just go with .jpg? Thx!

    • By eutervogel
      what I'm doing is this:
      <picture> <source srcset="<?php echo $page->section_three->main_img->first()->size(396,710)->webp->url; ?>" type="image/webp"> <img class="p_absoulte pp_block" src="<?php echo $page->section_three->main_img->first()->size(396,710)->url; ?>" alt=""> </picture> and for some reason it sometimes becomes this:
      <picture> <source srcset="/site/assets/files/1057/sektion3_bild-1.396x710.png" type="image/webp"> <img class="p_absoulte pp_block" src="/site/assets/files/1057/sektion3_bild-1.396x710.png" alt=""> </picture> It seems to be related to ->size(). When I don't use ->size() the webp Url is correct.
      I'm using the image-field inside a Fieldset(Page). Could that be a problem too?
      I just increased the output size by 2px and voila the webp url comes up. 
      I deleted all variations (webp variation is present in correct size) changed it back to the original size and again: a png url.

      I also tried to rename the image and load it up agian. 
      ...same behavoir.
      Thanks in advance guys
    • By PawelGIX
      Can I convert uploaded images to PNG, GIF, BMP -> JPEG?
      Is there any function in the API that I can change the file type?
    • By sirhc
      I have a big image in my image field and want to resize it to 2280px before showing it to the user.
      Most images are fine and showing as expected, but with one I have the following error;

      Error: Out of memory (allocated 159383552) (tried to allocate 12288 bytes) (line 243 of /htdocs/process/wire/core/ImageSizerEngineGD.php) 

      Why is this with one image and not with the other ones, and how to solve this?
  • Create New...