Image quality problem on resize

[humanafterall]

Hi,

I'm using the on the fly image resizing in Processwire to create suitable image sizes for different viewports (using Foundation's Image Interchange).

All seemed to be working fine but I'm having real trouble with the quality of the outputted image.

This is the orginal image:

This is an example of a resized image:

It looks like it's losing colour information in the process of being resized.

I've tried setting the default quality to 100% (in the wire/core/ImageSizer.php) but to no avail.

Could anyone share any light on what might be happening here?

[robert]

Hi humanafterall,

I had a similar problem with the resizing function and posterization in dark image areas, my workaround was to comment out the gamma correction in the Imagesizer.php (lines 247 & 387). I’m not sure what that function is good for, but now everything looks good.

There is a similar discussion going on over here.

[humanafterall]

Hi Robert,

I couldn't get it to work correctly (wasn't cropping anymore) and worked out it needs to be lines

247 & 386 in Imageriszer.php that needed to be commented out (rather than 387).

Thanks!

[Soma]

Look both the exact same on my Android. Though d little different orange on my MAC book.

Could it be that there is color profile in original? And resized has not?

[humanafterall]

Hi Soma,

Odd - actually you may have viewed it when I was updating the images linked to in the original post.

Can you try a refresh and see if the images above look the same now?

Also here's a grab of the second image. Are you definitely not seeing any posterization on the gradient?

[Soma]

Yeah I see that too, now that you mention it. Well I'm not surprized really, as such gradients get posterizes real quick and with GD lib it's almost certain. This is kinda nit picking for me, as I wouldn't expect a better quality from a "GD resize" for a thumb of that type of image having dark, subtle gradients (I'm kinda expecting it). ImageMagic would be better in that regard, though could imagine you would get a poster too. But that's not supported anyway, so I'm not sure what to tell as I'm no expert with image resizing on server software. Best bet would be to resize them with a program and upload them at the right size already. Or does commenting out those lines you guys tell help in that regard?

[renobird]

Can you post the resulting images with the lines commented out? 

I've learned to live with the limitations of GD library, but would be thrilled if there was a way to improve.

[horst]

 I had a similar problem with the resizing function and posterization in dark image areas, my workaround was to comment out the gamma correction in the Imagesizer.php (lines 247 & 387). I’m not sure what that function is good for, but now everything looks good.

 There is a similar discussion going on over here.

@robert: if you are interested in what it does, you may read the link that is posted in the thread you linked to: http://www.4p8.com/eric.brasseur/gamma.html#introduction

There is an error in most photography scaling algorithms. All software tested (August 2007) had the problem: The Gimp, Adobe Photoshop, CinePaint, Nip2, ImageMagick, GQview, Eye of Gnome, Paint and Krita. Also three different operating systems were used: Linux, Mac OS X and Windows. (Software that don't have the problem are listed in the Solutions chapter.)

Photographs that have been scaled with these software have been degradated (see the examples). The degradation is often faint but probably most pictures contain at least an array where the degradation is clearly visible. I suppose this happens since the first versions of these software, maybe 20 years ago.

In fact with first linearizing to 1 and after resizing linearizing back result in correct images. They are brigther in comparision to the ones resized with gamma errors. These ones results in to darkened images. If you want try it on your own images, you may incorporate a grayscale and / or other colortargets and check the results by the histograms or with the colorchecker in photoshop. But the explanation with examples from Eric Brasseur are really good and detailed I think.

Could it be that the posterization is allready in the original images? At a very low scale, but allready there? And yes if you then darken the images together with resizing you end up not seeing it that strong. Sounds possible, right? But I'm not sure. If you have a look to the original image from chrizz in the other thread, you see that it has allready some artefacts, so visually tolerable, but they are allready there.

Maybe there are better solutions available then disabling gamma correction. I really would have a closer look to that and test with other sharpening methods.

Would you be so kind and send me one of your original images where you get better results without gamma correction? Also usefull a resized one with and one without linearizing and the information what sharpening mode you have used. (I can pm you my emailadress if you want)

It is not good that exactly people who do a lot work on their images run in this problems whereas the overall common cases gets better results with it.

[adrian]

I am not sure on the whole GD vs Imagemagick quality issue. I know years ago IM was ahead, but not sure if that is still the case. From reading around it sounds like they each have their strengths and weaknesses. That said I have always used IM until I started using PW.

For the sake of experimenting, I quickly threw this module together as a way to test IM within PW. It replaces the resize method, so it will work from the admin and also template calls like: $image->size(400,0)

It doesn't do anything more than the resizing at the moment - it currently ignores all quality settings, cropping etc. I doesn't try to do any sharpening either, but it's a starting point that we can play with. I need to get back to real work, but thought one of you guys might be keen to play around with and tweak settings and see what you can come up with.

Obviously you need imagemagick on your server and also the iMagick extension.

ImagickResizer.module

[horst]

...  Could anyone share any light on what might be happening here?

Hi @humanafterall. additionally to that what I have replied to @robert, it has nothing to do with linearization (gamma correction). The artefacts comes from sharpening the images. Attached is a test with sharpening set to 'none', the default 'soft' and the third image is a rezied version where I have added some noise to yout original image with photoshop. This is common usage: if you have technical gradients with pixel formats use the filter "add noise". How much and if monochrome or colored you may test, but that's the only way I know to avoid these artefacts.

You can set / send options in your template like this:

		$img = $page->images->first();
		$img->removeVariations();

		$options = array(
			'cropping' => true,
			'sharpening' => 'none',
			);
		$img = $img->size(768, 436, $options);

EDIT: added more clearly that I have added noise to the original image and resized it in PW with GD-lib.

Edited March 22, 2014 by horst

[horst]

For the sake of experimenting, I quickly threw this module together as a way to test IM within PW. It replaces the resize method, so it will work from the admin and also template calls like: $image->size(400,0)

It doesn't do anything more than the resizing at the moment - it currently ignores all quality settings, cropping etc. I doesn't try to do any sharpening either, but it's a starting point that we can play with. I need to get back to real work, but thought one of you guys might be keen to play around with and tweak settings and see what you can come up with.

@adrian: this is a very good starting point! An IM alternative may be good for all that can use it on their hosts.

But for all users that cannot, we have to improve the usage of GD.

[adrian]

Agreed horst - we need to make GD the best it can be. I do like the idea of a drop-in IM replacement though. There are so many settings that developers could tweak with IM. One thing that should be tried straight off is using: adaptiveResizeImage instead of ResizeImage, which is what I used in the module to start with.

Anyway, as I said, no time right now, but perhaps if enough people are keen and think the benefits are worth the effort, perhaps we could collaborate on this?

[horst]

Anyway, as I said, no time right now, but perhaps if enough people are keen and think the benefits are worth the effort, perhaps we could collaborate on this?

Currently I'm not knowing IM, but I'm in!

[horst]

Can you post the resulting images with the lines commented out? 

I've learned to live with the limitations of GD library, but would be thrilled if there was a way to improve.

@renobird: Tom, to comment it out is nonsense. It just do the opposite: it save the original colors when resizing, whereas not using it it wash out (some) colors (makes them darker). A very helpful article with tests, examples and explanations is here: http://www.4p8.com/eric.brasseur/gamma.html

This article also provides solutions for IMagick and Adobe Photoshop that have the same gamma error in resizing 8bit images! The advantage from Imagick and photoshop over GD-lib is their support for 16bit colordepth. Transfering images into 16bit colordepth do exactly a gamma linearization at first and after that a numbered colortransfer!

One way to improve it is to use gamma correction!

[teppo]

Agreed horst - we need to make GD the best it can be. I do like the idea of a drop-in IM replacement though. There are so many settings that developers could tweak with IM. One thing that should be tried straight off is using: adaptiveResizeImage instead of ResizeImage, which is what I used in the module to start with.

Anyway, as I said, no time right now, but perhaps if enough people are keen and think the benefits are worth the effort, perhaps we could collaborate on this?

I'm not particularly interested or knowledgeable in image optimisation myself (as long as I can still tell what's in the image and it doesn't consume too much disk space and/or cause unnecessary slowdowns all is good) but this sounds awesome! GD vs. Imagick is clearly something that's been bugging some folks and we'll likely be seeing even more topics about that in the future.

I sincerely hope that you guys find the time to take this further

[chrizz]

I have had the same problem some days ago... 

Is you example a JPEG image? I switched from JPG to PNG and the results of quality are significant better!

Unfortunately Photoshop does a much better job than GD does. While the original png (1024px) has a size of about 300 KB a resized version down to 721px needs 570 KB. I'll try to use IM next time or as mentioned above: Resize all images in Photoshop (which is not the solution I would prefer since PW has such cool functions

[horst]

... While the original png (1024px) has a size of about 300 KB a resized version down to 721px needs 570 KB

that makes no sense. The original must be greater than the resized version.

And even with jpeg format, the original source should be 100% quality (and therefor greater than resized versions) and only the outputted / resized versions should be degradated to lesser quality (70 - 90).

If you use a lossy compressed source, you multiple times add artefacts to the outputs.

And PNG can be compressed too.

--------

Workflow 1 could be:

• local source format TIFF, 16bit colordepth (ECI-RGB_v2 or Adobe-RGB) (regardless of with or without lossless compression)
• convert to sRGB colorspace, optionally scale down to max 1600px, reduce colordepth to 8bit and save it as JPEG with quality 12 (photoshop) or 100% (other software)
• upload this JPEG as original source
• try resizing and sharpening with unsharpMask($amount, $radius, $threshold) from PageImageManipulator

Workflow 2 could be:

• local source format TIFF, 16bit colordepth (ECI-RGB_v2 or Adobe-RGB) (regardless of with or without lossless compression)
• convert to sRGB colorspace, optionally scale down to max 1600px, reduce colordepth to 8bit and save it as PNG without compression
• upload this PNG as original source
• try resizing and sharpening with unsharpMask($amount, $radius, $threshold) from PageImageManipulator and test different quality settings for the output (results in smaller filesizes)

And once the imagick-module is ready change to it  

but above workflows may be worth a try.

[chrizz]

Thanks for these two workflows. I'll give it a try as soon as possible.

My last trial was this workflow:

- Export from Lightroom as PSD

- Save for Web via Photoshop as PNG

- Upload PNG (as described above 300 KB))

- Resize image via PW (570 KB)

The quality of all images is quite nice when using PNG, but the size isn't.

As soon as I have some more results I'll let you know. 

[Joss]

Just for interest, why do you go from Lightroom to PS rather than just export from LR? Or can't you do png from Lightroom and I never noticed...

Horst, that add noise trick is really useful. I couldn't appreciate it on my desktop but it really shows up on my kindle - very neat.

[horst]

 - Save for Web via Photoshop as PNG 

Don't use it for the original source image. Simply save as PNG (not with the SaveForWeb-Plugin). Would assume you get 800-1600k filesize then.

Upload it to site assets and do a test for the best quality / filesize:

	// you first need to install the PageImageManipulator

	$width     = 680;
	$qualities = array(10,20,30,40,50,60,70,75,80,85,90,95,100);
	$options   = array('sharpening'=>'none', 'cropping'=>false, 'upscaling'=>false, 'quality'=>100);  // options for the image sizeing: max quality without sharpening
	$amount    = 100;  // unsharpMask default values
	$radius    = 0.5;  //      "
	$threshold = 3;    //      "

	$image = $page->images->first();
	$image->removeVariations();

	foreach($qualities as $quality) {
		ini_set('max_execution_time', 15);
		$img = $image->pimLoad("{$width}_q{$quality}", true)->setOptions($options)->width($width, 'none')->unsharpMask($amount, $radius, $threshold)->setQuality($quality)->pimSave();
		echo "<p>Quality: {$quality} :: Filesize: " . filesize($img->filename) . "<br /><img src='{$img->url}' width='{$img->width}' height='{$img->height}' alt='{$img->name}' title='' /></p>\n";
	}

If you have found the best quality value for your images you may try different values with USM-sharpening. (it is the same like with photoshop)

[chrizz]

hey ya!

thanks for sharing the code!

After some testing here are some intermediate results:

1. Resizing with PageImageManipulator gives better results than the build-in resizing

2. Exporting (like mentioned in Workflow 2) causes bigger PNGs than the original

3. I'll test much more with the PageImageManipulator. Seems this could be very(!) useful

Thanks for sharing!

@Joss: LR does not include PNG export. This has to be done with a plugin called MagicExport. With PIM it looks like I can export the good ol' JPG from LR and put it online directly without PS

Cheers!

[horst]

 ...

1. Resizing with PageImageManipulator gives better results than the build-in resizing

...

Glad to hear it gives better results for you now. But want to clarify that resizing with PiM is 100% identical with resizing from the build in ImageSizer. You have used another sharpening method with PiM. You used USM-sharpening which produces better results but is very slow as PHP-implementation for GD. But supports identical values for all three params as photoshop does.

[horst]

Hhhm, not enough time to go much further these days, but interesting stuff this ImageMagick.
 
Imagick can be setup as CMS (Color Management System). I have created a little colorTargetfile and a Testcase with files of different colorspaces, colordepth, with and without embedded ICC-profiles, including Adobe-RGB, ECI-RGB, sRGB, different CMYK and different Grayscale. The RGBs and CMYKs it seems I have covered already, grayscales are on the todo.
 

 

[horst]

- Chacka!

[kongondo]

Oh oh...This boy is on fire!!!! Good job @Horst!