[RESOLVED] Images losing saturation when resized by ProcessWire

[mike62]

Please see attached screenshot. The image on the left is the original image that was uploaded. The image on the right is what it looks like after it was resized to fit into a template by ProcessWire using

<img src="<?php echo $featured_image->size(854,0)->url ?>" />

This is a significant loss of color for these images. Is there a way to prevent this from happening — other than forcing client to crop the images to the exact dimensions ahead of time, and not resizing with PW?

[WireCodex]

if the size in bytes of the images is not a problem, you can resize it with css. It seems to be a situation with the php image library when generate the new image, perhaps use a color space, a gamma correction or a color depth different

[Robin S]

Are you sure you are comparing apples with apples here? In your screenshot, is the original image being viewed in the context of a browser, or is it viewed in some other application?

There are so many things that can come into play when you are dealing with colour management - whether the image has a colour profile embedded, what the colour profile is (sRGB is probably the safest option), the colour management support within the application you are viewing the image in, etc. To verify that the colour loss has anything to do ProcessWire's resizing you should insert the original image next to a resized version of that image in a template file and view them in your browser.

<img src="/path/to/original-image.jpg" alt="">
<img src="<?= $page->image->size(854,0)->url ?>" alt="">

 

[heldercervantes]

Damn that hurts.

Like Robin says, check your colour profile on the original image. Also, I've been handed JPEGS in CMYK instead of RGB, and 24 bit instead of 16. These are weird, I haven't seen many, but Trump got elected, Brexit won and the far-right is gaining ground in Europe so...

You can also try using ImageMagick for your image processing needs instead of the default GD:

https://modules.processwire.com/modules/image-sizer-engine-imagick-cli/

 

By the way...

$featured_image->size(854,0)->url

is the same as

$featured_image->width(854)->url

 

Edited November 23, 2017 by heldercervantes
Adding an API tip

[DaveP]

8 hours ago, heldercervantes said:

You can also try using ImageMagick for your image processing needs

+1 for this - ImageMagick is usually quicker and takes less server resources (can handle larger images) than GD. If available, I'd always prefer it over GD.

Just a thought, is front-end resizing on upload involved at all?

[mike62]

Thanks everyone for all the tips! Some notes:

The screenshot I took shows the image *in PW* on the left (I clicked on the thumbnail in the backend and it opened the lightbox; that's what you're seeing there). So yes, that is a direct comparison of the uploaded image, to the resized image.

Looks like ImageMagick requires PW 3.0.10...  The site I've adopted is a mess of old modules, and I can't update it past 2.3.0.

But... good news! I tried downloading the original image, opening it in Photoshop, using their legacy "Save for Web" export dialog, making sure it's set to sRGB, re-uploaded it, and bam! Thanks @Robin S!