Image quality problem on resize

[Martijn Geerts]

Damn, Horst !  Very very cool... 

[robinc]

This is just what I am looking for!

Is there anywhere I can download your imagick resizer module?

[adrian]

It's not fully ready yet, but horst has been working hard on it. He will probably chime in here soon, but you can get a fairly recent version of his work here:

https://processwire.com/talk/topic/6096-imagick-resizer-need-tests-for-icc-cms/

Navigate into the site-default/modules folder in the zip and grab the module from there.

[horst]

Yes, Adrian is right, it isn't ready yet. Actually there are a few things that need to discussed / solved / changed with the ImageSizer and image handling generally. After that is done, I will implement the same solution into ImagickResizer. Currently it does not recognize settings for upscaling / cropping / etc. But it would be good if you can test it and send a feedback. Or if you can explain how to set up Imagick locally on Mac (if you are on a Mac) in that thread Adrian has linked to.

Additional to that we are working on the naming scheme. If I remember right you has asked about that too: https://processwire.com/talk/topic/6205-module-pageimage-naming-scheme/

[Martijn Geerts]

I can't find the time to install ImageMagic. Lot's of stuff happening right now and to many things on the todo list... Wished, time was on my side.

[horst]

Martijn, no problem! Every one of us has max. 24 hours per day. And all of us need some time to sleep, some time for the family, some time for other things and some time for ProcessWire. I think - in this order.

[robinc]

Yes, Adrian is right, it isn't ready yet. Actually there are a few things that need to discussed / solved / changed with the ImageSizer and image handling generally. After that is done, I will implement the same solution into ImagickResizer. Currently it does not recognize settings for upscaling / cropping / etc. But it would be good if you can test it and send a feedback. Or if you can explain how to set up Imagick locally on Mac (if you are on a Mac) in that thread Adrian has linked to.

Additional to that we are working on the naming scheme. If I remember right you has asked about that too: https://processwire.com/talk/topic/6205-module-pageimage-naming-scheme/

I have managed to get imagick setup locally (after many hours!) - I will test and post results as soon as i have time (using wampserver php 5.3 on vista 32 bit, had to use image magick 6.7, as the latest 6.8.9 wouldn't play nice - not got time upgrade my wamp right now.

I have a newer version (php and image magick, 64bit linux) on my server, so will be interesting to compare results.

I am most interested in the imagick::INTERPOLATE_xxx functions, as GD2 is giving me horrible results for upscaling images more than 200% (looks to be nearest neighbour, not even bilinear).

I think it is very good to be moving to an image-library agnostic approach to ImageSizer, so that one can just drop in gd2, Imagick, etc.

Yes I did ask about the naming conventions, what you have written so far looks good - i will see if i can think of any other suggestions for it (add the interpolation method?) also, may be useful to set a different default method for upscaling vs downscaling.

[Soma]

We have transparent product images as pngs. 

Now resizing them gives us artifact (lines) inside the image.

I set sharpening to none and tried different things but no matter what there's lines in the resized thumbs. It even happens on non transparent images (visible on white background), but there it seems it can be avoided at least by setting gamma higher. 

Here a image showing the artifacts (contrast and darkened in PS to show the effect) It's barely visible but depends on the monitor and I see it clearly on mobile but hardly noticed on desktop. I am a little lost as to if this is possible to avoid.

[horst]

If you like, I can have a look at it if you pm me one of the original trasparent png images.

[Soma]

They're attached. Thx

[horst]

@soma: the above attached images seem to work fine here on my machine. ?? I don't see those lines.

But in the past there were other images that had some artefacts. It mostly depends on settings for defaultGamma, sharpening and if sharpening uses USM (useUSM) or not.

I suggest you try / experiment with the following options:

$options = array(
    "forceNew" => true,
    "defaultGamma" => -1,    // disable Gammacorrection
    "sharpening" => "none",  // disable sharpening or use "soft"
    "useUSM" => true         // use USM or disable it with false
);

Sorry that I cannot more helpful with this. I used PW 2.6 stable and GD-lib with PHP 5.3 and PHP 5.4.

[Soma]

Thanks alot Horst for your time!

The lines are hardly visible so not sure. These indized optimized png's I attached do have these lines when resized.

When I do convert such an image to normal rgb png and upload it these lines are still there. 

Now It seems that it depends on the Photoshop version! I'm not sure how, but a png from a coworker saved in CS6 seems to work and has no lines. it's also when I open the optimized pngs in my CS4 the alpha transparency isn't shown and the modus is indized 8bit and the transparent shadow is black pixled, while in CS6 it shows the png correct as rgb and alpha transparency.

The agency that does the images sent us unoptimized pngs and they seems to work.

[horst]

Ah, good to hear. I have used Photoshop CS5 to inspect & play with the images.

It is always the best practice (if possible!) to upload unoptimized images with max quality to use them as the original source only.

The only downside is that you cannot / should not serve those original source to the public. (But you can serve a variation with identical dimensions, but optimized and/or with lesser quality).

[Jonathan Lahijani]

We have transparent product images as pngs. 

Now resizing them gives us artifact (lines) inside the image.

I set sharpening to none and tried different things but no matter what there's lines in the resized thumbs. It even happens on non transparent images (visible on white background), but there it seems it can be avoided at least by setting gamma higher. 

Here a image showing the artifacts (contrast and darkened in PS to show the effect) It's barely visible but depends on the monitor and I see it clearly on mobile but hardly noticed on desktop. I am a little lost as to if this is possible to avoid.

I'm experiencing the same issue as Soma, except my images are JPG.  In my generated thumbnails from my master images, the white becomes off-white.

I also tried modifying config's imageSizerOptions, however this didn't fix the issue:

$config->imageSizerOptions = array(
  //"forceNew" => true,
  'upscaling' => true, // upscale if necessary to reach target size?
  'cropping' => true, // crop if necessary to reach target size?
  'autoRotation' => true, // automatically correct orientation?
  // changed from soft
  'sharpening' => 'none', // sharpening: none | soft | medium | strong
  // changed from 90
  'quality' => 100, // quality: 1-100 where higher is better but bigger
  // changed from 60
  'hidpiQuality' => 100, // Same as above quality setting, but specific to hidpi images
  // changed from 2.0
  'defaultGamma' => -1, // defaultGamma: 0.5 to 4.0 or -1 to disable gamma correction (default=2.0)
  );

One thing I also tried was to mess with the original image's color profiles and such in Photoshop and then regenerated new thumbnails based off of that, but that didn't work either.

I have a suspicion that this has to do with WAMP's image processor?

[horst]

Hi jlahijani,
 

the only thing what should have influence on that is defaultGamma. Have you tried 2.2 ?

Also the master images should be max possible quality (Photoshop quality 12)

The output colorspace must be sRGB, regardless if with or without embedded icc profile.

Can you tell the GD lib version and the used PHP version?

[Jonathan Lahijani]

the only thing what should have influence on that is defaultGamma. Have you tried 2.2 ?

Changing it to 2.2 worked!  Awesome.