mike62

[RESOLVED] Images losing saturation when resized by ProcessWire

Recommended Posts

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?

Screen Shot 2017-11-22 at 2.21.50 PM.png

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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="">

 

  • Like 2

Share this post


Link to post
Share on other sites

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 by heldercervantes
Adding an API tip
  • Like 5

Share this post


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

Share this post


Link to post
Share on other sites

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

Screen Shot 2017-11-23 at 6.56.10 AM.png

  • Like 2

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 gregory
      Hi guys.
      I would like to show only the first image as a preview of a slideshow. The code below shows the first image but is repeated. Do you know a solution? Thank you
      //Call image foreach($story->galleria as $img) { echo "<img src='{$story->galleria->first()->url}' alt='{$story->galleria->first()->description}'>"; }  
    • By Marcel
      Hey, 
      I am very new to processwire and bootstrap. I have a field (text area) and there I want to be able to insert an image which is responsive. I tryed it with Source but in the end the page doesn't seem to like it when I insert in Source the following code
      <img src="<?php echo $homepage->content_img->url; ?>" class="img-fluid" alt="Responsive image"> What can I do to make it possible to insert reponsive images in a text area?
      Thank you in advance.
      Marcel
    • By gonzz
      I'm doing an artist site and they want to be able to upload a large .tiff to their portfolio. I need to keep to a copy of the original file in the server for the art distributers, and of course serve jpg in the web front end.
      I had the idea of extending the file or image upload input so that if the image is tiff, keep it, and also convert it to jpg, so I could access through something like $image->originalUrl or $image->size(100, 100)->url 
      I was wondering if you thought this a good idea, or if i'm over-engineering something that could be done simply. Also, I've never extended an input, so any examples are welcome.
      Thanks!
    • By Markus Breitinger
      I want to use Particle.js as background of my page. What modules do i need and where must i put the code?
      The usage of particle.js in plain HTML is in the attached files.
      index.css
      index.html
    • By rst
      I am having problems uploading svg images in the the latest pw 3.0.98. It shows the preview and has the spinner on top of it, and just gets stuck on that.
      Worked fine in the previous version of PW