Jump to content
humanafterall

Image quality problem on resize

Recommended Posts

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:

bafta-film-awards-campaign-2014.jpg

This is an example of a resized image:

bafta-film-awards-campaign-2014.768x436.

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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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?

posterization.png

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

 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.

Share this post


Link to post
Share on other sites

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

  • Like 3

Share this post


Link to post
Share on other sites
...  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.

humanafterall_test_sharpening-none.jpg

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 by horst
  • Like 2

Share this post


Link to post
Share on other sites
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.

  • Like 2

Share this post


Link to post
Share on other sites

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?

  • Like 2

Share this post


Link to post
Share on other sites
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! :)

  • Like 2

Share this post


Link to post
Share on other sites

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! :grin:

  • Like 3

Share this post


Link to post
Share on other sites

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 :)

  • Like 2

Share this post


Link to post
Share on other sites

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 :D

Share this post


Link to post
Share on other sites

... 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.

  • Like 2

Share this post


Link to post
Share on other sites

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. 

Share this post


Link to post
Share on other sites

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.

  • Like 1

Share this post


Link to post
Share on other sites

 - 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)

  • Like 1

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

 ...

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.

Share this post


Link to post
Share on other sites

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.
 
pw_imagick_cms_preview_01.png
 

  • Like 7

Share this post


Link to post
Share on other sites

- Chacka! :grin:

pw_imagick_cms_preview_02.png

post-1041-0-09434000-1396367322_thumb.pn

  • Like 7

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 humanafterall
      I'm using some Custom fields for images: 
      https://processwire.com/blog/posts/pw-3.0.142/#custom-fields-for-files-images

      When I save the page, and return the fields are blank. When I re-add the text to the fields and save again then the fields save as expected.

      I know this is stated as being quite experimental but it's super useful feature I'd love to get working correctly.
      I have fields that are CKEditor fields but have overidden this on the image specific template. I've also tried it with regular text fields and I get the same bug.
      (currently using Processwire 3.0.155)
      **UPDATE**
      I've found this issue is specific to editing on pages using the PageTable fieldtype. The fields are not saving when I save the page in the PageTable.
    • By Robin S
      Displays image tags overlaid on the thumbnail using customisable colours. This makes it easier to see which images have which tags without needing to open the edit pane for individual images or changing to the list view.
      Screenshot

      Usage
      Enable tags for one or more image fields. Install the Image Thumbnail Tags module. Optionally configure colours for any of your tags.
       
      https://github.com/Toutouwai/ImageThumbnailTags
      https://modules.processwire.com/modules/image-thumbnail-tags/
    • By EyeDentify
      Hello dear PW gurus.

      I have stumbled over a strange error that i all of sudden got when trying to upload an image to a images field on a page.
      There where images allready stored in the field that i wanted to keep, but during the upload the error apear and after that all images are gone from the field and i can´t upload any, i just get the error every time.
      I am running ProcessWire 3.0.153 dev.
      Update:
      After looking in the assets folder i find the folder for the page and the image files seems to be there including the ones i tried to upload when the error occured.
      But they don´t show up in the images field in the page editor.
       
      The error reported:
       
      SQLSTATE[01000]: Warning: 1265 Data truncated for column 'ratio' at row 1 And here is a screenshot of the event:

      The TracyDebugger Error reporting:

      I hope you fine folks could point me in a direction.
      But it seems our old pal set_time_limit() is back.

      Regards, EyeDentify
    • By Peter Knight
      If an image is added to a site via the rich text field, do we have a way to apply a custom wrapper or mini template to it?
      IE I want to apply some markup srcset to some user added images. I can only seem to achieve this when the image markup is in the template itself.
      https://github.com/rolandtoth/MarkupSrcSet/wiki
      I can probably achieve this with RepeaterMatrix and by creating a specific Images field (and images template) but outside of that ?
      Thanks
    • By Andi
      Continuing my journey into PW hooks, I'm trying to find a way to retrieve all images from a page that explicitly *do not* have a certain tag (or tags) attached to them.
      Found this post from 2015
      But I'm wondering if there's a more elegant way to go about this.
      Let's say I have a multi-image field called "images_header" and instead of
      $page->images_header->findTag('mytag'); I would like to do this:
      $page->images_header->excludeTag('mytag'); So I'd be able to do
      // find images that don't have the tag "mytag" $images = $page->images_header->excludeTag('mytag'); // check if there's any images if (count($images)>0) { // do something.. } Would this be possible by hooking into Pagefiles somehow?
      There's this bit in /wire/core/Pagefiles.php Line 626 that I'd basically just need to reverse (or at least in my mind 😄 )
      public function findTag($tag) { $items = $this->makeNew(); foreach($this as $pagefile) { if($pagefile->hasTag($tag)) $items->add($pagefile); } return $items; } Any ideas on how this could be done in a graceful manner?
      Thanks in advance!
×
×
  • Create New...